From 98fe7224b913c627d29801dfbe40c90eba2911cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Feb 2022 11:42:44 +0100
Subject: [PATCH] MOBILE-3814 styles: Adapt width to home pages

---
 .../myoverview/addon-block-myoverview.html    |  3 +-
 .../components/format/core-course-format.html |  2 +-
 .../course/components/format/format.scss      |  4 -
 .../course/components/module/module.scss      |  2 +-
 .../course-list-item/course-list-item.scss    |  2 +
 .../courses/pages/categories/categories.html  | 87 ++++++++++---------
 .../courses/pages/dashboard/dashboard.html    |  2 +-
 .../courses/pages/dashboard/dashboard.scss    |  0
 .../courses/pages/dashboard/dashboard.ts      |  1 -
 .../features/courses/pages/list/list.html     |  6 +-
 src/core/features/courses/pages/my/my.html    |  2 +-
 src/core/features/courses/pages/my/my.scss    |  4 -
 src/theme/theme.base.scss                     | 23 ++---
 src/theme/theme.light.scss                    |  3 +-
 14 files changed, 68 insertions(+), 73 deletions(-)
 delete mode 100644 src/core/features/courses/pages/dashboard/dashboard.scss

diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index dbdf6d578..92eb69a34 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/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">
diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html
index 1c06ea6c0..92471c075 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/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>
diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss
index e7701472e..8167ba66a 100644
--- a/src/core/features/course/components/format/format.scss
+++ b/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;
diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss
index cce3cd2aa..dc01fae72 100644
--- a/src/core/features/course/components/module/module.scss
+++ b/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);
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index cabfd5a53..24345e414 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/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);
diff --git a/src/core/features/courses/pages/categories/categories.html b/src/core/features/courses/pages/categories/categories.html
index e087575a3..e7c8280b4 100644
--- a/src/core/features/courses/pages/categories/categories.html
+++ b/src/core/features/courses/pages/categories/categories.html
@@ -25,53 +25,56 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="categoriesLoaded">
-        <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>
-                <p class="item-heading">
-                    <core-format-text [text]="currentCategory.name" contextLevel="coursecat" [contextInstanceId]="currentCategory.id">
-                    </core-format-text>
-                </p>
-                <p *ngIf="currentCategory.description">
-                    <core-format-text [text]="currentCategory.description" [maxHeight]="120" contextLevel="coursecat"
-                        [contextInstanceId]="currentCategory.id"></core-format-text>
-                </p>
-            </ion-label>
-        </ion-item>
-
-        <ng-container *ngIf="categories.length > 0">
-            <ion-item-divider>
+        <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>
-                    <h2>{{ 'core.courses.categories' | translate }}</h2>
+                    <p class="item-heading">
+                        <core-format-text [text]="currentCategory.name" contextLevel="coursecat" [contextInstanceId]="currentCategory.id">
+                        </core-format-text>
+                    </p>
+                    <p *ngIf="currentCategory.description">
+                        <core-format-text [text]="currentCategory.description" [maxHeight]="120" contextLevel="coursecat"
+                            [contextInstanceId]="currentCategory.id"></core-format-text>
+                    </p>
                 </ion-label>
-            </ion-item-divider>
-            <section *ngFor="let category of categories">
-                <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-item>
+
+            <ng-container *ngIf="categories.length > 0">
+                <ion-item-divider>
                     <ion-label>
-                        <h2>
-                            <core-format-text [text]="category.name" contextLevel="coursecat" [contextInstanceId]="category.id">
-                            </core-format-text>
-                        </h2>
+                        <h2 class="big">{{ 'core.courses.categories' | translate }}</h2>
                     </ion-label>
-                    <ion-badge slot="end" *ngIf="!showOnlyEnrolled && category.coursecount > 0" color="light">
-                        <span aria-hidden="true">{{ category.coursecount }}</span>
-                        <span class="sr-only">{{ 'core.courses.therearecourses' | translate:{ $a: category.coursecount } }}</span>
-                    </ion-badge>
-                </ion-item>
-            </section>
-        </ng-container>
+                </ion-item-divider>
+                <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-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
+                        <ion-label>
+                            <h2>
+                                <core-format-text [text]="category.name" contextLevel="coursecat" [contextInstanceId]="category.id">
+                                </core-format-text>
+                            </h2>
+                        </ion-label>
+                        <ion-badge slot="end" *ngIf="!showOnlyEnrolled && category.coursecount > 0" color="light">
+                            <span aria-hidden="true">{{ category.coursecount }}</span>
+                            <span class="sr-only">{{ 'core.courses.therearecourses' | translate:{ $a: category.coursecount } }}</span>
+                        </ion-badge>
+                    </ion-item>
+                </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">{{ '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>
+            <ng-container *ngIf="courses.length > 0">
+                <ion-item-divider>
+                    <ion-label>
+                        <h2 *ngIf="!showOnlyEnrolled" class="big">{{ 'core.courses.courses' | 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>
diff --git a/src/core/features/courses/pages/dashboard/dashboard.html b/src/core/features/courses/pages/dashboard/dashboard.html
index e73f8a108..1e9771413 100644
--- a/src/core/features/courses/pages/dashboard/dashboard.html
+++ b/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>
diff --git a/src/core/features/courses/pages/dashboard/dashboard.scss b/src/core/features/courses/pages/dashboard/dashboard.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/core/features/courses/pages/dashboard/dashboard.ts b/src/core/features/courses/pages/dashboard/dashboard.ts
index 24046259f..53234e327 100644
--- a/src/core/features/courses/pages/dashboard/dashboard.ts
+++ b/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 {
 
diff --git a/src/core/features/courses/pages/list/list.html b/src/core/features/courses/pages/list/list.html
index a75e9d3b0..8c138c32e 100644
--- a/src/core/features/courses/pages/list/list.html
+++ b/src/core/features/courses/pages/list/list.html
@@ -37,8 +37,10 @@
             </ion-item-divider>
         </ng-container>
 
-        <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled">
-        </core-courses-course-list-item>
+        <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>
diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
index 9c2d2f6b2..65f89ff10 100644
--- a/src/core/features/courses/pages/my/my.html
+++ b/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. -->
diff --git a/src/core/features/courses/pages/my/my.scss b/src/core/features/courses/pages/my/my.scss
index e7b36a51b..5586e1140 100644
--- a/src/core/features/courses/pages/my/my.scss
+++ b/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;
 }
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 1ca9402af..17af36413 100644
--- a/src/theme/theme.base.scss
+++ b/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,
-    p.item-heading, ion-label p.item-heading {
+    ion-label h2,
+    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);
     }
 }
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index d811e2466..691831088 100644
--- a/src/theme/theme.light.scss
+++ b/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};