MOBILE-3814 module: Add module max-width

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

@@ -4,7 +4,7 @@
     </ion-label>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" [fullscreen]="false">
-    <ng-container *ngIf="mainMenuBlock">
+    <ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper">
         <ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
             <ion-label>
                 <core-format-text [text]="mainMenuBlock.summary" [component]="component" [componentId]="siteHomeId" contextLevel="course"
@@ -13,5 +13,5 @@
         </ion-item>
 
         <core-course-module *ngFor="let module of mainMenuBlock.modules" [module]="module" [section]="mainMenuBlock"></core-course-module>
-    </ng-container>
+    </ion-list>
 </core-loading>

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

@@ -66,9 +66,8 @@
 <!-- Template to render a section. -->
 <ng-template #sectionTemplate let-section="section">
     <section *ngIf="!section.hiddenbynumsections && section.id != allSectionsId && section.id != stealthModulesSectionId"
-        class="section-wrapper" [id]="section.id">
-        <ion-item-divider class="course-section ion-text-wrap" color="light"
-            [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
+        class="core-course-module-list-wrapper" [id]="section.id">
+        <ion-item-divider class="course-section ion-text-wrap" [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
             <ion-label>
                 <h2 *ngIf="section.name">
                     <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">

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

@@ -1,12 +1,16 @@
 @import "~theme/globals";
 
 :host {
+    --horizontal-margin: 12px;
 
-    .item.core-module-main-item {
-        --min-height: 52px;
+    ion-card {
+        margin-left: var(--horizontal-margin);
+        margin-right: var(--horizontal-margin);
     }
 
-    .core-module-main-item {
+    ion-item.core-module-main-item {
+        --min-height: 52px;
+
         .core-module-buttons,
         .buttons.core-module-buttons {
             margin: 0;

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

@@ -16,7 +16,7 @@
         <core-empty-box *ngIf="!sections || !sections.length" icon="fas-box-open" [message]="'core.course.nocontentavailable' | translate">
         </core-empty-box>
 
-        <ion-list>
+        <ion-list class="core-course-module-list-wrapper">
             <ng-container *ngFor="let section of sections">
                 <ng-container *ngFor="let module of section.modules">
                     <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section">

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

@@ -8,7 +8,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="dataLoaded">
-        <ion-list>
+        <ion-list class="core-course-module-list-wrapper">
             <!-- Site home main contents. -->
             <ng-container *ngIf="section && section.hasContent">
                 <ion-item class="ion-text-wrap" *ngIf="section.summary">

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

@@ -15,3 +15,7 @@ core-course-module.core-sitehome-news ::ng-deep ion-card {
     margin: 0;
     padding: 0;
 }
+
+core-spacer ::ng-deep .item {
+    border-radius: var(--medium-radius);
+}

src/theme/theme.base.scss

@@ -736,6 +736,22 @@ ion-card {
     display: inline !important;
 }
 
+ion-list.core-course-module-list-wrapper,
+.core-course-module-list-wrapper {
+    max-width: var(--module-list-width);
+    margin-left: auto;
+    margin-right: auto;
+
+    --padding-start: 12px;
+    --padding-end: 12px;
+    padding-left: var(--padding-start);
+    padding-right: var(--padding-end);
+
+    core-course-module {
+        --horizontal-margin: 0px;
+    }
+}
+
 ion-toolbar h1 img.core-bar-button-image,
 ion-toolbar h1 .core-bar-button-image img {
     padding: 4px;
@@ -1209,8 +1225,15 @@ ion-item.item-input ion-input.has-focus {
     }
 }
 
-ion-item-divider {
+ion-item-divider.item, ion-item.item.divider {
     --inner-padding-end: 8px;
+    background: var(--background);
+    min-height: var(--min-height);
+    border-width: var(--item-divider-border-width);
+    font-size: var(--item-divider-font-size);
+    h2, ion-label h2 {
+        font-size: var(--item-divider-font-size);
+    }
 }
 
 // Change default outline.

src/theme/theme.dark.scss

@@ -77,7 +77,6 @@
 
     --ion-item-background: #{$ion-item-background-dark};
     --ion-item-detail-icon-color: var(--white);
-    --item-divider-background: var(--gray-800);
     --item-divider-color: var(--text-color);
     --spacer-background: var(--gray-100);
 

src/theme/theme.light.scss

@@ -71,6 +71,7 @@
 
     --module-icon-size: 24px;
     --module-icon-radius: var(--medium-radius);
+    --module-list-width: 768px;
 
     --ion-background-color: var(--background-color);
     --ion-background-color-rgb: #{$background-color-rgb};
@@ -221,20 +222,21 @@
     }
 
     --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
-    --item-divider-background: var(--light);
+    --item-divider-background: transparent;
     --item-divider-color: var(--text-color);
+    --item-divider-border-width: 0px;
+    --item-divider-font-size: 20px;
     ion-item-divider, ion-item.divider {
         --background: var(--item-divider-background);
         --color: var(--item-divider-color);
         --min-height: var(--item-divider-min-height);
-        min-height: var(--min-height);
 
         .expandable-status-icon {
             font-size: 18px;
         }
     }
 
-    --spacer-background: var(--item-divider-background);
+    --spacer-background: var(--light);
     core-spacer {
         --item-divider-background: var(--spacer-background);
     }