MOBILE-4636 course: Enclose sections in cards instead of modules

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

@@ -4,7 +4,7 @@ <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
     </ion-label>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
-    <ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper">
+    <ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper list-item-limited-width">
         <ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
             <ion-label>
                 <core-format-text [text]="mainMenuBlock.summary" [component]="component" [componentId]="siteHomeId" contextLevel="course"

src/core/components/infinite-loading/infinite-loading.ts

@@ -112,6 +112,13 @@ export class CoreInfiniteLoadingComponent implements OnChanges {
         this.action.emit(() => this.complete());
     }
 
+    /**
+     * Fire the infinite scroll load more action if needed.
+     */
+    async fireInfiniteScrollIfNeeded(): Promise<void> {
+        this.checkScrollDistance();
+    }
+
     /**
      * Complete loading.
      */

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

@@ -8,22 +8,27 @@
     <core-loading [hideUntil]="loaded">
 
         <!-- Single section. -->
-        <div *ngIf="selectedSection && selectedSection.id !== allSectionsId">
+        <div *ngIf="selectedSection && selectedSection.id !== allSectionsId" class="single-section list-item-limited-width">
             <core-dynamic-component [component]="singleSectionComponent" [data]="data">
-                <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection}" />
+                <ion-accordion-group [readonly]="true" value="single">
+                    <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection, sectionId: 'single'}" />
+                </ion-accordion-group>
                 <core-empty-box *ngIf="!selectedSection.hasContent" icon="fas-table-cells-large"
                     [message]="'core.course.nocontentavailable' | translate" />
             </core-dynamic-component>
         </div>
 
         <!-- Multiple sections. -->
-        <div *ngIf="selectedSection && selectedSection.id === allSectionsId">
+        <div *ngIf="selectedSection && selectedSection.id === allSectionsId" class="multiple-sections list-item-limited-width">
             <core-dynamic-component [component]="allSectionsComponent" [data]="data">
-                <ng-container *ngFor="let section of sections; index as i">
-                    <ng-container *ngIf="i <= lastShownSectionIndex">
-                        <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}" />
-                    </ng-container>
-                </ng-container>
+                <ion-accordion-group [multiple]="true" (ionChange)="accordionMultipleChange($event.detail)" [value]="accordionMultipleValue"
+                    #accordionMultiple>
+                    @for (section of sections; track section.id) {
+                        @if ($index <= lastShownSectionIndex) {
+                            <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section, sectionId: section.id}" />
+                        }
+                    }
+                </ion-accordion-group>
             </core-dynamic-component>
 
             <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)" />
@@ -62,12 +67,12 @@
 </ion-fab>
 
 <!-- Template to render a section. -->
-<ng-template #sectionTemplate let-section="section">
-    <section *ngIf="!section.hiddenbynumsections && section.id !== allSectionsId && section.id !== stealthModulesSectionId"
+<ng-template #sectionTemplate let-section="section" let-sectionId="sectionId">
+    <ion-accordion *ngIf="!section.hiddenbynumsections && section.id !== allSectionsId && section.id !== stealthModulesSectionId"
         class="core-course-module-list-wrapper" [id]="section.id"
-        [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null">
-        <ion-item-divider class="course-section ion-text-wrap" [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
-            <ion-label>
+        [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null" [value]="''+sectionId" toggleIconSlot="start">
+        <ion-item class="course-section divider" [class.item-dimmed]="section.visible === 0 || section.uservisible === false" slot="header">
+            <ion-label class="ion-text-wrap">
                 <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
                     <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" />
                 </h2>
@@ -91,19 +96,24 @@ <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
                 </div>
             </ion-label>
             <ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
-        </ion-item-divider>
-
-        <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
-            <ion-label>
-                <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
-            </ion-label>
         </ion-item>
 
-        <ng-container *ngFor="let module of section.modules">
-            <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
-                [showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
-                [isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === module.id" [class.core-course-module-not-viewed]="
-                    !viewedModules[module.id] && (!module.completiondata || module.completiondata.state === completionStatusIncomplete)" />
-        </ng-container>
-    </section>
+        <div slot="content">
+            <ng-container *ngIf="section.expanded">
+                <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
+                    <ion-label>
+                        <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
+                    </ion-label>
+                </ion-item>
+
+                <ng-container *ngFor="let module of section.modules">
+                    <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
+                        [showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
+                        [isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === module.id"
+                        [class.core-course-module-not-viewed]="
+                            !viewedModules[module.id] && (!module.completiondata || module.completiondata.state === completionStatusIncomplete)" />
+                </ng-container>
+            </ng-container>
+        </div>
+    </ion-accordion>
 </ng-template>

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

@@ -14,3 +14,26 @@
 .course-section {
     --inner-padding-end: 12px;
 }
+
+.multiple-sections .core-course-module-list-wrapper {
+    border: var(--ion-card-border-width) solid var(--ion-card-border-color);
+    border-radius: var(--ion-card-radius);
+    margin: 8px 4px;
+    width: calc(100% - 8px);
+
+    ion-card {
+        --ion-card-background: transparent;
+    }
+
+    ion-item.divider.course-section {
+        --background: transparent;
+    }
+}
+
+.single-section ::ng-deep {
+    ion-item.divider.course-section {
+        ion-icon.ion-accordion-toggle-icon {
+            display: none;
+        }
+    }
+}