Merge pull request #4513 from crazyserver/MOBILE-4842

MOBILE-4842 module: Improve course module border on last child

Author: dpalou

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

@@ -15,11 +15,11 @@ <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
                 </ion-item>
             }
 
-            <ng-container *ngFor="let modOrSubsection of mainMenuBlock.contents">
+            @for (modOrSubsection of mainMenuBlock.contents; track modOrSubsection.id) {
                 @if (isModule(modOrSubsection)) {
                     <core-course-module [module]="modOrSubsection" [section]="mainMenuBlock" />
                 }
-            </ng-container>
+            }
         </ion-list>
     }
 </core-loading>

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

@@ -36,11 +36,6 @@
         --card-padding-bottom: 0px;
     }
 
-    core-course-module:last-child {
-        --activity-border: 0px;
-        --card-padding-bottom: 0px;
-    }
-
     core-course-module:first-child ::ng-deep ion-card {
         margin-top: 0px;
     }

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

@@ -10,6 +10,11 @@
     --activity-border: 1px solid var(--stroke);
     --card-padding-bottom: var(--vertical-spacing);
 
+    &:last-child {
+        --activity-border: 0px;
+        --card-padding-bottom: 0px;
+    }
+
     ion-card {
         margin: var(--vertical-spacing) var(--horizontal-spacing);
         padding: 0px;

src/core/features/course/pages/list-mod-type/list-mod-type.ts

@@ -33,10 +33,6 @@ import { CoreCourseModuleHelper } from '@features/course/services/course-module-
 @Component({
     selector: 'page-core-course-list-mod-type',
     templateUrl: 'list-mod-type.html',
-    styles: `core-course-module:last-child {
-        --activity-border: 0px;
-        --card-padding-bottom: 0px;
-    }`,
     imports: [
         CoreSharedModule,
         CoreCourseModuleComponent,

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

@@ -59,18 +59,18 @@ <h2 class="big" [id]="'core-section-name-' + section.id">
                         </ion-item>
                     }
 
-                    <ng-container *ngFor="let modOrSubsection of section.contents">
+                    @for (modOrSubsection of section.contents; track modOrSubsection.id) {
                         @if (isModule(modOrSubsection)) {
                             <core-course-module [module]="modOrSubsection" [section]="section" />
                         }
-                    </ng-container>
+                    }
                 </section>
             }
 
             <!-- Site home items: news, categories, courses, etc. -->
             @if (items.length > 0) {
 
-                <ng-container *ngFor="let item of items">
+                @for (item of items; track item) {
                     @switch (item) {
                         @case ('LIST_OF_COURSE') {
                             <ng-template *ngTemplateOutlet="allCourseList" />
@@ -88,8 +88,7 @@ <h2 class="big" [id]="'core-section-name-' + section.id">
                             <ng-template *ngTemplateOutlet="news" />
                         }
                     }
-                </ng-container>
-
+                }
             }
         </ion-list>
         @if (hasBlocks) {