EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4065 course: Fix course and module cards

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2023-02-01 11:52:14 +01:00
parent 51420ada52
commit 15cdc017e5
6 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/features/course/components/course-index/course-index.html
View File

@ -32,7 +32,7 @@
class="expandable-status-icon" (ariaButtonClick)="toggleExpand($event, section)"
[attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
[attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"
[class.expandable-status-icon-expanded]="section.expanded" tabindex="0">
[class.expandable-status-icon-expanded]="section.expanded">
</ion-icon>
<ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
</ion-icon>

11
src/core/features/course/components/module/core-course-module.html
View File

@ -1,10 +1,11 @@
<ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0" [class.core-course-module-with-view]="moduleHasView">
<ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0" [class.core-course-module-with-view]="moduleHasView"
(click)="moduleClicked($event)" [button]="module.handlerData.action && module.uservisible"
[attr.aria-label]="module.handlerData.a11yTitle ? module.handlerData.a11yTitle : null">
<ng-container *ngIf="!module.handlerData.loading">
<ion-item id="core-course-module-{{module.id}}" detail="false"
class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
(click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" [ngClass]="{
<ion-item id="core-course-module-{{module.id}}"
class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}" [ngClass]="{
'item-dimmed': module.visible === 0 || module.uservisible === false
}" [button]="module.handlerData.action && module.uservisible">
}">
<core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" [modname]="module.modname"
[componentId]="module.instance">

8
src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
View File

@ -1,8 +1,8 @@
<ion-card [class.core-course-list-item]="layout == 'list' || layout == 'listwithenrol'"
[class.core-course-list-card]="layout == 'card' || layout == 'summarycard'" [class.item-dimmed]="course.hidden">
[class.core-course-list-card]="layout == 'card' || layout == 'summarycard'" [class.item-dimmed]="course.hidden" (click)="openCourse()"
button [attr.aria-label]="course.displayname || course.fullname">
<div *ngIf="layout == 'card' || layout == 'summarycard'" (click)="openCourse()" class="core-course-thumb"
[class.core-course-color-img]="course.courseImage">
<div *ngIf="layout == 'card' || layout == 'summarycard'" class="core-course-thumb" [class.core-course-color-img]="course.courseImage">
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
</ion-icon>
@ -27,7 +27,7 @@
</div>
</ng-container>
<ion-item class="ion-text-wrap" button detail="false" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname">
<ion-item class="ion-text-wrap">
<ng-container *ngIf="layout == 'list' || layout == 'listwithenrol'">
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"

78
src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
View File

@ -1,38 +1,40 @@
<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" detail="false">
<ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon>
<ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
<ion-label>
<h2>{{ prefetch.statusTranslatable | translate }}</h2>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('delete')" detail="false"
*ngIf="prefetch.status == 'downloaded' || prefetch.status == 'outdated'">
<ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<h2>{{ 'addon.storagemanager.deletedata' | translate }}</h2>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" detail="false">
<ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<h2>{{ 'core.courses.hidecourse' | translate }}</h2>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" detail="false">
<ion-icon name="fas-eye-slash" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<h2>{{ 'core.courses.show' | translate }}</h2>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" detail="false">
<ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<h2>{{ 'core.courses.addtofavourites' | translate }}</h2>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" detail="false">
<ion-icon name="far-star" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<h2>{{ 'core.courses.removefromfavourites' | translate }}</h2>
</ion-label>
</ion-item>
<ion-list>
<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" detail="false">
<ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon>
<ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
<ion-label>
<p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('delete')" detail="false"
*ngIf="prefetch.status == 'downloaded' || prefetch.status == 'outdated'">
<ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" detail="false">
<ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" detail="false">
<ion-icon name="fas-eye-slash" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<p class="item-heading">{{ 'core.courses.show' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" detail="false">
<ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" detail="false">
<ion-icon name="far-star" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>
</ion-label>
</ion-item>
</ion-list>

1
src/theme/helpers/custom.mixins.scss
View File

@ -81,6 +81,7 @@
@mixin core-focus-style() {
box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
border-radius: var(--border-radius);
// Thicker option:
// border: var(--a11y-focus-width) solid var(--a11y-focus-color);
}

11
src/theme/theme.base.scss
View File

@ -897,12 +897,16 @@ img[core-external-content]:not([src]) {
}
ion-card {
box-shadow: var(--box-shadow);
margin: var(--ion-card-vertical-margin) var(--ion-card-horizontal-margin);
border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--border-color);
box-shadow: var(--box-shadow);
border-radius: var(--border-radius);
margin: var(--ion-card-vertical-margin) var(--ion-card-horizontal-margin);
&::part(native) {
--border-width: 0;
}
ion-item:only-child {
--inner-border-width: 0px;
@ -1521,7 +1525,8 @@ ion-input.has-focus,
.ion-focused ion-toggle:focus-within,
.ion-focused ion-select:focus-within,
.ion-focused ion-checkbox:focus-within,
.ion-focused ion-radio:focus-within {
.ion-focused ion-radio:focus-within,
ion-card:focus {
@include core-focus();
}