Skip to content

Commit 15cdc01

Browse files
crazyservercrazyserver
committed
MOBILE-4065 course: Fix course and module cards
1 parent 51420ad commit 15cdc01

File tree

6 files changed

+60
-51
lines changed

6 files changed

+60
-51
lines changed

‎src/core/features/course/components/course-index/course-index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h2>
3232
class="expandable-status-icon" (ariaButtonClick)="toggleExpand($event, section)"
3333
[attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
3434
[attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"
35-
[class.expandable-status-icon-expanded]="section.expanded" tabindex="0">
35+
[class.expandable-status-icon-expanded]="section.expanded">
3636
</ion-icon>
3737
<ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
3838
</ion-icon>

‎src/core/features/course/components/module/core-course-module.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
<ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0" [class.core-course-module-with-view]="moduleHasView">
1+
<ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0" [class.core-course-module-with-view]="moduleHasView"
2+
(click)="moduleClicked($event)" [button]="module.handlerData.action && module.uservisible"
3+
[attr.aria-label]="module.handlerData.a11yTitle ? module.handlerData.a11yTitle : null">
24
<ng-container *ngIf="!module.handlerData.loading">
3-
<ion-item id="core-course-module-{{module.id}}" detail="false"
4-
class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
5-
(click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" [ngClass]="{
5+
<ion-item id="core-course-module-{{module.id}}"
6+
class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}" [ngClass]="{
67
'item-dimmed': module.visible === 0 || module.uservisible === false
7-
}" [button]="module.handlerData.action && module.uservisible">
8+
}">
89

910
<core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" [modname]="module.modname"
1011
[componentId]="module.instance">

‎src/core/features/courses/components/course-list-item/core-courses-course-list-item.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<ion-card [class.core-course-list-item]="layout == 'list' || layout == 'listwithenrol'"
2-
[class.core-course-list-card]="layout == 'card' || layout == 'summarycard'" [class.item-dimmed]="course.hidden">
2+
[class.core-course-list-card]="layout == 'card' || layout == 'summarycard'" [class.item-dimmed]="course.hidden" (click)="openCourse()"
3+
button [attr.aria-label]="course.displayname || course.fullname">
34

4-
<div *ngIf="layout == 'card' || layout == 'summarycard'" (click)="openCourse()" class="core-course-thumb"
5-
[class.core-course-color-img]="course.courseImage">
5+
<div *ngIf="layout == 'card' || layout == 'summarycard'" class="core-course-thumb" [class.core-course-color-img]="course.courseImage">
66
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
77
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
88
</ion-icon>
@@ -27,7 +27,7 @@
2727
</div>
2828
</ng-container>
2929

30-
<ion-item class="ion-text-wrap" button detail="false" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname">
30+
<ion-item class="ion-text-wrap">
3131

3232
<ng-container *ngIf="layout == 'list' || layout == 'listwithenrol'">
3333
<ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"

‎src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
1-
<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" detail="false">
2-
<ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon>
3-
<ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
4-
<ion-label>
5-
<h2>{{ prefetch.statusTranslatable | translate }}</h2>
6-
</ion-label>
7-
</ion-item>
8-
<ion-item button class="ion-text-wrap" (click)="action('delete')" detail="false"
9-
*ngIf="prefetch.status == 'downloaded' || prefetch.status == 'outdated'">
10-
<ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
11-
<ion-label>
12-
<h2>{{ 'addon.storagemanager.deletedata' | translate }}</h2>
13-
</ion-label>
14-
</ion-item>
15-
<ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" detail="false">
16-
<ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
17-
<ion-label>
18-
<h2>{{ 'core.courses.hidecourse' | translate }}</h2>
19-
</ion-label>
20-
</ion-item>
21-
<ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" detail="false">
22-
<ion-icon name="fas-eye-slash" slot="start" aria-hidden="true"></ion-icon>
23-
<ion-label>
24-
<h2>{{ 'core.courses.show' | translate }}</h2>
25-
</ion-label>
26-
</ion-item>
27-
<ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" detail="false">
28-
<ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
29-
<ion-label>
30-
<h2>{{ 'core.courses.addtofavourites' | translate }}</h2>
31-
</ion-label>
32-
</ion-item>
33-
<ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" detail="false">
34-
<ion-icon name="far-star" slot="start" aria-hidden="true"></ion-icon>
35-
<ion-label>
36-
<h2>{{ 'core.courses.removefromfavourites' | translate }}</h2>
37-
</ion-label>
38-
</ion-item>
1+
<ion-list>
2+
<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" detail="false">
3+
<ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true"></ion-icon>
4+
<ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
5+
<ion-label>
6+
<p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
7+
</ion-label>
8+
</ion-item>
9+
<ion-item button class="ion-text-wrap" (click)="action('delete')" detail="false"
10+
*ngIf="prefetch.status == 'downloaded' || prefetch.status == 'outdated'">
11+
<ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
12+
<ion-label>
13+
<p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
14+
</ion-label>
15+
</ion-item>
16+
<ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" detail="false">
17+
<ion-icon name="fas-eye" slot="start" aria-hidden="true"></ion-icon>
18+
<ion-label>
19+
<p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
20+
</ion-label>
21+
</ion-item>
22+
<ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" detail="false">
23+
<ion-icon name="fas-eye-slash" slot="start" aria-hidden="true"></ion-icon>
24+
<ion-label>
25+
<p class="item-heading">{{ 'core.courses.show' | translate }}</p>
26+
</ion-label>
27+
</ion-item>
28+
<ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" detail="false">
29+
<ion-icon name="fas-star" slot="start" aria-hidden="true"></ion-icon>
30+
<ion-label>
31+
<p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
32+
</ion-label>
33+
</ion-item>
34+
<ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" detail="false">
35+
<ion-icon name="far-star" slot="start" aria-hidden="true"></ion-icon>
36+
<ion-label>
37+
<p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>
38+
</ion-label>
39+
</ion-item>
40+
</ion-list>

‎src/theme/helpers/custom.mixins.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181

8282
@mixin core-focus-style() {
8383
box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
84+
border-radius: var(--border-radius);
8485
// Thicker option:
8586
// border: var(--a11y-focus-width) solid var(--a11y-focus-color);
8687
}

‎src/theme/theme.base.scss‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -897,12 +897,16 @@ img[core-external-content]:not([src]) {
897897
}
898898

899899
ion-card {
900+
box-shadow: var(--box-shadow);
901+
margin: var(--ion-card-vertical-margin) var(--ion-card-horizontal-margin);
900902
border-width: var(--border-width);
901903
border-style: var(--border-style);
902904
border-color: var(--border-color);
903-
box-shadow: var(--box-shadow);
904905
border-radius: var(--border-radius);
905-
margin: var(--ion-card-vertical-margin) var(--ion-card-horizontal-margin);
906+
907+
&::part(native) {
908+
--border-width: 0;
909+
}
906910

907911
ion-item:only-child {
908912
--inner-border-width: 0px;
@@ -1521,7 +1525,8 @@ ion-input.has-focus,
15211525
.ion-focused ion-toggle:focus-within,
15221526
.ion-focused ion-select:focus-within,
15231527
.ion-focused ion-checkbox:focus-within,
1524-
.ion-focused ion-radio:focus-within {
1528+
.ion-focused ion-radio:focus-within,
1529+
ion-card:focus {
15251530
@include core-focus();
15261531
}
15271532

0 commit comments

Comments
 (0)