MOBILE-3814 styles: Adapt width to home pages

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

@@ -73,7 +73,8 @@
 
     <!-- List of courses. -->
     <div class="safe-area-padding" *ngIf="hasCourses">
-        <ion-grid class="ion-no-padding" [class.core-no-grid]="layouts.selected != 'card'">
+        <ion-grid class="ion-no-padding" [class.core-no-grid]="layouts.selected != 'card'"
+            [class.list-item-limited-width]="layouts.selected != 'card'">
             <ion-row class="ion-no-padding">
                 <ion-col *ngFor="let course of filteredCourses" class="ion-no-padding" size="12" size-sm="6" size-md="6" size-lg="4"
                     size-xl="3">

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

@@ -69,7 +69,7 @@
         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">
+                <h2 *ngIf="section.name" class="big">
                     <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">
                     </core-format-text>
                 </h2>

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

@@ -1,7 +1,3 @@
-:host {
-    --item-divider-font-size: var(--item-divider-font-size-big);
-}
-
 .core-course-section-nav-buttons {
     display: flex;
     justify-content: space-between;

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

@@ -1,7 +1,7 @@
 @import "~theme/globals";
 
 :host {
-    --horizontal-margin: 12px;
+    --horizontal-margin: 10px;
 
     ion-card {
         margin-left: var(--horizontal-margin);

src/core/features/courses/components/course-list-item/course-list-item.scss

@@ -101,6 +101,8 @@ ion-chip {
 
 // List layout.
 ion-card.core-course-list-item {
+    max-width: var(--list-item--max-width);
+
     ion-icon.course-icon {
         padding: 12px;
         font-size: calc(var(--avatar-size) - 24px);

src/core/features/courses/pages/categories/categories.html

@@ -25,6 +25,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="categoriesLoaded">
+        <ion-list class="list-item-limited-width">
             <ion-item *ngIf="currentCategory" class="ion-text-wrap">
                 <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
                 <ion-label>
@@ -42,11 +43,12 @@
             <ng-container *ngIf="categories.length > 0">
                 <ion-item-divider>
                     <ion-label>
-                    <h2>{{ 'core.courses.categories' | translate }}</h2>
+                        <h2 class="big">{{ 'core.courses.categories' | translate }}</h2>
                     </ion-label>
                 </ion-item-divider>
-            <section *ngFor="let category of categories">
+                <ion-card *ngFor="let category of categories">
-                <ion-item button class="ion-text-wrap" (click)="openCategory(category.id)" [attr.aria-label]="category.name" detail="true">
+                    <ion-item button class="ion-text-wrap" (click)="openCategory(category.id)" [attr.aria-label]="category.name"
+                        detail="true">
                         <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
                         <ion-label>
                             <h2>
@@ -59,19 +61,20 @@
                             <span class="sr-only">{{ 'core.courses.therearecourses' | translate:{ $a: category.coursecount } }}</span>
                         </ion-badge>
                     </ion-item>
-            </section>
+                </ion-card>
             </ng-container>
 
             <ng-container *ngIf="courses.length > 0">
                 <ion-item-divider>
                     <ion-label>
-                    <h2 *ngIf="!showOnlyEnrolled">{{ 'core.courses.courses' | translate }}</h2>
+                        <h2 *ngIf="!showOnlyEnrolled" class="big">{{ 'core.courses.courses' | translate }}</h2>
-                    <h2 *ngIf="showOnlyEnrolled">{{ 'core.courses.mycourses' | translate }}</h2>
+                        <h2 *ngIf="showOnlyEnrolled" class="big">{{ 'core.courses.mycourses' | translate }}</h2>
                     </ion-label>
                 </ion-item-divider>
                 <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
                 </core-courses-course-list-item>
             </ng-container>
+        </ion-list>
         <core-empty-box *ngIf="!categories.length && !courses.length" icon="fas-graduation-cap"
             [message]="'core.courses.nocoursesyet' | translate">
         </core-empty-box>

src/core/features/courses/pages/dashboard/dashboard.html

@@ -9,7 +9,7 @@
     </ion-refresher>
 
     <core-loading [hideUntil]="loaded">
-        <ion-list>
+        <ion-list class="list-item-limited-width">
             <ng-container *ngFor="let block of blocks">
                 <core-block *ngIf="block.visible" [block]="block" contextLevel="user" [instanceId]="userId"></core-block>
             </ng-container>

src/core/features/courses/pages/dashboard/dashboard.ts

@@ -31,7 +31,6 @@ import { CoreBlockDelegate } from '@features/block/services/block-delegate';
 @Component({
     selector: 'page-core-courses-dashboard',
     templateUrl: 'dashboard.html',
-    styleUrls: ['dashboard.scss'],
 })
 export class CoreCoursesDashboardPage implements OnInit, OnDestroy {
 

src/core/features/courses/pages/list/list.html

@@ -37,8 +37,10 @@
             </ion-item-divider>
         </ng-container>
 
+        <ion-list class="list-item-limited-width">
             <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
             </core-courses-course-list-item>
+        </ion-list>
 
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreCourses($event)" [error]="loadMoreError">
         </core-infinite-loading>

src/core/features/courses/pages/my/my.html

@@ -24,7 +24,7 @@
     <core-loading [hideUntil]="loaded">
         <ion-item class="ion-text-wrap divider">
             <ion-label>
-                <h2>{{ 'core.courses.mycourses' | translate }}</h2>
+                <h2 class="big">{{ 'core.courses.mycourses' | translate }}</h2>
             </ion-label>
             <div slot="end" class="flex-row">
                 <!-- Download all courses. -->

src/core/features/courses/pages/my/my.scss

@@ -1,9 +1,5 @@
 @import "~theme/globals";
 
-:host {
-    --item-divider-font-size: var(--item-divider-font-size-big);
-}
-
 :host ::ng-deep ion-item-divider {
     display: none !important;
 }

src/theme/theme.base.scss

@@ -743,19 +743,11 @@ ion-card {
 }
 
 ion-list.core-course-module-list-wrapper,
+.list-item-limited-width,
 .core-course-module-list-wrapper {
-    max-width: var(--module-list-width);
+    max-width: var(--list-item--max-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,
@@ -1262,12 +1254,15 @@ ion-item.item.divider {
     border-bottom-width: var(--item-divider-border-width);
     --border-width: var(--item-divider-border-width);
     --inner-border-width: 0 0 var(--item-divider-border-width) 0;
-    font-size: var(--item-divider-font-size);
-    font-weight: medium;
 
-    h2, ion-label h2,
+    ion-label h2,
-    p.item-heading, ion-label p.item-heading {
+    ion-label p.item-heading {
         font-size: var(--item-divider-font-size);
+        font-weight: 500;
+        line-height: 1.5;
+    }
+    ion-label h2.big {
+        font-size: var(--item-divider-font-size-big);
     }
 }
 

src/theme/theme.light.scss

@@ -71,7 +71,8 @@
 
     --module-icon-size: 24px;
     --module-icon-radius: var(--medium-radius);
-    --module-list-width: 768px;
+
+    --list-item--max-width: 768px;
 
     --ion-background-color: var(--background-color);
     --ion-background-color-rgb: #{$background-color-rgb};