Skip to content

Commit 074246f

Browse files
crazyservercrazyserver
committed
MOBILE-4636 course: Enclose sections in cards instead of modules
1 parent 7271ee3 commit 074246f

File tree

10 files changed

+80
-37
lines changed

10 files changed

+80
-37
lines changed

‎src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
44
</ion-label>
55
</ion-item-divider>
66
<core-loading [hideUntil]="loaded">
7-
<ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper">
7+
<ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper list-item-limited-width">
88
<ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
99
<ion-label>
1010
<core-format-text [text]="mainMenuBlock.summary" [component]="component" [componentId]="siteHomeId" contextLevel="course"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<core-loading [hideUntil]="loaded">
99

1010
<!-- Single section. -->
11-
<div *ngIf="selectedSection && selectedSection.id !== allSectionsId">
11+
<div *ngIf="selectedSection && selectedSection.id !== allSectionsId" class="single-section list-item-limited-width">
1212
<core-dynamic-component [component]="singleSectionComponent" [data]="data">
1313
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection}" />
1414
<core-empty-box *ngIf="!selectedSection.hasContent" icon="fas-table-cells-large"
@@ -17,7 +17,7 @@
1717
</div>
1818

1919
<!-- Multiple sections. -->
20-
<div *ngIf="selectedSection && selectedSection.id === allSectionsId">
20+
<div *ngIf="selectedSection && selectedSection.id === allSectionsId" class="multiple-sections list-item-limited-width">
2121
<core-dynamic-component [component]="allSectionsComponent" [data]="data">
2222
<ng-container *ngFor="let section of sections; index as i">
2323
<ng-container *ngIf="i <= lastShownSectionIndex">

‎src/core/features/course/components/course-format/course-format.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,18 @@
1414
.course-section {
1515
--inner-padding-end: 12px;
1616
}
17+
18+
.multiple-sections .core-course-module-list-wrapper {
19+
border: var(--ion-card-border-width) solid var(--ion-card-border-color);
20+
border-radius: var(--ion-card-radius);
21+
margin: 8px 4px;
22+
width: calc(100% - 8px);
23+
24+
ion-card {
25+
--ion-card-background: transparent;
26+
}
27+
28+
ion-item-divider {
29+
--background: transparent;
30+
}
31+
}

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

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

‎src/core/features/course/components/module/module.scss‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
--horizontal-margin: 12px;
55
--vertical-margin: 12px;
66
--card-padding: 16px;
7+
--card-border-width: 0px;
8+
--card-radius: 0px;
9+
--card-background: transparent;
710

811
ion-card {
912
margin: var(--vertical-margin) var(--horizontal-margin);
10-
11-
&.activityinline {
12-
border: 0px;
13-
}
13+
--ion-card-border-width: var(--card-border-width);
14+
--ion-card-radius: var(--card-radius);
15+
--ion-card-background: var(--card-background);
1416
}
1517

1618
ion-item {
@@ -125,6 +127,7 @@
125127
}
126128

127129
.activity-extrabadges {
130+
font: var(--mdl-typography-body-font-md);
128131
color: var(--medium);
129132
}
130133

@@ -182,13 +185,11 @@
182185
}
183186

184187
&.indented ion-card {
185-
border: none;
186-
--ion-card-radius: 0;
187188
@include margin-horizontal(calc(var(--horizontal-margin) + 1rem), null);
188189
}
189190

190-
&.indented + ::ng-deep core-course-module.indented ion-card {
191-
border-top: 1px solid var(--border-color);
191+
& + ::ng-deep core-course-module ion-card {
192+
border-top: 1px solid var(--ion-card-border-color);
192193
}
193194

194195
// Hide download folder icon meanwhile MOBILE-4147 is not solved

‎src/core/features/course/components/module/module.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
6666
prefetchStatusIcon$ = new BehaviorSubject<string>(''); // Module prefetch status icon.
6767
prefetchStatusText$ = new BehaviorSubject<string>(''); // Module prefetch status text.
6868
moduleHasView = true;
69-
activityInline = false;
7069

7170
protected prefetchHandler?: CoreCourseModulePrefetchHandler;
7271

@@ -103,18 +102,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
103102
this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title;
104103
this.moduleHasView = CoreCourse.moduleHasView(this.module);
105104

106-
if (
107-
this.module.handlerData.hasCustomCmListItem &&
108-
(!this.showAvailability || !this.module.availabilityinfo) &&
109-
(!this.showCompletion || !this.hasCompletion) &&
110-
(!this.showActivityDates || !this.module.dates?.length) &&
111-
!this.module.groupmode &&
112-
!(this.module.visible === 0) &&
113-
!(this.module.visible !== 0 && this.module.isStealth)
114-
) {
115-
this.activityInline = true;
116-
}
117-
118105
if (this.showDownloadStatus && this.module.handlerData.showDownloadButton) {
119106
const status = await CoreCourseModulePrefetchDelegate.getDownloadedModuleStatus(this.module, this.module.course);
120107
this.updateModuleStatus(status);

‎src/core/features/course/pages/list-mod-type/list-mod-type.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ <h1>{{ title }}</h1>
88
</ion-title>
99
</ion-toolbar>
1010
</ion-header>
11-
<ion-content>
11+
<ion-content class="limited-width">
1212
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
1313
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
1414
</ion-refresher>
@@ -18,7 +18,7 @@ <h1>{{ title }}</h1>
1818

1919
<ion-list class="core-course-module-list-wrapper">
2020
<ng-container *ngFor="let section of sections; index as i">
21-
<ng-container *ngIf="i <= lastShownSectionIndex">
21+
<ion-card *ngIf="i <= lastShownSectionIndex">
2222
<ion-item-divider class="course-section ion-text-wrap" *ngIf="section.name">
2323
<ion-label>
2424
<h2>
@@ -30,7 +30,7 @@ <h2>
3030
<core-course-module [module]="module" [section]="section" [showActivityDates]="false" [showAvailability]="false"
3131
[showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false" [showIndentation]="false" />
3232
</ng-container>
33-
</ng-container>
33+
</ion-card>
3434
</ng-container>
3535
</ion-list>
3636
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)" />

‎src/core/features/sitehome/pages/index/index.html‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,48 @@
88
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
99
</ion-refresher>
1010
<core-loading [hideUntil]="dataLoaded">
11-
<ion-list class="core-course-module-list-wrapper">
11+
<ion-list class="list-item-limited-width">
1212
<!-- Site home main contents. -->
13-
<ng-container *ngIf="section && section.hasContent">
13+
<section *ngIf="section && section.hasContent" class="core-course-module-list-wrapper">
14+
<ion-item-divider class="course-section ion-text-wrap"
15+
[class.item-dimmed]="section.visible === 0 || section.uservisible === false">
16+
<ion-label>
17+
<h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
18+
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="siteHomeId" />
19+
</h2>
20+
<div *ngIf="section.visible === 0 && section.uservisible !== false">
21+
<ion-badge color="warning">
22+
{{ 'core.course.hiddenfromstudents' | translate }}
23+
</ion-badge>
24+
</div>
25+
<div *ngIf="section.visible === 0 && section.uservisible === false">
26+
<ion-badge color="warning">
27+
{{ 'core.notavailable' | translate }}
28+
</ion-badge>
29+
</div>
30+
<div *ngIf="section.availabilityinfo">
31+
<ion-chip class="clickable">
32+
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
33+
<ion-label>
34+
<core-format-text [text]=" section.availabilityinfo" contextLevel="course"
35+
[contextInstanceId]="siteHomeId" />
36+
</ion-label>
37+
</ion-chip>
38+
</div>
39+
</ion-label>
40+
</ion-item-divider>
41+
1442
<ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
1543
<ion-label>
1644
<core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="siteHomeId" />
1745
</ion-label>
1846
</ion-item>
1947

2048
<core-course-module *ngFor="let module of section.modules" [module]="module" [section]="section" />
21-
</ng-container>
49+
</section>
2250

2351
<!-- Site home items: news, categories, courses, etc. -->
2452
<ng-container *ngIf="items.length > 0">
25-
<core-spacer *ngIf="section && section!.hasContent" />
2653
<ng-container *ngFor="let item of items">
2754
<ng-container [ngSwitch]="item">
2855
<ng-container *ngSwitchCase="'LIST_OF_COURSE'">

‎src/core/features/sitehome/pages/index/index.scss‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,21 @@ ion-item ion-icon {
1010
@include margin-horizontal(null, var(--margin-end));
1111
}
1212

13-
core-spacer {
14-
--spacer-horizontal: 10px;
13+
section.core-course-module-list-wrapper {
14+
border: var(--ion-card-border-width) solid var(--ion-card-border-color);
15+
border-radius: var(--ion-card-radius);
16+
margin: 12px;
17+
18+
ion-card {
19+
--ion-card-background: transparent;
20+
}
21+
22+
ion-item-divider {
23+
--background: transparent;
24+
}
25+
}
26+
27+
core-course-module.core-sitehome-news {
28+
--card-border-width: var(--ion-card-border-width);
29+
--card-radius: var(--ion-card-radius);
1530
}

‎src/theme/theme.base.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,9 +207,7 @@ img[core-external-content]:not([src]) {
207207
border-radius: var(--mdl-shape-borderRadius-lg);
208208
}
209209

210-
ion-list.core-course-module-list-wrapper,
211210
.list-item-limited-width,
212-
.core-course-module-list-wrapper,
213211
ion-content.limited-width > :not([slot]) {
214212
max-width: var(--list-item-max-width);
215213
margin-left: auto !important;

0 commit comments

Comments
 (0)