Skip to content

Commit 404cbf7

Browse files
dpaloudpalou
authored
Merge pull request #4154 from crazyserver/MOBILE-4636
MOBILE-4636 course: Enclose sections in cards instead of modules
2 parents 7271ee3 + d87dfc9 commit 404cbf7

File tree

16 files changed

+244
-88
lines changed

16 files changed

+244
-88
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/components/infinite-loading/infinite-loading.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,13 @@ export class CoreInfiniteLoadingComponent implements OnChanges {
112112
this.action.emit(() => this.complete());
113113
}
114114

115+
/**
116+
* Fire the infinite scroll load more action if needed.
117+
*/
118+
async fireInfiniteScrollIfNeeded(): Promise<void> {
119+
this.checkScrollDistance();
120+
}
121+
115122
/**
116123
* Complete loading.
117124
*/

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

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,27 @@
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">
13-
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection}" />
13+
<ion-accordion-group [readonly]="true" value="single">
14+
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection, sectionId: 'single'}" />
15+
</ion-accordion-group>
1416
<core-empty-box *ngIf="!selectedSection.hasContent" icon="fas-table-cells-large"
1517
[message]="'core.course.nocontentavailable' | translate" />
1618
</core-dynamic-component>
1719
</div>
1820

1921
<!-- Multiple sections. -->
20-
<div *ngIf="selectedSection && selectedSection.id === allSectionsId">
22+
<div *ngIf="selectedSection && selectedSection.id === allSectionsId" class="multiple-sections list-item-limited-width">
2123
<core-dynamic-component [component]="allSectionsComponent" [data]="data">
22-
<ng-container *ngFor="let section of sections; index as i">
23-
<ng-container *ngIf="i <= lastShownSectionIndex">
24-
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}" />
25-
</ng-container>
26-
</ng-container>
24+
<ion-accordion-group [multiple]="true" (ionChange)="accordionMultipleChange($event.detail)" [value]="accordionMultipleValue"
25+
#accordionMultiple>
26+
@for (section of sections; track section.id) {
27+
@if ($index <= lastShownSectionIndex) {
28+
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section, sectionId: section.id}" />
29+
}
30+
}
31+
</ion-accordion-group>
2732
</core-dynamic-component>
2833

2934
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)" />
@@ -62,12 +67,12 @@
6267
</ion-fab>
6368

6469
<!-- Template to render a section. -->
65-
<ng-template #sectionTemplate let-section="section">
66-
<section *ngIf="!section.hiddenbynumsections && section.id !== allSectionsId && section.id !== stealthModulesSectionId"
70+
<ng-template #sectionTemplate let-section="section" let-sectionId="sectionId">
71+
<ion-accordion *ngIf="!section.hiddenbynumsections && section.id !== allSectionsId && section.id !== stealthModulesSectionId"
6772
class="core-course-module-list-wrapper" [id]="section.id"
68-
[attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null">
69-
<ion-item-divider class="course-section ion-text-wrap" [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
70-
<ion-label>
73+
[attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null" [value]="''+sectionId" toggleIconSlot="start">
74+
<ion-item class="course-section divider" [class.item-dimmed]="section.visible === 0 || section.uservisible === false" slot="header">
75+
<ion-label class="ion-text-wrap">
7176
<h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
7277
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" />
7378
</h2>
@@ -91,19 +96,24 @@ <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
9196
</div>
9297
</ion-label>
9398
<ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
94-
</ion-item-divider>
95-
96-
<ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
97-
<ion-label>
98-
<core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
99-
</ion-label>
10099
</ion-item>
101100

102-
<ng-container *ngFor="let module of section.modules">
103-
<core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
104-
[showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
105-
[isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === module.id" [class.core-course-module-not-viewed]="
106-
!viewedModules[module.id] && (!module.completiondata || module.completiondata.state === completionStatusIncomplete)" />
107-
</ng-container>
108-
</section>
101+
<div slot="content">
102+
<ng-container *ngIf="section.expanded">
103+
<ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
104+
<ion-label>
105+
<core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
106+
</ion-label>
107+
</ion-item>
108+
109+
<ng-container *ngFor="let module of section.modules">
110+
<core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
111+
[showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
112+
[isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === module.id"
113+
[class.core-course-module-not-viewed]="
114+
!viewedModules[module.id] && (!module.completiondata || module.completiondata.state === completionStatusIncomplete)" />
115+
</ng-container>
116+
</ng-container>
117+
</div>
118+
</ion-accordion>
109119
</ng-template>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,26 @@
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.course-section {
29+
--background: transparent;
30+
}
31+
}
32+
33+
.single-section ::ng-deep {
34+
ion-item.divider.course-section {
35+
ion-icon.ion-accordion-toggle-icon {
36+
display: none;
37+
}
38+
}
39+
}

0 commit comments

Comments
 (0)