From 59b1d37f8b5c729829295af5ebf988e0df39a0ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Feb 2022 13:41:20 +0100
Subject: [PATCH 01/14] MOBILE-3814 module: Add module max-width

---
 .../addon-block-sitemainmenu.html             |  4 +--
 .../components/format/core-course-format.html |  5 ++--
 .../course/components/module/module.scss      | 10 +++++---
 .../pages/list-mod-type/list-mod-type.html    |  2 +-
 .../features/sitehome/pages/index/index.html  |  2 +-
 .../features/sitehome/pages/index/index.scss  |  4 +++
 src/theme/theme.base.scss                     | 25 ++++++++++++++++++-
 src/theme/theme.dark.scss                     |  1 -
 src/theme/theme.light.scss                    |  8 +++---
 9 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
index 3ce510a26..fa38b0bc3 100644
--- a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
+++ b/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>
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 0a3185058..e994ed9ec 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/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">
diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss
index faf96e525..9048f93d7 100644
--- a/src/core/features/course/components/module/module.scss
+++ b/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;
diff --git a/src/core/features/course/pages/list-mod-type/list-mod-type.html b/src/core/features/course/pages/list-mod-type/list-mod-type.html
index d0cf3b7d1..edf62be15 100644
--- a/src/core/features/course/pages/list-mod-type/list-mod-type.html
+++ b/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">
diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index 45bd97c06..a2f064248 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/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">
diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss
index 7a2bbde1d..6193c059a 100644
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/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);
+}
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 0143bf8b3..1a92c7795 100644
--- a/src/theme/theme.base.scss
+++ b/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.
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 0f512966d..6e88cfc14 100644
--- a/src/theme/theme.dark.scss
+++ b/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);
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 71697c5f6..61b52c0f7 100644
--- a/src/theme/theme.light.scss
+++ b/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);
     }

From 926f2508d127c1cb51c2f569babb5a68ccc11357 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Feb 2022 22:43:09 +0100
Subject: [PATCH 02/14] MOBILE-3814 module: Add completion basic mode to use it
 bellow title

---
 .../core-course-module-completion.html        |  81 ++++++++-----
 .../module-completion/module-completion.ts    |  18 ++-
 .../core-course-module-manual-completion.html |  35 +++---
 .../module-manual-completion.ts               |   7 +-
 .../components/module/core-course-module.html |  26 ++--
 .../course/components/module/module.scss      |   4 -
 .../course/components/module/module.ts        |  13 +-
 src/core/features/course/services/course.ts   |   5 +
 src/theme/theme.base.scss                     | 114 ++++++++++--------
 9 files changed, 169 insertions(+), 134 deletions(-)

diff --git a/src/core/features/course/components/module-completion/core-course-module-completion.html b/src/core/features/course/components/module-completion/core-course-module-completion.html
index a96265860..d449ff532 100644
--- a/src/core/features/course/components/module-completion/core-course-module-completion.html
+++ b/src/core/features/course/components/module-completion/core-course-module-completion.html
@@ -1,38 +1,63 @@
-<div *ngIf="showCompletionConditions && completion && completion.isautomatic" class="core-module-automatic-completion-conditions"
-    role="list" [attr.aria-label]="'core.course.completionrequirements' | translate:{ $a: moduleName }">
+<ng-container *ngIf="completion">
+    <ng-container *ngIf="showCompletionConditions && completion.isautomatic">
+        <div *ngIf="mode == 'full'" class="core-module-automatic-completion-conditions" role="list"
+            [attr.aria-label]="'core.course.completionrequirements' | translate:{ $a: moduleName }">
 
-    <ng-container *ngIf="completion.istrackeduser">
-        <ng-container *ngFor="let rule of details">
-            <ion-chip *ngIf="rule.statuscomplete" color="success" role="listitem" [attr.aria-label]="rule.accessibleDescription">
-                <ion-icon name="fas-check" aria-hidden="true"></ion-icon>
-                <ion-label><strong>{{ 'core.course.completion_automatic:done' | translate }}</strong> {{ rule.rulevalue.description }}
-                </ion-label>
-            </ion-chip>
+            <ng-container *ngIf="completion.istrackeduser">
+                <ng-container *ngFor="let rule of details">
+                    <ion-chip *ngIf="rule.statuscomplete" color="success" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                        <ion-icon name="fas-check" [attr.aria-label]="'core.course.completion_automatic:done' | translate "></ion-icon>
+                        <ion-label>
+                            {{ rule.rulevalue.description }}
+                        </ion-label>
+                    </ion-chip>
 
-            <ion-chip *ngIf="rule.statuscompletefail" color="danger" role="listitem" [attr.aria-label]="rule.accessibleDescription">
-                <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
-                <ion-label><strong>{{ 'core.course.completion_automatic:failed' | translate }}</strong> {{ rule.rulevalue.description }}
-                </ion-label>
-            </ion-chip>
+                    <ion-chip *ngIf="rule.statuscompletefail" color="danger" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                        <ion-icon name="fas-times" [attr.aria-label]="'core.course.completion_automatic:failed' | translate "></ion-icon>
+                        <ion-label>
+                            {{ rule.rulevalue.description }}
+                        </ion-label>
+                    </ion-chip>
 
-            <ion-chip *ngIf="rule.statusincomplete" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                    <ion-chip *ngIf="rule.statusincomplete" color="dark" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                        <ion-icon name="fas-edit" [attr.aria-label]="'core.course.completion_automatic:todo' | translate "></ion-icon>
+                        <ion-label>
+                            {{ rule.rulevalue.description }}
+                        </ion-label>
+                    </ion-chip>
+                </ng-container>
+            </ng-container>
+
+            <ng-container *ngIf="!completion.istrackeduser">
+                <ion-chip *ngFor="let rule of details" role="listitem">
+                    <ion-icon name="fas-edit" [attr.aria-label]="'core.course.completion_automatic:todo' | translate "></ion-icon>
+                    <ion-label>
+                        {{ rule.rulevalue.description }}
+                    </ion-label>
+                </ion-chip>
+            </ng-container>
+        </div>
+
+        <ng-container *ngIf="mode == 'basic' && completion.istrackeduser">
+            <ion-chip class="completioninfo completion_incomplete" *ngIf="completionStatus === 0" color="dark">
                 <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
-                <ion-label><strong>{{ 'core.course.completion_automatic:todo' | translate }}</strong> {{ rule.rulevalue.description }}
+                <ion-label>
+                    {{ 'core.course.todo' | translate }}
                 </ion-label>
             </ion-chip>
+            <ion-chip class="completioninfo completion_complete" *ngIf="completionStatus === 1 || completionStatus === 2" color="success">
+                <ion-icon name="fas-check" aria-hidden="true"></ion-icon>
+                <ion-label>{{'core.course.done' | translate }}</ion-label>
+            </ion-chip>
+            <ion-chip class="completioninfo completion_fail" *ngIf="completionStatus === 3" color="danger">
+                <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
+                <ion-label>{{'core.course.failed' | translate }}</ion-label>
+            </ion-chip>
         </ng-container>
     </ng-container>
 
-    <ng-container *ngIf="!completion.istrackeduser">
-        <ion-chip *ngFor="let rule of details" role="listitem">
-            <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
-            <ion-label>
-                <strong>{{ 'core.course.completion_automatic:todo' | translate }}</strong> {{ rule.rulevalue.description }}
-            </ion-label>
-        </ion-chip>
-    </ng-container>
-</div>
 
-<core-course-module-manual-completion *ngIf="showManualCompletion" [completion]="completion" [moduleName]="moduleName"
-    (completionChanged)="completionChanged.emit($event)">
-</core-course-module-manual-completion>
+    <core-course-module-manual-completion *ngIf="showManualCompletion" [completion]="completion" [moduleName]="moduleName"
+        (completionChanged)="completionChanged.emit($event)" [mode]="mode">
+    </core-course-module-manual-completion>
+</ng-container>
diff --git a/src/core/features/course/components/module-completion/module-completion.ts b/src/core/features/course/components/module-completion/module-completion.ts
index 33fab2dd5..060cdd7dd 100644
--- a/src/core/features/course/components/module-completion/module-completion.ts
+++ b/src/core/features/course/components/module-completion/module-completion.ts
@@ -15,7 +15,12 @@
 import { Component, Input } from '@angular/core';
 
 import { CoreCourseModuleCompletionBaseComponent } from '@features/course/classes/module-completion';
-import { CoreCourseModuleCompletionStatus, CoreCourseModuleWSRuleDetails } from '@features/course/services/course';
+import {
+    CoreCourseCompletionMode,
+    CoreCourseModuleCompletionStatus,
+    CoreCourseModuleCompletionTracking,
+    CoreCourseModuleWSRuleDetails,
+} from '@features/course/services/course';
 import { CoreUser } from '@features/user/services/user';
 import { Translate } from '@singletons';
 
@@ -37,9 +42,11 @@ export class CoreCourseModuleCompletionComponent extends CoreCourseModuleComplet
 
     @Input() showCompletionConditions = false; // Whether to show activity completion conditions.
     @Input() showManualCompletion = false; // Whether to show manual completion.
+    @Input() mode: CoreCourseCompletionMode = CoreCourseCompletionMode.FULL; // Show full completion status or a basic mode.
 
     details?: CompletionRule[];
     accessibleDescription: string | null = null;
+    completionStatus?: CoreCourseModuleCompletionStatus;
 
     /**
      * @inheritdoc
@@ -49,6 +56,11 @@ export class CoreCourseModuleCompletionComponent extends CoreCourseModuleComplet
             return;
         }
 
+        this.completionStatus = !this.completion?.istrackeduser ||
+            this.completion.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE
+            ? undefined
+            : this.completion.state;
+
         // Format rules.
         this.details = await Promise.all(this.completion.details.map(async (rule: CompletionRule) => {
             rule.statuscomplete = rule.rulevalue.status == CoreCourseModuleCompletionStatus.COMPLETION_COMPLETE ||
@@ -57,8 +69,8 @@ export class CoreCourseModuleCompletionComponent extends CoreCourseModuleComplet
             rule.statusincomplete = rule.rulevalue.status == CoreCourseModuleCompletionStatus.COMPLETION_INCOMPLETE;
             rule.accessibleDescription = null;
 
-            if (this.completion!.overrideby) {
-                const fullName = await CoreUser.getUserFullNameWithDefault(this.completion!.overrideby, this.completion!.courseId);
+            if (this.completion?.overrideby) {
+                const fullName = await CoreUser.getUserFullNameWithDefault(this.completion.overrideby, this.completion.courseId);
 
                 const setByData = {
                     $a: {
diff --git a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
index 1720a23d8..50910193b 100644
--- a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
+++ b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
@@ -1,24 +1,19 @@
-<div *ngIf="completion && !completion.isautomatic" class="core-module-manual-completion">
-
+<ng-container *ngIf="completion && !completion.isautomatic">
     <ng-container *ngIf="completion.istrackeduser">
-        <ng-container *ngIf="completion.state">
-            <ion-button color="success" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
-                class="ion-text-wrap">
-                <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
-                {{ 'core.course.completion_manual:done' | translate }}
-            </ion-button>
-        </ng-container>
-        <ng-container *ngIf="!completion.state">
-            <ion-button color="dark" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
-                class="ion-text-wrap">
-                {{ 'core.course.completion_manual:markdone' | translate }}
-            </ion-button>
-        </ng-container>
-    </ng-container>
-
-    <ng-container *ngIf="!completion.istrackeduser">
-        <ion-button disabled="true" color="dark" fill="outline" class="ion-text-wrap">
+        <ion-button *ngIf="completion.state" color="success" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
+            class="ion-text-wrap" [class.chip]="mode == 'basic'">
+            <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
+            {{ 'core.course.completion_manual:done' | translate }}
+        </ion-button>
+        <ion-button *ngIf="!completion.state" color="dark" fill="outline" [attr.aria-label]="accessibleDescription"
+            (click)="completionClicked($event)" class="ion-text-wrap" [class.chip]="mode == 'basic'">
             {{ 'core.course.completion_manual:markdone' | translate }}
         </ion-button>
     </ng-container>
-</div>
+
+    <ng-container *ngIf="!completion.istrackeduser">
+        <ion-button disabled="true" color="dark" fill="outline" class="ion-text-wrap" [class.chip]="mode == 'basic'">
+            {{ 'core.course.completion_manual:markdone' | translate }}
+        </ion-button>
+    </ng-container>
+</ng-container>
diff --git a/src/core/features/course/components/module-manual-completion/module-manual-completion.ts b/src/core/features/course/components/module-manual-completion/module-manual-completion.ts
index 6a21680b7..f2468cdab 100644
--- a/src/core/features/course/components/module-manual-completion/module-manual-completion.ts
+++ b/src/core/features/course/components/module-manual-completion/module-manual-completion.ts
@@ -13,8 +13,7 @@
 // limitations under the License.
 
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChange } from '@angular/core';
-import { CoreCourseCompletionType } from '@features/course/services/course';
-
+import { CoreCourseCompletionMode, CoreCourseCompletionType } from '@features/course/services/course';
 import { CoreCourseHelper, CoreCourseModuleCompletionData } from '@features/course/services/course-helper';
 import { CoreUser } from '@features/user/services/user';
 import { Translate } from '@singletons';
@@ -31,6 +30,7 @@ export class CoreCourseModuleManualCompletionComponent implements OnInit, OnChan
 
     @Input() completion?: CoreCourseModuleCompletionData; // The completion status.
     @Input() moduleName?: string; // The name of the module this completion affects.
+    @Input() mode: CoreCourseCompletionMode = CoreCourseCompletionMode.FULL; // Show full completion status or a basic mode.
     @Output() completionChanged = new EventEmitter<CoreCourseModuleCompletionData>(); // Notify when completion changes.
 
     accessibleDescription: string | null = null;
@@ -97,6 +97,9 @@ export class CoreCourseModuleManualCompletionComponent implements OnInit, OnChan
             return;
         }
 
+        event.stopPropagation();
+        event.preventDefault();
+
         await CoreCourseHelper.changeManualCompletion(this.completion, event);
 
         // @deprecated MANUAL_COMPLETION_CHANGED is deprecated since 4.0 use COMPLETION_CHANGED instead.
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index 5a85d4f1d..2b137539d 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -18,21 +18,12 @@
                         [courseId]="module.course" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
                     </core-format-text>
                 </p>
-                <ion-chip class="completioninfo completion_incomplete" *ngIf="completionStatus === 0">
-                    <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
-                    <ion-label>
-                        {{ 'core.course.todo' | translate }}
-                    </ion-label>
-                </ion-chip>
-                <ion-chip class="completioninfo completion_complete" *ngIf="completionStatus === 1 || completionStatus === 2"
-                    color="success">
-                    <ion-icon name="fas-check" aria-hidden="true"></ion-icon>
-                    <ion-label>{{'core.course.done' | translate }}</ion-label>
-                </ion-chip>
-                <ion-chip class="completioninfo completion_fail" *ngIf="completionStatus === 3" color="danger">
-                    <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
-                    <ion-label>{{'core.course.failed' | translate }}</ion-label>
-                </ion-chip>
+
+                <!-- Basic module completion. -->
+                <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
+                    [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
+                    [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)" mode="basic">
+                </core-course-module-completion>
 
                 <ion-chip *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
                     class="ion-text-wrap ion-text-start" [outline]="true">
@@ -76,10 +67,9 @@
                     </p>
                 </div>
 
-                <!-- Module completion. -->
+                <!-- Module completion. Only auto conditions-->
                 <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
-                    [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
-                    [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)">
+                    [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
                 </core-course-module-completion>
 
                 <div *ngIf="module.completiondata?.offline">
diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss
index 9048f93d7..cce3cd2aa 100644
--- a/src/core/features/course/components/module/module.scss
+++ b/src/core/features/course/components/module/module.scss
@@ -38,10 +38,6 @@
     }
 
     .core-course-module-info {
-        ion-badge {
-            text-align: start;
-        }
-
         .core-module-availabilityinfo {
             font-size: 90%;
             ul {
diff --git a/src/core/features/course/components/module/module.ts b/src/core/features/course/components/module/module.ts
index fa25f2e50..d3964f732 100644
--- a/src/core/features/course/components/module/module.ts
+++ b/src/core/features/course/components/module/module.ts
@@ -20,7 +20,7 @@ import {
     CoreCourseModuleCompletionData,
     CoreCourseSection,
 } from '@features/course/services/course-helper';
-import { CoreCourse, CoreCourseModuleCompletionStatus, CoreCourseModuleCompletionTracking } from '@features/course/services/course';
+import { CoreCourse } from '@features/course/services/course';
 import { CoreCourseModuleDelegate, CoreCourseModuleHandlerButton } from '@features/course/services/module-delegate';
 
 /**
@@ -47,7 +47,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
     hasInfo = false;
     showLegacyCompletion = false; // Whether to show module completion in the old format.
     showManualCompletion = false; // Whether to show manual completion when completion conditions are disabled.
-    completionStatus?: CoreCourseModuleCompletionStatus;
 
     /**
      * Component being initialized.
@@ -62,19 +61,11 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
         }
 
         this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title;
-        this.completionStatus = this.module.completiondata === undefined  ||
-                !this.module.completiondata?.istrackeduser ||
-                this.module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE
-            ? undefined
-            : this.module.completiondata.state;
 
         this.hasInfo = !!(
             this.module.description ||
             (this.showActivityDates && this.module.dates && this.module.dates.length) ||
-            (this.module.completiondata &&
-                ((this.showManualCompletion && !this.module.completiondata.isautomatic) ||
-                    (this.showCompletionConditions && this.module.completiondata.isautomatic))
-            ) ||
+            (this.module.completiondata && this.showCompletionConditions && this.module.completiondata.isautomatic) ||
             this.module.completiondata?.offline ||
             (this.module.visible === 0 && (!this.section || this.section.visible)) ||
             (this.module.visible !== 0 && this.module.isStealth) ||
diff --git a/src/core/features/course/services/course.ts b/src/core/features/course/services/course.ts
index fa30f2991..565198a71 100644
--- a/src/core/features/course/services/course.ts
+++ b/src/core/features/course/services/course.ts
@@ -76,6 +76,11 @@ export enum CoreCourseCompletionType {
     AUTO = 1,
 }
 
+export enum CoreCourseCompletionMode {
+    FULL = 'full',
+    BASIC = 'basic',
+}
+
 /**
  * Completion tracking valid values.
  */
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 1a92c7795..0100acc6b 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -184,44 +184,6 @@ ion-app.ios ion-header ion-title {
     white-space: normal !important;
 }
 
-ion-button core-format-text .core-format-text-content {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    line-height: 1.2;
-}
-
-ion-button > * {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-ion-button.ion-text-wrap {
-    white-space: normal;
-    core-format-text .core-format-text-content {
-        white-space: normal;
-        display: contents;
-    }
-
-    & > * {
-        white-space: normal;
-    }
-}
-
-ion-button.button-outline {
-    --background: var(--contrast-background);
-}
-
-ion-button ion-spinner {
-    --color: inherit !important;
-}
-
-ion-button:not(.button-has-icon-only) > ion-icon {
-    min-width: 20px;
-}
-
 @each $color-name, $unused in $colors {
     .text-#{$color-name},
     p.text-#{$color-name} {
@@ -293,10 +255,6 @@ ion-icon {
     }
 }
 
-ion-button.button-small ion-icon.faicon[slot] {
-    font-size: 1.5em !important;
-}
-
 // Buttons.
 ion-button,
 ion-fab-button,
@@ -306,10 +264,58 @@ button,
     min-width: var(--a11y-min-target-size);
 }
 
+ion-button.button-outline {
+    --border-width: 1px;
+    --background: var(--contrast-background);
+}
+
+ion-button.button-solid {
+    --box-shadow: none;
+}
+
+ion-button core-format-text .core-format-text-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    line-height: 1.2;
+}
+
+ion-button > * {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+ion-button.ion-text-wrap {
+    white-space: normal;
+    core-format-text .core-format-text-content {
+        white-space: normal;
+        display: contents;
+    }
+
+    & > * {
+        white-space: normal;
+    }
+}
+
+ion-button ion-spinner {
+    --color: inherit !important;
+}
+
+ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon {
+    min-width: 20px;
+}
+
 ion-button.button.button-clear.button-has-icon-only {
     --border-radius: var(--huge-radius);
 }
 
+ion-button.button.button-solid,
+ion-button.button.button-outline {
+    --border-radius: var(--small-radius);
+}
+
 // Clear buttons will be black.
 ion-button.button-clear {
     --primary: var(--primary);
@@ -877,12 +883,14 @@ ion-badge {
     border-radius: var(--big-radius);
 }
 
-ion-chip {
+ion-chip,
+ion-button.chip {
     line-height: 1.1;
     font-size: 12px;
-    padding: 4px 8px;
     min-height: 24px;
-    height: auto;
+    text-transform: none;
+    margin: 4px;
+    font-weight: normal;
 
     ion-icon {
         font-size: 16px;
@@ -890,6 +898,18 @@ ion-chip {
         @include margin(0, 8px, 0, 0);
     }
 
+    ion-label {
+        white-space: normal !important;
+    }
+}
+
+ion-chip {
+    line-height: 1.1;
+    font-size: 12px;
+    padding: 4px 8px;
+    min-height: 24px;
+    height: auto;
+
     &.ion-color {
         background: var(--ion-color-tint);
         &.chip-outline {
@@ -899,9 +919,7 @@ ion-chip {
         }
     }
 
-    ion-label {
-        white-space: normal !important;
-    }
+
 }
 
 ion-searchbar {

From 61a7d5d59f4cfd9a24c5009c8af6328cc2c02c79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Feb 2022 16:53:09 +0100
Subject: [PATCH 03/14] MOBILE-3814 module: Re-order course module card info

---
 .../components/format/core-course-format.html | 14 +++----
 .../core-course-module-manual-completion.html |  4 ++
 .../components/module/core-course-module.html | 41 +++++++------------
 .../course/components/module/module.ts        |  1 -
 .../pages/module-preview/module-preview.html  | 34 +++++++--------
 5 files changed, 42 insertions(+), 52 deletions(-)

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 e994ed9ec..a3aab99bf 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -74,16 +74,14 @@
                     </core-format-text>
                 </h2>
                 <div *ngIf="section.visible === 0 && section.uservisible !== false">
-                    <ion-chip>
-                        <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
-                    </ion-chip>
+                    <ion-badge color="warning">
+                        {{ 'core.course.hiddenfromstudents' | translate }}
+                    </ion-badge>
                 </div>
                 <div *ngIf="section.visible === 0 && section.uservisible === false">
-                    <ion-chip>
-                        <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.notavailable' | translate }}</ion-label>
-                    </ion-chip>
+                    <ion-badge color="warning">
+                        {{ 'core.notavailable' | translate }}
+                    </ion-badge>
                 </div>
                 <div *ngIf="section.availabilityinfo">
                     <ion-chip>
diff --git a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
index 50910193b..7da05d7ee 100644
--- a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
+++ b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
@@ -4,10 +4,14 @@
             class="ion-text-wrap" [class.chip]="mode == 'basic'">
             <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
             {{ 'core.course.completion_manual:done' | translate }}
+            <ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
+                slot="end"></ion-icon>
         </ion-button>
         <ion-button *ngIf="!completion.state" color="dark" fill="outline" [attr.aria-label]="accessibleDescription"
             (click)="completionClicked($event)" class="ion-text-wrap" [class.chip]="mode == 'basic'">
             {{ 'core.course.completion_manual:markdone' | translate }}
+            <ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
+                slot="end"></ion-icon>
         </ion-button>
     </ng-container>
 
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index 2b137539d..c057e42c0 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -29,6 +29,14 @@
                     class="ion-text-wrap ion-text-start" [outline]="true">
                     <ion-label><span [innerHTML]="module.handlerData.extraBadge"></span></ion-label>
                 </ion-chip>
+
+                <!-- Hidden badges -->
+                <ion-badge color="warning" *ngIf="module.visible === 0 && (!section || section.visible)">
+                    {{ 'core.course.hiddenfromstudents' | translate }}
+                </ion-badge>
+                <ion-badge color="warning" *ngIf="module.visible !== 0 && module.isStealth">
+                    {{ 'core.course.hiddenoncoursepage' | translate }}
+                </ion-badge>
             </ion-label>
             <!-- Buttons. -->
             <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
@@ -59,6 +67,11 @@
                     contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
                 </core-format-text>
 
+                <!-- Module completion. Only auto conditions-->
+                <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
+                    [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
+                </core-course-module-completion>
+
                 <!-- Activity dates. -->
                 <div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
                     <p *ngFor="let date of module.dates">
@@ -67,33 +80,7 @@
                     </p>
                 </div>
 
-                <!-- Module completion. Only auto conditions-->
-                <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
-                    [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
-                </core-course-module-completion>
-
-                <div *ngIf="module.completiondata?.offline">
-                    <ion-chip color="warning">
-                        <ion-icon name="fas-sync" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
-                    </ion-chip>
-                </div>
-
-                <!-- Availability -->
-                <div *ngIf="module.visible === 0 && (!section || section.visible)">
-                    <ion-chip>
-                        <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
-                    </ion-chip>
-                </div>
-
-                <div *ngIf="module.visible !== 0 && module.isStealth">
-                    <ion-chip>
-                        <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                        <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
-                    </ion-chip>
-                </div>
-
+                <!-- Availability info -->
                 <div *ngIf="module.availabilityinfo">
                     <ion-chip class="core-module-availabilityinfo">
                         <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
diff --git a/src/core/features/course/components/module/module.ts b/src/core/features/course/components/module/module.ts
index d3964f732..0761f2ad6 100644
--- a/src/core/features/course/components/module/module.ts
+++ b/src/core/features/course/components/module/module.ts
@@ -66,7 +66,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
             this.module.description ||
             (this.showActivityDates && this.module.dates && this.module.dates.length) ||
             (this.module.completiondata && this.showCompletionConditions && this.module.completiondata.isautomatic) ||
-            this.module.completiondata?.offline ||
             (this.module.visible === 0 && (!this.section || this.section.visible)) ||
             (this.module.visible !== 0 && this.module.isStealth) ||
             (this.module.availabilityinfo)
diff --git a/src/core/features/course/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index bd5b02506..f302e2299 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -28,33 +28,35 @@
             [componentId]="module.id" [expandDescription]="true">
 
             <div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
-                <ion-chip class="ion-text-wrap ion-text-start" [color]="module.handlerData?.extraBadgeColor">
+                <ion-chip *ngIf="module.handlerData?.extraBadge" [color]="module.handlerData?.extraBadgeColor"
+                    class="ion-text-wrap ion-text-start" [outline]="true">
                     <ion-label><span [innerHTML]="module.handlerData?.extraBadge"></span></ion-label>
                 </ion-chip>
             </div>
-            <div class="ion-padding" *ngIf="module.visible === 0 && (!section || section.visible)">
-                <ion-chip class="ion-text-wrap">
+
+            <!-- Hidden badges -->
+            <div *ngIf="module.visible === 0 && (!section || section.visible)">
+                <ion-chip color="warning">
                     <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
                     <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
                 </ion-chip>
             </div>
-            <div class="ion-padding" *ngIf="module.visible !== 0 && module.isStealth">
-                <ion-chip class="ion-text-wrap">
+            <div *ngIf="module.visible !== 0 && module.isStealth">
+                <ion-chip color="warning">
                     <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
                     <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
                 </ion-chip>
             </div>
-            <div class="ion-padding core-module-availabilityinfo" *ngIf="module.availabilityinfo">
-                <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-                <ion-label>
-                    <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
-                        [courseId]="courseId" class="ion-text-wrap">
-                    </core-format-text>
-                </ion-label>
-            </div>
-            <div class="ion-padding" *ngIf="module.completiondata?.offline">
-                <ion-chip color="warning" class="ion-text-wrap">
-                    <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
+
+            <!-- Availability info -->
+            <div *ngIf="module.availabilityinfo">
+                <ion-chip class="core-module-availabilityinfo">
+                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                    <ion-label>
+                        <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
+                            [courseId]="module.course">
+                        </core-format-text>
+                    </ion-label>
                 </ion-chip>
             </div>
 

From e403d2c3ba49effbbf42f7e058b8e3731c42dbc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Feb 2022 17:49:24 +0100
Subject: [PATCH 04/14] MOBILE-3814 module: Implement a new collapsible item
 directive

---
 src/core/directives/collapsible-item.ts       | 187 ++++++++++++++++++
 src/core/directives/directives.module.ts      |   3 +
 .../components/course-index/course-index.html |   8 +-
 .../components/module/core-course-module.html |   4 +-
 src/theme/theme.base.scss                     |  88 ++++++++-
 src/theme/theme.light.scss                    |   2 +-
 6 files changed, 280 insertions(+), 12 deletions(-)
 create mode 100644 src/core/directives/collapsible-item.ts

diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts
new file mode 100644
index 000000000..c7f069354
--- /dev/null
+++ b/src/core/directives/collapsible-item.ts
@@ -0,0 +1,187 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Directive, ElementRef, Input, OnInit } from '@angular/core';
+import { CoreDomUtils } from '@services/utils/dom';
+import { Translate } from '@singletons';
+import { CoreEventLoadingChangedData, CoreEventObserver, CoreEvents } from '@singletons/events';
+
+const defaultMaxHeight = 56;
+const buttonHeight = 44;
+
+/**
+ * Directive to make an element collapsible.
+ *
+ * Example usage:
+ *
+ * <div collapsible-item>
+ */
+@Directive({
+    selector: '[collapsible-item]',
+})
+export class CoreCollapsibleItemDirective implements OnInit {
+
+    /**
+     * Max height in pixels to render the content box. It should be 56 at least to make sense.
+     * Using this parameter will force display: block to calculate height better.
+     * If you want to avoid this use class="inline" at the same time to use display: inline-block.
+     */
+    @Input('collapsible-item') height: number | string = defaultMaxHeight;
+
+    protected element: HTMLElement;
+    protected toggleExpandEnabled = false;
+    protected expanded = false;
+    protected maxHeight = defaultMaxHeight;
+    protected loadingChangedListener?: CoreEventObserver;
+
+    constructor(el: ElementRef<HTMLElement>) {
+        this.element = el.nativeElement;
+
+        this.element.addEventListener('click', this.elementClicked.bind(this));
+    }
+
+    /**
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        if (typeof this.height === 'string') {
+            this.maxHeight = this.height === ''
+                ? defaultMaxHeight
+                : parseInt(this.height, 10);
+        } else {
+            this.maxHeight = this.height;
+        }
+        this.maxHeight = this.maxHeight < defaultMaxHeight ? defaultMaxHeight : this.maxHeight;
+
+        if (!this.maxHeight || (window.innerWidth > 576 && window.innerHeight > 576)) {
+            // Do not collapse on big screens.
+            return;
+        }
+
+        // Calculate the height now.
+        this.calculateHeight();
+        setTimeout(() => this.calculateHeight(), 200); // Try again, sometimes the first calculation is wrong.
+
+        this.setExpandButtonEnabled(false);
+
+        // Recalculate the height if a parent core-loading displays the content.
+        this.loadingChangedListener =
+            CoreEvents.on(CoreEvents.CORE_LOADING_CHANGED, (data: CoreEventLoadingChangedData) => {
+                if (data.loaded && CoreDomUtils.closest(this.element.parentElement, '#' + data.uniqueId)) {
+                    // The format-text is inside the loading, re-calculate the height.
+                    this.calculateHeight();
+                    setTimeout(() => this.calculateHeight(), 200);
+                }
+            });
+    }
+
+    /**
+     * Calculate the height and check if we need to display show more or not.
+     */
+    protected calculateHeight(): void {
+        // @todo: Work on calculate this height better.
+        if (!this.maxHeight) {
+            return;
+        }
+
+        // Remove max-height (if any) to calculate the real height.
+        const initialMaxHeight = this.element.style.maxHeight;
+        this.element.style.maxHeight = '';
+
+        const height = CoreDomUtils.getElementHeight(this.element) || 0;
+
+        // Restore the max height now.
+        this.element.style.maxHeight = initialMaxHeight;
+
+        // If cannot calculate height, shorten always.
+        this.setExpandButtonEnabled(!height || height > this.maxHeight);
+    }
+
+    /**
+     * Sets if expand button is enabled or not.
+     *
+     * @param enable Wether enable or disable.
+     */
+    protected setExpandButtonEnabled(enable: boolean): void {
+        this.toggleExpandEnabled = enable;
+        this.element.classList.toggle('collapsible-enabled', enable);
+
+        if (!enable || this.element.querySelector('ion-button.collapsible-toggle'))  {
+            return;
+        }
+
+        // Add expand/collapse buttons
+        const toggleButton = document.createElement('ion-button');
+        toggleButton.classList.add('collapsible-toggle');
+        toggleButton.setAttribute('fill', 'clear');
+
+        const toggleText = document.createElement('span');
+        toggleText.classList.add('collapsible-toggle-text');
+        toggleButton.appendChild(toggleText);
+
+        const expandArrow = document.createElement('span');
+        expandArrow.classList.add('collapsible-toggle-arrow');
+        toggleButton.appendChild(expandArrow);
+
+        this.element.appendChild(toggleButton);
+
+        this.toggleExpand(this.expanded);
+    }
+
+    /**
+     * Expand or collapse text.
+     *
+     * @param expand Wether expand or collapse text. If undefined, will toggle.
+     */
+    protected toggleExpand(expand?: boolean): void {
+        if (expand === undefined) {
+            expand = !this.expanded;
+        }
+        this.expanded = expand;
+        this.element.classList.toggle('collapsible-expanded', expand);
+        this.element.classList.toggle('collapsible-collapsed', !expand);
+        this.element.style.maxHeight = expand ? '' : (this.maxHeight + buttonHeight) + 'px';
+
+        const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
+        const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');
+        if (!toggleButton || !toggleText) {
+            return;
+        }
+        toggleText.innerHTML = expand ? Translate.instant('core.showless') : Translate.instant('core.showmore');
+        toggleButton.setAttribute('aria-expanded', expand ? 'true' : 'false');
+    }
+
+    /**
+     * Listener to call when the element is clicked.
+     *
+     * @param e Click event.
+     */
+    protected elementClicked(e: MouseEvent): void {
+        if (e.defaultPrevented) {
+            // Ignore it if the event was prevented by some other listener.
+            return;
+        }
+
+        if (!this.toggleExpandEnabled) {
+            // Nothing to do on click, just stop.
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.toggleExpand();
+    }
+
+}
diff --git a/src/core/directives/directives.module.ts b/src/core/directives/directives.module.ts
index 018ddafad..42a2b3c79 100644
--- a/src/core/directives/directives.module.ts
+++ b/src/core/directives/directives.module.ts
@@ -29,6 +29,7 @@ import { CoreOnResizeDirective } from './on-resize';
 import { CoreDownloadFileDirective } from './download-file';
 import { CoreCollapsibleHeaderDirective } from './collapsible-header';
 import { CoreSwipeNavigationDirective } from './swipe-navigation';
+import { CoreCollapsibleItemDirective } from './collapsible-item';
 
 @NgModule({
     declarations: [
@@ -47,6 +48,7 @@ import { CoreSwipeNavigationDirective } from './swipe-navigation';
         CoreDownloadFileDirective,
         CoreCollapsibleHeaderDirective,
         CoreSwipeNavigationDirective,
+        CoreCollapsibleItemDirective,
     ],
     exports: [
         CoreAutoFocusDirective,
@@ -64,6 +66,7 @@ import { CoreSwipeNavigationDirective } from './swipe-navigation';
         CoreDownloadFileDirective,
         CoreCollapsibleHeaderDirective,
         CoreSwipeNavigationDirective,
+        CoreCollapsibleItemDirective,
     ],
 })
 export class CoreDirectivesModule {}
diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index b0f6d03a3..a994ca87e 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -16,10 +16,10 @@
             <ion-item *ngIf="allSectionId == section.id" class="ion-text-wrap divider core-course-index-all"
                 (click)="selectSectionOrModule($event, section.id)" button [class.item-current]="selectedId === section.id" detail="false">
                 <ion-label>
-                    <p class="item-heading">
+                    <h2>
                         <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
                         </core-format-text>
-                    </p>
+                    </h2>
                 </ion-label>
             </ion-item>
             <ng-container *ngIf="allSectionId != section.id">
@@ -34,10 +34,10 @@
                     <ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
                     </ion-icon>
                     <ion-label>
-                        <p class="item-heading">
+                        <h2>
                             <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
                             </core-format-text>
-                        </p>
+                        </h2>
                     </ion-label>
                     <ion-badge *ngIf="section.highlighted && highlighted">{{highlighted}}</ion-badge>
                     <ion-icon name="fas-lock" *ngIf="section.availabilityinfo" slot="end" class="restricted"
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index c057e42c0..b16d74692 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -62,8 +62,8 @@
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
             }">
-            <ion-label>
-                <core-format-text class="core-module-description" *ngIf="module.description" [maxHeight]="80" [text]="module.description"
+            <ion-label collapsible-item>
+                <core-format-text class="core-module-description" *ngIf="module.description" [text]="module.description"
                     contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
                 </core-format-text>
 
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 0100acc6b..9c15df238 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -918,8 +918,6 @@ ion-chip {
             color: var(--ion-color-base);
         }
     }
-
-
 }
 
 ion-searchbar {
@@ -1243,13 +1241,19 @@ ion-item.item-input ion-input.has-focus {
     }
 }
 
-ion-item-divider.item, ion-item.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);
+    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);
-    h2, ion-label h2 {
+    font-weight: medium;
+
+    h2, ion-label h2,
+    p.item-heading, ion-label p.item-heading {
         font-size: var(--item-divider-font-size);
     }
 }
@@ -1314,6 +1318,80 @@ ion-grid.core-no-grid > ion-row {
     right: 0;
 }
 
+[collapsible-item] {
+    --collapsible-display-toggle: none;
+    --collapsible-toggle-background: var(--ion-item-background);
+    --collapsible-min-button-height: 44px;
+
+    .collapsible-toggle {
+        display: var(--collapsible-display-toggle);
+    }
+
+    &.collapsible-enabled {
+        --collapsible-display-toggle: block;
+
+        .collapsible-toggle {
+            display: var(--collapsible-display-toggle);
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            text-align: center;
+            z-index: 7;
+            text-transform: none;
+            text-align: end;
+            font-size: 14px;
+            background-color: var(--collapsible-toggle-background);
+            color: var(--text-color);
+            margin: 0;
+
+            .collapsible-toggle-arrow {
+                width: var(--a11y-min-target-size);
+                height: var(--a11y-min-target-size);
+
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 14px 14px;
+                @include core-transition(transform, 500ms);
+
+                @include push-arrow-color(626262, true);
+
+                @include darkmode() {
+                    @include push-arrow-color(ffffff, true);
+                }
+            }
+        }
+
+        &.collapsible-collapsed {
+            overflow: hidden;
+            min-height: calc(var(--collapsible-min-button-height) + 12);
+
+            .collapsible-toggle-arrow {
+                transform: rotate(90deg);
+            }
+
+            &:before {
+                content: '';
+                height: 100%;
+                position: absolute;
+                @include position(null, 0, 0, 0);
+                background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px));
+                background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px));
+                z-index: 6;
+            }
+        }
+
+        &.collapsible-expanded {
+            max-height: none !important;
+            padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit.
+
+            .collapsible-toggle-arrow {
+                transform: rotate(-90deg);
+            }
+        }
+    }
+}
+
 ion-header[collapsible] {
     @include core-transition(all, 500ms);
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 61b52c0f7..2697f08fd 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -222,7 +222,7 @@
     }
 
     --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
-    --item-divider-background: transparent;
+    --item-divider-background: var(--ion-item-background);
     --item-divider-color: var(--text-color);
     --item-divider-border-width: 0px;
     --item-divider-font-size: 20px;

From 7690270766d2799004900fb2bcd77af227d8e336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Feb 2022 22:29:21 +0100
Subject: [PATCH 05/14] MOBILE-3814 styles: Ion item without lines by default

---
 .../events/addon-block-timeline-events.html   |  6 ++---
 .../reminder-time-modal.html                  |  2 +-
 .../calendar/pages/edit-event/edit-event.html |  6 ++---
 src/addons/competency/pages/plan/plan.html    | 10 +++----
 .../addon-mod-assign-submission-file.html     |  2 +-
 .../component/addon-mod-data-field-file.html  |  2 +-
 .../mod/forum/components/index/index.html     |  2 +-
 .../mod/forum/components/post/post.html       |  6 ++---
 .../mod/glossary/pages/entry/entry.html       |  2 +-
 .../attempt-results/attempt-results.html      | 12 ++++-----
 .../index/addon-mod-lesson-index.html         |  2 +-
 .../mod/lesson/pages/player/player.html       | 26 +++++++++----------
 .../lesson/pages/user-retake/user-retake.html | 20 +++++++-------
 .../mod/quiz/pages/attempt/attempt.html       |  2 +-
 src/addons/mod/quiz/pages/review/review.html  |  2 +-
 ...ddon-mod-workshop-assessment-strategy.html |  2 +-
 src/addons/notifications/pages/list/list.html |  2 +-
 .../pages/notification/notification.html      |  2 +-
 .../pages/settings/settings.html              |  6 ++---
 .../pages/course-storage/course-storage.html  |  2 +-
 .../courses-storage/courses-storage.html      |  2 +-
 src/core/components/timer/core-timer.html     |  2 +-
 .../components/format/core-course-format.html |  2 +-
 .../module-info/core-course-module-info.html  |  6 ++---
 .../components/module/core-course-module.html |  6 ++---
 .../core-courses-course-list-item.html        |  4 +--
 .../core-courses-course-progress.html         |  6 ++---
 src/core/features/courses/pages/my/my.html    |  2 +-
 .../change-password/change-password.html      |  6 ++---
 .../login/pages/credentials/credentials.html  |  8 +++---
 .../pages/email-signup/email-signup.html      |  2 +-
 .../forgotten-password.html                   |  2 +-
 .../login/pages/reconnect/reconnect.html      |  4 +--
 src/core/features/login/pages/site/site.html  |  9 +++----
 .../components/user-menu/user-menu.html       |  4 +--
 .../features/settings/pages/about/about.html  |  3 +--
 .../settings/pages/general/general.html       |  2 +-
 .../features/sitehome/pages/index/index.html  |  8 +++---
 src/theme/theme.base.scss                     | 15 ++++++++++-
 39 files changed, 109 insertions(+), 100 deletions(-)

diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 7fffc2bd2..9f6f7b0e2 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -1,4 +1,4 @@
-<ion-item lines="none" *ngIf="course">
+<ion-item *ngIf="course">
     <ion-label class="ion-text-wrap">
         <h3>
             <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
@@ -7,7 +7,7 @@
     </ion-label>
 </ion-item>
 <ion-item-group *ngFor="let dayEvents of filteredEvents">
-    <ion-item lines="none">
+    <ion-item>
         <ion-label>
             <h4 [class.core-bold]="!course">{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
         </ion-label>
@@ -73,7 +73,7 @@
     <ion-spinner *ngIf="loadingMore" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
 </div>
 
-<ion-item lines="none" *ngIf="empty && course">
+<ion-item *ngIf="empty && course">
     <ion-label class="ion-text-wrap">
         <p>{{'addon.block_timeline.noevents' | translate}}</p>
     </ion-label>
diff --git a/src/addons/calendar/components/reminder-time-modal/reminder-time-modal.html b/src/addons/calendar/components/reminder-time-modal/reminder-time-modal.html
index cdf45cb20..3002fc5fe 100644
--- a/src/addons/calendar/components/reminder-time-modal/reminder-time-modal.html
+++ b/src/addons/calendar/components/reminder-time-modal/reminder-time-modal.html
@@ -27,7 +27,7 @@
         </ion-item>
 
         <!-- Custom value. -->
-        <ion-item lines="none" class="ion-text-wrap">
+        <ion-item class="ion-text-wrap">
             <ion-label>
                 <p>{{ 'core.custom' | translate }}</p>
             </ion-label>
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index 4b536a12d..5e111568f 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -147,7 +147,7 @@
                         </ion-label>
                         <ion-radio slot="end" [value]="0"></ion-radio>
                     </ion-item>
-                    <ion-item lines="none">
+                    <ion-item>
                         <ion-label>
                             <p>{{ 'addon.calendar.durationuntil' | translate }}</p>
                         </ion-label>
@@ -159,7 +159,7 @@
                             [placeholder]="'addon.calendar.durationuntil' | translate" [displayFormat]="dateFormat" display-timezone="utc">
                         </ion-datetime>
                     </ion-item>
-                    <ion-item lines="none">
+                    <ion-item>
                         <ion-label>
                             <p>{{ 'addon.calendar.durationminutes' | translate }}</p>
                         </ion-label>
@@ -175,7 +175,7 @@
 
             <!-- Repeat (for new events). -->
             <ng-container *ngIf="!eventId || eventId < 0">
-                <ion-item class="ion-text-wrap divider" lines="none">
+                <ion-item class="ion-text-wrap divider">
                     <ion-label>
                         <p class="item-heading">{{ 'addon.calendar.repeatevent' | translate }}</p>
                     </ion-label>
diff --git a/src/addons/competency/pages/plan/plan.html b/src/addons/competency/pages/plan/plan.html
index 4c55d843d..0f84cbb7f 100644
--- a/src/addons/competency/pages/plan/plan.html
+++ b/src/addons/competency/pages/plan/plan.html
@@ -23,7 +23,7 @@
         </ion-card>
         <ion-card *ngIf="plan">
             <ion-list>
-                <ion-item class="ion-text-wrap" *ngIf="plan.plan.description" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="plan.plan.description">
                     <ion-label>
                         <p>
                             <core-format-text [text]="plan.plan.description" contextLevel="user" [contextInstanceId]="plan.plan.userid">
@@ -31,25 +31,25 @@
                         </p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" lines="none">
+                <ion-item class="ion-text-wrap">
                     <ion-label>
                         <p class="item-heading">{{ 'addon.competency.status' | translate }}</p>
                         <p>{{ plan.plan.statusname }}</p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="plan.plan.duedate > 0" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="plan.plan.duedate > 0">
                     <ion-label>
                         <p class="item-heading">{{ 'addon.competency.duedate' | translate }}</p>
                         <p>{{ plan.plan.duedate * 1000 | coreFormatDate }}</p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="plan.plan.template" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="plan.plan.template">
                     <ion-label>
                         <p class="item-heading">{{ 'addon.competency.template' | translate }}</p>
                         <p>{{ plan.plan.template.shortname }}</p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" lines="none">
+                <ion-item class="ion-text-wrap">
                     <ion-label id="addon-competency-plan-{{plan.plan.id}}-progress">
                         <p class="item-heading">{{ 'addon.competency.progress' | translate }}</p>
                         <p>
diff --git a/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html b/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
index 65b01b48e..316e4df80 100644
--- a/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
+++ b/src/addons/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
@@ -2,7 +2,7 @@
 <ion-item class="ion-text-wrap" *ngIf="files && files.length && !edit">
     <ion-label>
         <h2>{{ plugin.name }}</h2>
-        <div lines="none">
+        <div>
             <core-files [files]="files" [component]="component" [componentId]="assign.cmid" [alwaysDownload]="true"></core-files>
         </div>
     </ion-label>
diff --git a/src/addons/mod/data/fields/file/component/addon-mod-data-field-file.html b/src/addons/mod/data/fields/file/component/addon-mod-data-field-file.html
index 09e90442f..c66729d2b 100644
--- a/src/addons/mod/data/fields/file/component/addon-mod-data-field-file.html
+++ b/src/addons/mod/data/fields/file/component/addon-mod-data-field-file.html
@@ -11,7 +11,7 @@
 </span>
 
 <ng-container *ngIf="displayMode">
-    <div lines="none">
+    <div>
         <core-files [files]="files" [component]="component" [componentId]="componentId" [alwaysDownload]="true"></core-files>
     </div>
 </ng-container>
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index eebda708e..11a307a79 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -40,7 +40,7 @@
         <!-- Activity info. -->
         <core-course-module-info [module]="module" [description]="forum && forum.type != 'single' && description" [component]="component"
             [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline || hasOfflineRatings">
-            <ion-item lines="none" class="ion-text-wrap">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     {{descriptionNote}}
                 </ion-label>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index c23057906..a077ebe88 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -1,7 +1,7 @@
 <div class="addon-mod_forum-post">
     <ng-container *ngIf="!formData.isEditing || !showForm">
         <ion-card-header class="ion-text-wrap ion-no-padding" id="addon-mod_forum-post-{{post.id}}">
-            <ion-item class="ion-text-wrap" [class.highlight]="highlight" lines="none">
+            <ion-item class="ion-text-wrap" [class.highlight]="highlight">
                 <ion-label>
                     <div class="addon-mod-forum-post-title" *ngIf="displaySubject">
                         <h2 class="ion-text-wrap">
@@ -63,13 +63,13 @@
             <core-format-text [component]="component" [componentId]="componentId" [text]="post.message" contextLevel="module"
                 [contextInstanceId]="forum && forum.cmid" [courseId]="courseId">
             </core-format-text>
-            <div lines="none" *ngIf="post.attachments && post.attachments.length > 0">
+            <div *ngIf="post.attachments && post.attachments.length > 0">
                 <core-files [files]="post.attachments" [component]="component" [componentId]="componentId" showInline="true">
                 </core-files>
             </div>
         </ion-card-content>
         <div class="addon-mod-forum-post-more-info">
-            <ion-item class="ion-text-wrap" *ngIf="tagsEnabled && post.tags && post.tags.length > 0" lines="none">
+            <ion-item class="ion-text-wrap" *ngIf="tagsEnabled && post.tags && post.tags.length > 0">
                 <div slot="start">{{ 'core.tag.tags' | translate }}:</div>
                 <ion-label>
                     <core-tag-list [tags]="post.tags"></core-tag-list>
diff --git a/src/addons/mod/glossary/pages/entry/entry.html b/src/addons/mod/glossary/pages/entry/entry.html
index ebe54a345..c68402e12 100644
--- a/src/addons/mod/glossary/pages/entry/entry.html
+++ b/src/addons/mod/glossary/pages/entry/entry.html
@@ -46,7 +46,7 @@
                     </core-format-text>
                 </ion-label>
             </ion-item>
-            <div *ngIf="entry.attachment" lines="none">
+            <div *ngIf="entry.attachment">
                 <core-file *ngFor="let file of entry.attachments" [file]="file" [component]="component" [componentId]="componentId">
                 </core-file>
             </div>
diff --git a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
index d4022f31c..00a903743 100644
--- a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
+++ b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
@@ -36,13 +36,13 @@
             <!-- Attempt summary. -->
             <ion-card class="addon-mod_h5pactivity-attempt-result-summary">
                 <ion-list>
-                    <ion-item class="ion-text-wrap" lines="none">
+                    <ion-item class="ion-text-wrap">
                         <ion-label>
                             <h2>{{ 'addon.mod_h5pactivity.startdate' | translate }}</h2>
                             <p>{{ attempt.timecreated | coreFormatDate:'strftimedatetime' }}</p>
                         </ion-label>
                     </ion-item>
-                    <ion-item class="ion-text-wrap" lines="none">
+                    <ion-item class="ion-text-wrap">
                         <ion-label>
                             <h2>{{ 'addon.mod_h5pactivity.completion' | translate }}</h2>
                             <p *ngIf="attempt.completion">
@@ -55,13 +55,13 @@
                             </p>
                         </ion-label>
                     </ion-item>
-                    <ion-item class="ion-text-wrap" lines="none">
+                    <ion-item class="ion-text-wrap">
                         <ion-label>
                             <h2>{{ 'addon.mod_h5pactivity.duration' | translate }}</h2>
                             <p>{{ attempt.durationReadable }}</p>
                         </ion-label>
                     </ion-item>
-                    <ion-item class="ion-text-wrap" lines="none">
+                    <ion-item class="ion-text-wrap">
                         <ion-label>
                             <h2>{{ 'addon.mod_h5pactivity.outcome' | translate }}</h2>
                             <p *ngIf="attempt.success !== null && attempt.success">
@@ -77,7 +77,7 @@
                             </p>
                         </ion-label>
                     </ion-item>
-                    <ion-item *ngIf="attempt.maxscore" class="ion-text-wrap" lines="none">
+                    <ion-item *ngIf="attempt.maxscore" class="ion-text-wrap">
                         <ion-label>
                             <h2>{{ 'addon.mod_h5pactivity.totalscore' | translate }}</h2>
                             <p>{{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: attempt} }}</p>
@@ -151,7 +151,7 @@
                     </ng-container>
 
                     <!-- Result doesn't support tracking. -->
-                    <ion-item class="ion-text-wrap core-warning-item" *ngIf="!result.track" lines="none">
+                    <ion-item class="ion-text-wrap core-warning-item" *ngIf="!result.track">
                         <ion-icon slot="start" name="fas-exclamation-triangle" color="warning" aria-hidden="true"></ion-icon>
                         <ion-label>
                             {{ 'addon.mod_h5pactivity.no_compatible_track' | translate:{$a: result.interactiontype} }}
diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
index 0f1de12a2..1dd4b2270 100644
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -69,7 +69,7 @@
                     <ion-list *ngIf="(lesson && !preventReasons.length) || retakeToReview">
                         <ng-container *ngIf="retakeToReview">
                             <!-- A retake was finished in a synchronization, allow reviewing it. -->
-                            <ion-item class="ion-text-wrap" lines="none">
+                            <ion-item class="ion-text-wrap">
                                 <ion-label class="ion-padding-bottom">
                                     {{ 'addon.mod_lesson.retakefinishedinsync' | translate }}
                                 </ion-label>
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index 0a55d7838..69e51bc97 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -198,34 +198,34 @@
                 <ion-card-header class="ion-text-wrap" *ngIf="eolData.gradelesson">
                     <ion-card-title>{{ 'addon.mod_lesson.congratulations' | translate }}</ion-card-title>
                 </ion-card-header>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.notenoughtimespent" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.notenoughtimespent">
                     <ion-label>{{ eolData.notenoughtimespent.message }}</ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.numberofpagesviewed" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.numberofpagesviewed">
                     <ion-label>{{ eolData.numberofpagesviewed.message }}</ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.youshouldview" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.youshouldview">
                     <ion-label>{{ eolData.youshouldview.message }}</ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.numberofcorrectanswers" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.numberofcorrectanswers">
                     <ion-label>{{ eolData.numberofcorrectanswers.message }}</ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.displayscorewithessays" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.displayscorewithessays">
                     <ion-label [innerHTML]="eolData.displayscorewithessays.message"></ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="!eolData.displayscorewithessays && eolData.displayscorewithoutessays" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="!eolData.displayscorewithessays && eolData.displayscorewithoutessays">
                     <ion-label>{{ eolData.displayscorewithoutessays.message }}</ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.yourcurrentgradeisoutof" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.yourcurrentgradeisoutof">
                     <ion-label>{{ eolData.yourcurrentgradeisoutof.message }}</ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.eolstudentoutoftimenoanswers" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.eolstudentoutoftimenoanswers">
                     <ion-label>{{ eolData.eolstudentoutoftimenoanswers.message }}</ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.welldone" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.welldone">
                     <ion-label>{{ eolData.welldone.message }}</ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="lesson.progressbar && eolData.progresscompleted" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="lesson.progressbar && eolData.progresscompleted">
                     <ion-label>
                         <span id="addon-mod_lesson-{{cmId}}-progress-end">
                             {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: eolData.progresscompleted.value} }}
@@ -235,14 +235,14 @@
                         </core-progress-bar>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.displayofgrade" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.displayofgrade">
                     <ion-label>{{ eolData.displayofgrade.message }}</ion-label>
                 </ion-item>
                 <ion-button *ngIf="eolData.reviewlesson" expand="block" class="ion-text-wrap ion-margin button-no-uppercase"
                     (click)="reviewLesson(reviewPageId!)">
                     {{ 'addon.mod_lesson.reviewlesson' | translate }}
                 </ion-button>
-                <ion-item class="ion-text-wrap" *ngIf="eolData.modattemptsnoteacher" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="eolData.modattemptsnoteacher">
                     <ion-label>{{ eolData.modattemptsnoteacher.message }}</ion-label>
                 </ion-item>
                 <!-- If activity link was successfully formatted, render the button. -->
@@ -252,7 +252,7 @@
                         [courseId]="courseId">
                     </core-format-text>
                 </ion-button>
-                <ion-item class="ion-text-wrap" *ngIf="activityLink && !activityLink.formatted" lines="none">
+                <ion-item class="ion-text-wrap" *ngIf="activityLink && !activityLink.formatted">
                     <!-- Activity link wasn't formatted, render the original link. -->
                     <ion-label>
                         <core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index 9d0c40651..5c4a27e7a 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -83,7 +83,7 @@
                     <ion-card-header class="ion-text-wrap">
                         <ion-card-title>{{page.qtype}}: {{page.title}}</ion-card-title>
                     </ion-card-header>
-                    <ion-item class="ion-text-wrap" lines="none">
+                    <ion-item class="ion-text-wrap">
                         <ion-label>
                             <h3 class="item-heading">{{ 'addon.mod_lesson.question' | translate }}</h3>
                             <p>
@@ -94,13 +94,12 @@
                             </p>
                         </ion-label>
                     </ion-item>
-                    <ion-item class="ion-text-wrap" lines="none">
+                    <ion-item class="ion-text-wrap">
                         <ion-label>
                             <h3 class="item-heading">{{ 'addon.mod_lesson.answer' | translate }}</h3>
                         </ion-label>
                     </ion-item>
-                    <ion-item class="ion-text-wrap" lines="none"
-                        *ngIf="!page.answerdata || !page.answerdata.answers || !page.answerdata.answers.length">
+                    <ion-item class="ion-text-wrap" *ngIf="!page.answerdata || !page.answerdata.answers || !page.answerdata.answers.length">
                         <ion-label>
                             <p>{{ 'addon.mod_lesson.didnotanswerquestion' | translate }}</p>
                         </ion-label>
@@ -108,7 +107,7 @@
                     <div *ngIf="page.answerdata && page.answerdata.answers && page.answerdata.answers.length"
                         class="addon-mod_lesson-answer">
                         <ng-container *ngFor="let answer of page.answerdata.answers">
-                            <ion-item lines="none" *ngIf="page.isContent">
+                            <ion-item *ngIf="page.isContent">
                                 <ion-label class="ion-text-wrap">
                                     <ion-grid class="ion-no-padding">
                                         <!-- Content page, display a button and the content. -->
@@ -151,7 +150,7 @@
                                 </ion-item>
 
                                 <!-- Short answer or numeric. -->
-                                <ion-item class="ion-text-wrap" *ngIf="answer[0].isText" lines="none">
+                                <ion-item class="ion-text-wrap" *ngIf="answer[0].isText">
                                     <ion-label>
                                         <p>{{ answer[0].value }}</p>
                                         <ion-badge *ngIf="answer[1]" color="dark">
@@ -164,7 +163,7 @@
                                 </ion-item>
 
                                 <!-- Matching. -->
-                                <ion-item lines="none" *ngIf="answer[0].isSelect">
+                                <ion-item *ngIf="answer[0].isSelect">
                                     <ion-label class="ion-text-wrap">
                                         <ion-grid class="ion-no-padding">
                                             <ion-row>
@@ -191,8 +190,7 @@
                                 </ion-item>
 
                                 <!-- Essay or couldn't determine. -->
-                                <ion-item class="ion-text-wrap" lines="none"
-                                    *ngIf="!answer[0].isCheckbox && !answer[0].isText && !answer[0].isSelect">
+                                <ion-item class="ion-text-wrap" *ngIf="!answer[0].isCheckbox && !answer[0].isText && !answer[0].isSelect">
                                     <ion-label>
                                         <p>
                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
@@ -210,7 +208,7 @@
                                 </ion-item>
                             </ng-container>
 
-                            <ion-item class="ion-text-wrap" *ngIf="!page.isContent && !page.isQuestion" lines="none">
+                            <ion-item class="ion-text-wrap" *ngIf="!page.isContent && !page.isQuestion">
                                 <!-- Another page (end of branch, ...). -->
                                 <ion-label>
                                     <p>
@@ -227,7 +225,7 @@
                             </ion-item>
                         </ng-container>
 
-                        <ion-item class="ion-text-wrap" *ngIf="page.answerdata.response" lines="none">
+                        <ion-item class="ion-text-wrap" *ngIf="page.answerdata.response">
                             <ion-label>
                                 <h3 class="item-heading">{{ 'addon.mod_lesson.response' | translate }}</h3>
                                 <p>
diff --git a/src/addons/mod/quiz/pages/attempt/attempt.html b/src/addons/mod/quiz/pages/attempt/attempt.html
index adf13e110..9454e17a9 100644
--- a/src/addons/mod/quiz/pages/attempt/attempt.html
+++ b/src/addons/mod/quiz/pages/attempt/attempt.html
@@ -17,7 +17,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <ion-list *ngIf="attempt" lines="none">
+        <ion-list *ngIf="attempt">
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <h2>{{ 'addon.mod_quiz.attemptnumber' | translate }}</h2>
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index be30538f5..a83b93d8d 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -31,7 +31,7 @@
                     </ng-container>
                 </ion-card-title>
             </ion-card-header>
-            <ion-list lines="none">
+            <ion-list>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <h2>{{ 'addon.mod_quiz.startedon' | translate }}</h2>
diff --git a/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html b/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
index d3bc0cf0b..1f3111ee3 100644
--- a/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
+++ b/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
@@ -57,7 +57,7 @@
                     </core-format-text>
                 </ion-label>
             </ion-item>
-            <ion-item *ngIf="!edit && workshop.overallfeedbackfiles && data.assessment?.feedbackattachmentfiles?.length" lines="none">
+            <ion-item *ngIf="!edit && workshop.overallfeedbackfiles && data.assessment?.feedbackattachmentfiles?.length">
                 <ion-label>
                     <core-files [files]="data.assessment?.feedbackattachmentfiles" [component]="component" [componentId]="componentId">
                     </core-files>
diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index 0a4462816..0acb02682 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -26,7 +26,7 @@
         </div>
 
         <ion-card *ngFor="let notification of notifications">
-            <ion-item class="ion-text-wrap" lines="none" [attr.aria-label]="
+            <ion-item class="ion-text-wrap" [attr.aria-label]="
                     notification.timeread
                     ? notification.subject
                     : 'addon.notifications.unreadnotification' | translate: {$a: notification.subject}">
diff --git a/src/addons/notifications/pages/notification/notification.html b/src/addons/notifications/pages/notification/notification.html
index 520e6dc3b..371835ddb 100644
--- a/src/addons/notifications/pages/notification/notification.html
+++ b/src/addons/notifications/pages/notification/notification.html
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="loaded">
-        <ion-item class="ion-text-wrap" lines="none" [attr.aria-label]="subject">
+        <ion-item class="ion-text-wrap" [attr.aria-label]="subject">
             <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
                 [fullname]="userFromFullName">
                 <img *ngIf="iconUrl && !modname" [src]="iconUrl" alt="" role="presentation" class="core-avatar-extra">
diff --git a/src/addons/notifications/pages/settings/settings.html b/src/addons/notifications/pages/settings/settings.html
index 6bd5e89d8..274953f0d 100644
--- a/src/addons/notifications/pages/settings/settings.html
+++ b/src/addons/notifications/pages/settings/settings.html
@@ -107,11 +107,11 @@
             </ion-item>
 
             <!-- Phone view -->
-            <ion-item class="ion-text-wrap ion-no-margin ion-hide-md-up" lines="none">
+            <ion-item class="ion-text-wrap ion-no-margin ion-hide-md-up">
                 <p class="item-heading">{{ notification.displayname }}</p>
             </ion-item>
             <!-- If notifications enabled, show toggles. If disabled, show "Disabled" instead of toggle. -->
-            <ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap ion-hide-md-up" lines="none">
+            <ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap ion-hide-md-up">
                 <ion-label class="ion-margin-horizontal">
                     <p>{{ 'core.settings.' + state | translate }}</p>
                 </ion-label>
@@ -148,7 +148,7 @@
         </ion-item-divider>
         <ng-container *ngFor="let notification of component.notifications">
             <!-- If notifications enabled, show toggles. If disabled, show "Disabled" instead of toggle. -->
-            <ion-item class="ion-text-wrap" lines="none">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <p>{{ notification.displayname }}</p>
                 </ion-label>
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index dab853fb1..07054abe7 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -14,7 +14,7 @@
             <ion-card-header>
                 <p class="ion-text-wrap ion-no-margin">{{ 'addon.storagemanager.courseinfo' | translate }}</p>
                 <ion-card-title>{{ title }}</ion-card-title>
-                <ion-item class="size ion-text-wrap ion-no-padding" lines="none">
+                <ion-item class="size ion-text-wrap ion-no-padding">
                     <ion-label>
                         <p class="item-heading ion-text-wrap">{{ 'addon.storagemanager.totaldownloads' | translate }}</p>
                         <ion-badge color="light">{{ totalSize | coreBytesToSize }}</ion-badge>
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index ffffbc9f3..9bf0f92a9 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -26,7 +26,7 @@
                     <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-item>
-            <ion-item class="size ion-text-wrap" lines="none">
+            <ion-item class="size ion-text-wrap">
                 <ion-label>
                     <h2 class="ion-text-wrap">{{ 'addon.storagemanager.coursesspaceusage' | translate }}</h2>
                     <ion-badge color="light">{{ totalSize | coreBytesToSize }}</ion-badge>
diff --git a/src/core/components/timer/core-timer.html b/src/core/components/timer/core-timer.html
index 27ecb46df..388a53324 100644
--- a/src/core/components/timer/core-timer.html
+++ b/src/core/components/timer/core-timer.html
@@ -1,4 +1,4 @@
-<ion-item lines="none" class="core-timer" role="timer" [ngClass]="{'ion-text-center': align == 'center', 'ion-text-end': align == 'right'}">
+<ion-item class="core-timer" role="timer" [ngClass]="{'ion-text-center': align == 'center', 'ion-text-end': align == 'right'}">
     <ion-icon name="fas-clock" slot="start" aria-hidden="true"></ion-icon>
     <ion-label>
         <span *ngIf="timeLeft && timeLeft > 0 && timerText" class="core-timer-text">{{ timerText }}</span>
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 a3aab99bf..1c06ea6c0 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -96,7 +96,7 @@
             <ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
         </ion-item-divider>
 
-        <ion-item class="ion-text-wrap" *ngIf="section.summary" lines="none">
+        <ion-item class="ion-text-wrap" *ngIf="section.summary">
             <ion-label>
                 <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id">
                 </core-format-text>
diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html
index 864dd98a5..8ea74f89a 100644
--- a/src/core/features/course/components/module-info/core-course-module-info.html
+++ b/src/core/features/course/components/module-info/core-course-module-info.html
@@ -1,4 +1,4 @@
-<ion-item class="ion-text-wrap collapsible-title" lines="none">
+<ion-item class="ion-text-wrap collapsible-title">
     <core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance">
     </core-mod-icon>
     <ion-label>
@@ -11,7 +11,7 @@
         <ng-content select="[title]"></ng-content>
     </ion-label>
 </ion-item>
-<ion-item class="ion-text-wrap" *ngIf="description" lines="none">
+<ion-item class="ion-text-wrap" *ngIf="description">
     <ion-label>
         <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
             [contextInstanceId]="module.id" [courseId]="courseId" [maxHeight]="expandDescription ? null : 120">
@@ -20,7 +20,7 @@
 </ion-item>
 <ng-content select="[description]"></ng-content>
 
-<ion-item class="ion-text-wrap core-module-dates" lines="none" *ngIf="showCompletion && (module.dates?.length ||
+<ion-item class="ion-text-wrap core-module-dates" *ngIf="showCompletion && (module.dates?.length ||
 (module.completiondata && module.completiondata.isautomatic && module.uservisible))">
     <ion-label>
         <!-- Activity dates. -->
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index b16d74692..fff96491f 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -1,6 +1,6 @@
 <ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
     <ng-container *ngIf="!module.handlerData.loading">
-        <ion-item id="core-course-module-{{module.id}}" detail="false" lines="none"
+        <ion-item id="core-course-module-{{module.id}}" detail="false"
             class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
             (click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" [ngClass]="{
                 'has-module-info': hasInfo,
@@ -57,7 +57,7 @@
                 </div>
             </div>
         </ion-item>
-        <ion-item *ngIf="hasInfo" id="core-course-module-{{module.id}}-info" detail="false" lines="none"
+        <ion-item *ngIf="hasInfo" id="core-course-module-{{module.id}}-info" detail="false"
             class="ion-text-wrap core-course-module-handler core-course-module-info {{module.handlerData.class}}" [ngClass]="{
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
@@ -99,7 +99,7 @@
     <!-- Loading. -->
     <ion-item *ngIf="module.handlerData.loading" role="status" class="ion-text-wrap" id="core-course-module-{{module.id}}"
         [attr.aria-label]="module.handlerData.a11yTitle"
-        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false" lines="none">
+        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false">
         <ion-label>
             <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
         </ion-label>
diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
index 625fd2ad1..41216f198 100644
--- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
@@ -12,8 +12,8 @@
         </ng-container>
     </div>
 
-    <ion-item class="ion-text-wrap" button lines="none" detail="false" (click)="openCourse()"
-        [attr.aria-label]="course.displayname || course.fullname" [class.item-disabled]="course.visible == 0">
+    <ion-item class="ion-text-wrap" button detail="false" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
+        [class.item-disabled]="course.visible == 0">
 
         <ng-container *ngIf="layout == 'list' || layout == 'listwithenrol'">
             <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb">
diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index d89c865da..ab0ce2457 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -3,8 +3,8 @@
         [style.background-color]="course.color">
         <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
     </div>
-    <ion-item button lines="none" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
-        class="core-course-header" [class.item-disabled]="course.visible == 0"
+    <ion-item button (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname" class="core-course-header"
+        [class.item-disabled]="course.visible == 0"
         [class.core-course-only-title]="!showAll || progress < 0 && completionUserTracked === false" detail="false">
         <ion-label class="ion-text-wrap core-course-title"
             [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)"
@@ -53,7 +53,7 @@
             </ion-button>
         </div>
     </ion-item>
-    <ion-item *ngIf="showAll && progress >= 0 && completionUserTracked !== false" lines="none" class="core-course-progress">
+    <ion-item *ngIf="showAll && progress >= 0 && completionUserTracked !== false" class="core-course-progress">
         <ion-label>
             <core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
         </ion-label>
diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
index f53075af7..9c2d2f6b2 100644
--- a/src/core/features/courses/pages/my/my.html
+++ b/src/core/features/courses/pages/my/my.html
@@ -22,7 +22,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <ion-item class="ion-text-wrap divider" lines="none">
+        <ion-item class="ion-text-wrap divider">
             <ion-label>
                 <h2>{{ 'core.courses.mycourses' | translate }}</h2>
             </ion-label>
diff --git a/src/core/features/login/pages/change-password/change-password.html b/src/core/features/login/pages/change-password/change-password.html
index d3b0e44e7..9d89d49e4 100644
--- a/src/core/features/login/pages/change-password/change-password.html
+++ b/src/core/features/login/pages/change-password/change-password.html
@@ -18,7 +18,7 @@
 <ion-content>
     <ion-list>
         <ng-container *ngIf="!changingPassword">
-            <ion-item class="ion-text-wrap" lines="none">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <h2>{{ 'core.login.forcepasswordchangenotice' | translate }}</h2>
                     <p class="ion-padding-top">{{ 'core.login.changepasswordinstructions' | translate }}</p>
@@ -29,7 +29,7 @@
             </ion-button>
         </ng-container>
         <ng-container *ngIf="changingPassword">
-            <ion-item class="ion-text-wrap" lines="none">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <p>{{ 'core.login.changepasswordreconnectinstructions' | translate }}</p>
                 </ion-label>
@@ -38,7 +38,7 @@
                 {{ 'core.login.reconnect' | translate }}
             </ion-button>
         </ng-container>
-        <ion-item class="ion-text-wrap" lines="none">
+        <ion-item class="ion-text-wrap">
             <ion-label>
                 <p>{{ 'core.login.changepasswordlogoutinstructions' | translate }}</p>
             </ion-label>
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 11772f5e6..ce0c56988 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -54,7 +54,7 @@
 
             <ng-container *ngIf="showScanQR">
                 <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
-                <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()">
+                <ion-button expand="block" color="light" class="ion-margin" (click)="showInstructionsAndScanQR()">
                     <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
                     {{ 'core.scanqr' | translate }}
                 </ion-button>
@@ -68,7 +68,7 @@
         </ion-button>
 
         <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
-            <ion-item class="ion-text-wrap" lines="none">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
                 </ion-label>
@@ -81,12 +81,12 @@
         </ion-list>
 
         <ion-list *ngIf="canSignup" class="ion-padding-top core-login-sign-up">
-            <ion-item class="ion-text-wrap" lines="none">
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <h3 class="item-heading">{{ 'core.login.firsttime' | translate }}</h3>
                 </ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap" lines="none" *ngIf="authInstructions">
+            <ion-item class="ion-text-wrap" *ngIf="authInstructions">
                 <ion-label>
                     <p>
                         <core-format-text [text]="authInstructions" [filter]="false"></core-format-text>
diff --git a/src/core/features/login/pages/email-signup/email-signup.html b/src/core/features/login/pages/email-signup/email-signup.html
index 8aeae3721..d4ab18e0c 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -232,7 +232,7 @@
                 </h3>
             </ion-label>
         </ion-item-divider>
-        <ion-item class="ion-text-wrap" lines="none">
+        <ion-item class="ion-text-wrap">
             <ion-label>
                 <h3 class="item-heading">{{ 'core.considereddigitalminor' | translate }}</h3>
                 <p>{{ 'core.digitalminor_desc' | translate }}</p>
diff --git a/src/core/features/login/pages/forgotten-password/forgotten-password.html b/src/core/features/login/pages/forgotten-password/forgotten-password.html
index 2798c9b99..d5a307706 100644
--- a/src/core/features/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html
@@ -10,7 +10,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-list lines="none">
+    <ion-list>
         <ion-item class="ion-text-wrap">
             <ion-label>{{ 'core.login.passwordforgotteninstructions2' | translate }}</ion-label>
         </ion-item>
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index d8fa966ff..e365d0e05 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -65,7 +65,7 @@
 
         <ng-container *ngIf="showScanQR">
             <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
-            <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()">
+            <ion-button expand="block" color="light" class="ion-margin" (click)="showInstructionsAndScanQR()">
                 <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
                 {{ 'core.scanqr' | translate }}
             </ion-button>
@@ -80,7 +80,7 @@
 
     <!-- Identity providers. -->
     <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
-        <ion-item class="ion-text-wrap" lines="none">
+        <ion-item class="ion-text-wrap">
             <ion-label>
                 <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
             </ion-label>
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index c6a3f8071..5adb6101f 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -42,7 +42,7 @@
             </ion-item>
 
             <ion-list [class.hidden]="!hasSites && !enteredSiteUrl" class="core-login-site-list">
-                <ion-item lines="none" class="core-login-site-list-title">
+                <ion-item class="core-login-site-list-title">
                     <ion-label>
                         <h2 class="item-heading">{{ 'core.login.selectsite' | translate }}</h2>
                     </ion-label>
@@ -73,7 +73,7 @@
             </div>
         </ng-container>
 
-        <ion-item *ngIf="siteSelector == 'url'" lines="none">
+        <ion-item *ngIf="siteSelector == 'url'">
             <ion-label>
                 <ion-button expand="block" [disabled]="!siteForm.valid" class="ion-text-wrap" type="submit">
                     {{ 'core.login.connect' | translate }}
@@ -85,7 +85,7 @@
     <ng-container *ngIf="fixedSites">
         <!-- Pick the site from a list of fixed sites. -->
         <ion-list *ngIf="siteSelector == 'list'">
-            <ion-item lines="none">
+            <ion-item>
                 <ion-label>
                     <h2 class="item-heading">{{ 'core.login.selectsite' | translate }}</h2>
                 </ion-label>
@@ -101,8 +101,7 @@
 
     <ng-container *ngIf="showScanQR && !hasSites && !enteredSiteUrl">
         <div class="ion-text-center ion-padding ion-margin-top">{{ 'core.login.or' | translate }}</div>
-        <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()"
-            aria-haspopup="dialog">
+        <ion-button expand="block" color="light" class="ion-margin" (click)="showInstructionsAndScanQR()" aria-haspopup="dialog">
             <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
             {{ 'core.scanqr' | translate }}
         </ion-button>
diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
index 572e8aa26..3932978ae 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.html
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -35,7 +35,7 @@
             </ion-label>
         </ion-item>
 
-        <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded" lines="none">
+        <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
             <ion-label>
                 <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
             </ion-label>
@@ -43,7 +43,7 @@
 
         <ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
             [ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden"
-            [attr.aria-label]="handler.title | translate" detail="true" lines="none">
+            [attr.aria-label]="handler.title | translate" detail="true">
             <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <p class="item-heading">{{ handler.title | translate }}</p>
diff --git a/src/core/features/settings/pages/about/about.html b/src/core/features/settings/pages/about/about.html
index 04d5a5971..4af2acfda 100644
--- a/src/core/features/settings/pages/about/about.html
+++ b/src/core/features/settings/pages/about/about.html
@@ -36,8 +36,7 @@
 </ion-content>
 
 <ion-footer class="ion-no-border">
-    <ion-item button class="ion-text-wrap ion-text-center core-about-deviceinfo" detail="false" (click)="openPage('deviceinfo')"
-        lines="none">
+    <ion-item button class="ion-text-wrap ion-text-center core-about-deviceinfo" detail="false" (click)="openPage('deviceinfo')">
         <ion-label>
             <h2>{{ appName }} {{ versionName }}</h2>
         </ion-label>
diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
index 530926a4a..a48de95bc 100644
--- a/src/core/features/settings/pages/general/general.html
+++ b/src/core/features/settings/pages/general/general.html
@@ -36,7 +36,7 @@
             </ion-segment>
         </ion-item>
         <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0"
-            [lines]="selectedScheme=='system' && isAndroid ? 'none' : 'inset'">
+            [lines]="selectedScheme=='system' && isAndroid ? 'none' : ''">
             <ion-label>
                 <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
                 <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index a2f064248..43e87b631 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@@ -55,7 +55,7 @@
 </ion-content>
 
 <ng-template #allCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()" lines="none">
+    <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()">
         <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <h2>{{ 'core.courses.availablecourses' | translate}}</h2>
@@ -69,7 +69,7 @@
 </ng-template>
 
 <ng-template #categories>
-    <ion-item button class="ion-text-wrap" (click)="openCourseCategories()" lines="none">
+    <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
         <ion-icon name="fas-folder" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <h2>{{ 'core.courses.categories' | translate}}</h2>
@@ -78,7 +78,7 @@
 </ng-template>
 
 <ng-template #enrolledCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openMyCourses()" lines="none">
+    <ion-item button class="ion-text-wrap" (click)="openMyCourses()">
         <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true">
         </ion-icon>
         <ion-label>
@@ -88,7 +88,7 @@
 </ng-template>
 
 <ng-template #courseSearch>
-    <ion-item button class="ion-text-wrap" (click)="openSearch()" lines="none">
+    <ion-item button class="ion-text-wrap" (click)="openSearch()">
         <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <h2>{{ 'core.courses.searchcourses' | translate}}</h2>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 9c15df238..1ca9402af 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1049,6 +1049,20 @@ audio.core-media-adapt-width {
     width: 100%;
 }
 
+ion-item {
+    --inner-border-width: 0px;
+}
+
+ion-item.item-lines-full {
+    --inner-border-width: 0px;
+    --border-width: 0 0 1px 0;
+}
+
+ion-item.item-lines-inset {
+    --inner-border-width: 1px;
+    --border-width: 0px;
+}
+
 // Fake item.
 div.fake-ion-item {
     position: relative;
@@ -1061,7 +1075,6 @@ div.fake-ion-item {
     text-decoration: none;
     overflow: hidden;
     box-sizing: border-box;
-
 }
 
 html.md div.fake-ion-item {

From 13de3b9776bbc8e866a6794e29b1048e5d950181 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Feb 2022 22:29:40 +0100
Subject: [PATCH 06/14] MOBILE-3814 blocks: Use cards on blocks

---
 src/core/features/block/components/block/core-block.html | 4 ++--
 src/core/features/course/components/format/format.scss   | 4 ++++
 src/core/features/courses/pages/my/my.scss               | 8 ++++++++
 src/theme/theme.light.scss                               | 3 ++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/core/features/block/components/block/core-block.html b/src/core/features/block/components/block/core-block.html
index 1c1e3a215..4761a2dbc 100644
--- a/src/core/features/block/components/block/core-block.html
+++ b/src/core/features/block/components/block/core-block.html
@@ -1,4 +1,4 @@
 <!-- Only render the block if it's supported. -->
-<div *ngIf="loaded && componentClass && block.visible" class="{{class}}">
+<ion-card *ngIf="loaded && componentClass && block.visible" class="{{class}}">
     <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
-</div>
+</ion-card>
diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss
index 8167ba66a..e7701472e 100644
--- a/src/core/features/course/components/format/format.scss
+++ b/src/core/features/course/components/format/format.scss
@@ -1,3 +1,7 @@
+: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/courses/pages/my/my.scss b/src/core/features/courses/pages/my/my.scss
index 7c90901e1..e7b36a51b 100644
--- a/src/core/features/courses/pages/my/my.scss
+++ b/src/core/features/courses/pages/my/my.scss
@@ -1,5 +1,9 @@
 @import "~theme/globals";
 
+:host {
+    --item-divider-font-size: var(--item-divider-font-size-big);
+}
+
 :host ::ng-deep ion-item-divider {
     display: none !important;
 }
@@ -11,6 +15,10 @@
     --internal-loading-inline-min-height: calc(100vh - var(--core-header-toolbar-height) - var(--bottom-tabs-size) - 2px);
 }
 
+core-block ::ng-deep ion-card.addon-block-myoverview {
+    --border-width: 0;
+}
+
 @if ($core-dashboard-logo) {
     .in-toolbar h1 .core-header-logo {
         max-height: calc(var(--core-header-toolbar-height) - 24px);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 2697f08fd..88cdbce8f 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -225,7 +225,8 @@
     --item-divider-background: var(--ion-item-background);
     --item-divider-color: var(--text-color);
     --item-divider-border-width: 0px;
-    --item-divider-font-size: 20px;
+    --item-divider-font-size: 16px;
+    --item-divider-font-size-big: 20px;
     ion-item-divider, ion-item.divider {
         --background: var(--item-divider-background);
         --color: var(--item-divider-color);

From 4b075f0e6d5f86d1aabc11ac523174322630e09f 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:03:54 +0100
Subject: [PATCH 07/14] MOBILE-3814 style: Remove drop shadows and add borders

---
 src/core/components/tabs/tabs.scss                    |  4 +---
 .../components/module-info/course-module-info.scss    |  1 -
 .../module-navigation/module-navigation.scss          |  2 +-
 .../components/user-menu-button/user-menu-button.scss |  7 +------
 .../components/user-menu-button/user-menu-button.ts   |  2 +-
 src/core/features/mainmenu/pages/menu/menu.scss       |  2 --
 src/theme/theme.light.scss                            | 11 ++++++-----
 7 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss
index ff1c17bfe..4b1ec3b9b 100644
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@@ -20,9 +20,7 @@
         @include safe-area-padding-end(null, 0px);
         height: var(--height);
         color: var(--tabs-color);
-        -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
-        filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
-        border: 0;
+        border-bottom: 1px solid var(--stroke);
         display: flex;
         align-items: flex-end;
 
diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss
index f540001d2..4ded49790 100644
--- a/src/core/features/course/components/module-info/course-module-info.scss
+++ b/src/core/features/course/components/module-info/course-module-info.scss
@@ -2,7 +2,6 @@
 
 :host {
     display: block;
-    box-shadow: 0px 3px 3px rgba(var(--drop-shadow));
     margin-bottom: 8px;
     padding-bottom: 1px; // To allow margins inside.
     background-color: var(--contrast-background);
diff --git a/src/core/features/course/components/module-navigation/module-navigation.scss b/src/core/features/course/components/module-navigation/module-navigation.scss
index 4dfc9e0ea..823c18328 100644
--- a/src/core/features/course/components/module-navigation/module-navigation.scss
+++ b/src/core/features/course/components/module-navigation/module-navigation.scss
@@ -11,7 +11,7 @@
     display: block;
     bottom: 0;
     z-index: 3;
-    box-shadow: 0px -3px 3px rgba(var(--drop-shadow));
+    border-top: 1px solid var(--stroke);
 
     @include core-transition(all, 200ms);
 
diff --git a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss
index 85bb76e70..d9faceaac 100644
--- a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss
+++ b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss
@@ -6,12 +6,7 @@ core-user-avatar {
     display: none;
 }
 
-:host-context(ion-toolbar) core-user-avatar ::ng-deep img {
-    padding: 2px !important;
-    border: 1px solid var(--color);
-}
-
+:host-context(ion-toolbar) core-user-avatar ::ng-deep img,
 :host-context(ion-tab-bar) core-user-avatar ::ng-deep img {
     padding: 2px !important;
-    border: 1px solid var(--color);
 }
diff --git a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
index a27782b73..ce23461e3 100644
--- a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
+++ b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
@@ -58,7 +58,7 @@ export class CoreMainMenuUserButtonComponent implements OnInit {
 
         CoreDomUtils.openSideModal<void>({
             component: CoreMainMenuUserMenuComponent,
-            cssClass: 'core-modal-lateral-sm',
+            cssClass: 'core-modal-lateral',
         });
     }
 
diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss
index b0302fbde..e6e0b7fea 100644
--- a/src/core/features/mainmenu/pages/menu/menu.scss
+++ b/src/core/features/mainmenu/pages/menu/menu.scss
@@ -5,7 +5,6 @@
 
     ion-tab-bar {
         height: var(--menutabbar-size);
-        box-shadow: 0px -3px 3px rgba(var(--drop-shadow));
     }
 
     @if ($core-always-show-main-menu) {
@@ -83,7 +82,6 @@
             height: calc(100% - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
             flex-direction: column;
             @include border-end(var(--border));
-            box-shadow: 3px 0 3px rgba(var(--drop-shadow));
             border-top: 0;
             justify-content: flex-start;
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 88cdbce8f..d811e2466 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -121,8 +121,8 @@
 
     --core-header-toolbar-button-image-size: var(--a11y-min-target-size);
     --core-header-toolbar-background: var(--white);
-    --core-header-toolbar-border-width: 3px;
-    --core-header-toolbar-border-color: var(--brand);
+    --core-header-toolbar-border-width: 1px;
+    --core-header-toolbar-border-color: var(--stroke);
     --core-header-toolbar-color: var(--gray-900);
     --core-header-toolbar-height: 56px;
     html.ios {
@@ -146,6 +146,10 @@
         }
     }
 
+    ion-header::after {
+        display: none;
+    }
+
     ion-header.header-ios ion-toolbar:last-of-type {
         --border-width: 0 0 var(--core-header-toolbar-border-width) 0;
     }
@@ -301,9 +305,6 @@
 
     --drop-shadow: 0, 0, 0, 0.18;
 
-    --core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow));
-    --core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow));
-
     --core-question-correct-color: var(--success-shade);
     --core-question-correct-color-bg: var(--success-tint);
     --core-question-incorrect-color: var(--danger);

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 08/14] 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};

From 9b4e15efebb4453cc5e2b050b5bfeb6ab52b5cdc 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:43:06 +0100
Subject: [PATCH 09/14] MOBILE-3814 home: Add cards to improve site home
 styling

---
 .../features/sitehome/pages/index/index.html  | 58 +++++++++++--------
 .../features/sitehome/pages/index/index.scss  | 12 ++--
 src/theme/components/format-text.scss         |  2 +-
 3 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index 43e87b631..97f7ba85a 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@@ -55,12 +55,14 @@
 </ion-content>
 
 <ng-template #allCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()">
-        <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <h2>{{ 'core.courses.availablecourses' | translate}}</h2>
-        </ion-label>
-    </ion-item>
+    <ion-card>
+        <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()">
+            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <h2>{{ 'core.courses.availablecourses' | translate}}</h2>
+            </ion-label>
+        </ion-item>
+    </ion-card>
 </ng-template>
 
 <ng-template #news>
@@ -69,29 +71,35 @@
 </ng-template>
 
 <ng-template #categories>
-    <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
-        <ion-icon name="fas-folder" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <h2>{{ 'core.courses.categories' | translate}}</h2>
-        </ion-label>
-    </ion-item>
+    <ion-card>
+        <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
+            <ion-icon name="fas-folder" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <h2>{{ 'core.courses.categories' | translate}}</h2>
+            </ion-label>
+        </ion-item>
+    </ion-card>
 </ng-template>
 
 <ng-template #enrolledCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openMyCourses()">
-        <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true">
-        </ion-icon>
-        <ion-label>
-            <h2>{{ 'core.courses.mycourses' | translate}}</h2>
-        </ion-label>
-    </ion-item>
+    <ion-card>
+        <ion-item button class="ion-text-wrap" (click)="openMyCourses()">
+            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true">
+            </ion-icon>
+            <ion-label>
+                <h2>{{ 'core.courses.mycourses' | translate}}</h2>
+            </ion-label>
+        </ion-item>
+    </ion-card>
 </ng-template>
 
 <ng-template #courseSearch>
-    <ion-item button class="ion-text-wrap" (click)="openSearch()">
-        <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>
-            <h2>{{ 'core.courses.searchcourses' | translate}}</h2>
-        </ion-label>
-    </ion-item>
+    <ion-card>
+        <ion-item button class="ion-text-wrap" (click)="openSearch()">
+            <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <h2>{{ 'core.courses.searchcourses' | translate}}</h2>
+            </ion-label>
+        </ion-item>
+    </ion-card>
 </ng-template>
diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss
index 6193c059a..25fb8be63 100644
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/src/core/features/sitehome/pages/index/index.scss
@@ -4,18 +4,16 @@ ion-item ion-icon {
     display: inline-block;
     border-radius: var(--module-icon-radius);
     padding: 0.7rem;
-    background-color: $gray-100;
+    background-color: var(--gray-100);
     line-height: var(--size);
     --margin-end: 1rem;
     @include margin-horizontal(null, var(--margin-end));
 }
 
-core-course-module.core-sitehome-news ::ng-deep ion-card {
-    --border-width: 0;
-    margin: 0;
-    padding: 0;
-}
-
 core-spacer ::ng-deep .item {
     border-radius: var(--medium-radius);
+    --horizontal-margin: 10px;
+    margin-left: var(--horizontal-margin);
+    margin-right: var(--horizontal-margin);
+    width: auto;
 }
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index a5fe5391d..1cfaad8c7 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -179,7 +179,7 @@ core-format-text {
         position: absolute;
         @include position(null, 10px, 10px, null);
         color: var(--ion-text-color);
-        border-radius: var(--small-radius);
+        border-radius: var(--huge-radius);
         background-color: var(--core-format-text-viewer-icon-background);
         display: flex;
 

From 15ef9547bad47ea6645fe81ff3222764cd332e5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Feb 2022 12:21:52 +0100
Subject: [PATCH 10/14] MOBILE-3814 timeline: Adapt styles

---
 .../events/addon-block-timeline-events.html   |  7 ++++---
 .../timeline/components/events/events.scss    | 19 +++++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 9f6f7b0e2..68a2ac180 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -2,7 +2,8 @@
     <ion-label class="ion-text-wrap">
         <h3>
             <span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
-            <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id"></core-format-text>
+            <core-format-text [text]="course.displayname || course.fullname" contextLevel="course" [contextInstanceId]="course.id">
+            </core-format-text>
         </h3>
     </ion-label>
 </ion-item>
@@ -20,7 +21,7 @@
                     <ion-col class="addon-block-timeline-activity-main ion-no-padding">
                         <ion-row class="ion-justify-content-between ion-align-items-center ion-nowrap ion-no-padding">
                             <ion-col class="addon-block-timeline-activity-time ion-no-padding">
-                                <ion-badge color="light">{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</ion-badge>
+                                <small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small>
                                 <core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
                                     [modname]="event.modulename">
                                 </core-mod-icon>
@@ -52,7 +53,7 @@
                         </ion-row>
                     </ion-col>
                     <ion-col class="addon-block-timeline-activity-action ion-no-padding" *ngIf="event.action?.actionable">
-                        <ion-button fill="clear" (click)="action($event, event.action.url)" [title]="event.action.name">
+                        <ion-button fill="outline" color="medium" (click)="action($event, event.action.url)" [title]="event.action.name">
                             {{event.action.name}}
                             <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
                                 {{event.action.itemcount}}
diff --git a/src/addons/block/timeline/components/events/events.scss b/src/addons/block/timeline/components/events/events.scss
index 48a4663f7..4de0930a9 100644
--- a/src/addons/block/timeline/components/events/events.scss
+++ b/src/addons/block/timeline/components/events/events.scss
@@ -13,13 +13,20 @@ h4.core-bold {
     font-weight: bold;
 }
 
-.addon-block-timeline-activity ion-badge {
-    @include margin-horizontal(0.25rem, 0.5rem);
-}
+.addon-block-timeline-activity {
+    ion-badge {
+        @include margin-horizontal(0.25rem, 0.5rem);
+    }
 
-.addon-block-timeline-activity core-mod-icon {
-    --margin-end: 0.5rem;
-    --margin-vertical: 0;
+    small {
+        @include margin-horizontal(null, 0.5rem);
+    }
+
+    core-mod-icon {
+        padding: 8px;
+        --margin-end: 0.5rem;
+        --margin-vertical: 0;
+    }
 }
 
 .addon-block-timeline-activity-time {

From 492278be00d3bae745cbc0a2729ff2f04428a9a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Feb 2022 12:30:41 +0100
Subject: [PATCH 11/14] MOBILE-3814 course: Move course summary button to
 toolbar

---
 .../components/format/core-course-format.html |  2 +-
 .../course/components/format/format.scss      |  5 ++++
 .../course/pages/contents/contents.html       |  3 --
 .../course/pages/contents/contents.ts         | 10 -------
 .../features/course/pages/index/index.html    | 28 ++++++++-----------
 5 files changed, 17 insertions(+), 31 deletions(-)

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 92471c075..33837629f 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -2,7 +2,7 @@
 <core-navbar-buttons slot="end" *ngIf="loaded">
     <core-context-menu>
         <core-context-menu-item [hidden]="!displayCourseIndex || !sections || !sections.length" [priority]="500"
-            [content]="'core.course.courseindex' | translate" (action)="openCourseIndex()" iconAction="menu">
+            [content]="'core.course.courseindex' | translate" (action)="openCourseIndex()" iconAction="fas-list-ul">
         </core-context-menu-item>
     </core-context-menu>
 </core-navbar-buttons>
diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss
index 8167ba66a..4567b6b78 100644
--- a/src/core/features/course/components/format/format.scss
+++ b/src/core/features/course/components/format/format.scss
@@ -10,3 +10,8 @@
         flex: 1;
     }
 }
+
+.course-section {
+    --padding-start: 12px;
+    --inner-padding-end: 12px;
+}
diff --git a/src/core/features/course/pages/contents/contents.html b/src/core/features/course/pages/contents/contents.html
index 88716c7ea..2648ff943 100644
--- a/src/core/features/course/pages/contents/contents.html
+++ b/src/core/features/course/pages/contents/contents.html
@@ -1,8 +1,5 @@
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item [priority]="1800" [content]="'core.course.coursesummary' | translate" (action)="openCourseSummary()"
-            iconAction="fas-info-circle">
-        </core-context-menu-item>
         <core-context-menu-item *ngFor="let item of courseMenuHandlers" [priority]="item.priority" (action)="openMenuItem(item)"
             [content]="item.data.title | translate" [iconAction]="item.data.icon" [class]="item.data.class">
         </core-context-menu-item>
diff --git a/src/core/features/course/pages/contents/contents.ts b/src/core/features/course/pages/contents/contents.ts
index 199599a4c..d93a3cb18 100644
--- a/src/core/features/course/pages/contents/contents.ts
+++ b/src/core/features/course/pages/contents/contents.ts
@@ -379,16 +379,6 @@ export class CoreCourseContentsPage implements OnInit, OnDestroy {
         }
     }
 
-    /**
-     * Open the course summary
-     */
-    openCourseSummary(): void {
-        CoreNavigator.navigateToSitePath(
-            `/course/${this.course.id}/preview`,
-            { params: { course: this.course, avoidOpenCourse: true } },
-        );
-    }
-
     /**
      * Opens a menu item registered to the delegate.
      *
diff --git a/src/core/features/course/pages/index/index.html b/src/core/features/course/pages/index/index.html
index 8ca38de7f..0187dc8e4 100644
--- a/src/core/features/course/pages/index/index.html
+++ b/src/core/features/course/pages/index/index.html
@@ -9,29 +9,23 @@
             </h1>
         </ion-title>
 
-        <ion-buttons slot="end"></ion-buttons>
+        <ion-buttons slot="end">
+            <ion-button fill="clear" (click)="openCourseSummary()" [attr.aria-label]="'core.course.coursesummary' | translate">
+                <ion-icon name="fas-info-circle" slot="icon-only" aria-hidden="true"></ion-icon>
+            </ion-button>
+        </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-item lines="full" class="core-format-progress-list ion-text-wrap collapsible-title">
+<ion-item class="core-format-progress-list ion-text-wrap collapsible-title list-item-limited-width">
     <ion-avatar slot="start" class="core-course-thumb" *ngIf="imageThumb">
         <img [src]="imageThumb" core-external-content alt="" />
     </ion-avatar>
     <ion-label>
-        <ion-row>
-            <ion-col>
-                <p *ngIf="category">
-                    <core-format-text [text]="category" contextLevel="coursecat" [contextInstanceId]="course!.categoryid">
-                    </core-format-text>
-                </p>
-                <h1>{{ title }}</h1>
-            </ion-col>
-            <ion-col size="auto" class="ion-align-self-center">
-                <ion-button fill="clear" (click)="openCourseSummary()" [attr.aria-label]="'core.course.coursesummary' | translate"
-                    color="dark">
-                    <ion-icon name="fas-info-circle" slot="icon-only" aria-hidden="true"></ion-icon>
-                </ion-button>
-            </ion-col>
-        </ion-row>
+        <p *ngIf="category">
+            <core-format-text [text]="category" contextLevel="coursecat" [contextInstanceId]="course!.categoryid">
+            </core-format-text>
+        </p>
+        <h1>{{ title }}</h1>
         <div class="core-course-progress" *ngIf="progress !== undefined">
             <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
             </core-progress-bar>

From f61a465c0a7ecbcfe678d2adca30f4716ea5b0fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Feb 2022 10:50:51 +0100
Subject: [PATCH 12/14] MOBILE-3814 course: Adapt course styles

---
 .../components/course-index/course-index.html |  4 +-
 .../components/course-index/course-index.scss | 16 ++++-
 .../components/course-index/course-index.ts   | 12 ++--
 .../module-info/core-course-module-info.html  |  2 +-
 .../module-info/course-module-info.scss       | 10 ++-
 .../components/module/core-course-module.html | 67 ++++++++++---------
 .../course/components/module/module.scss      | 24 +++++--
 .../pages/module-preview/module-preview.html  | 55 +++++++--------
 .../module-preview/module-preview.page.ts     |  1 +
 .../pages/module-preview/module-preview.scss  | 15 +++++
 .../course-list-item/course-list-item.ts      |  2 +-
 src/core/features/courses/pages/my/my.scss    |  1 +
 .../features/sitehome/pages/index/index.scss  |  1 +
 src/theme/globals.variables.scss              |  2 +-
 src/theme/theme.base.scss                     |  4 +-
 src/theme/theme.dark.scss                     |  7 +-
 16 files changed, 135 insertions(+), 88 deletions(-)
 create mode 100644 src/core/features/course/pages/module-preview/module-preview.scss

diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index a994ca87e..0d27a9a42 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -13,7 +13,7 @@
 <ion-content>
     <ion-list id="core-course-section-selector" role="listbox" aria-labelledby="core-course-section-selector-label">
         <ng-container *ngFor="let section of sectionsToRender">
-            <ion-item *ngIf="allSectionId == section.id" class="ion-text-wrap divider core-course-index-all"
+            <ion-item *ngIf="allSectionId == section.id" class="divider core-course-index-all"
                 (click)="selectSectionOrModule($event, section.id)" button [class.item-current]="selectedId === section.id" detail="false">
                 <ion-label>
                     <h2>
@@ -23,7 +23,7 @@
                 </ion-label>
             </ion-item>
             <ng-container *ngIf="allSectionId != section.id">
-                <ion-item class="ion-text-wrap divider section" (click)="selectSectionOrModule($event, section.id)" button
+                <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
                     [class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0" detail="false"
                     sticky="true">
                     <ion-icon *ngIf="section.hasVisibleModules" [name]="section.expanded ? 'fas-chevron-down' : 'fas-chevron-right'"
diff --git a/src/core/features/course/components/course-index/course-index.scss b/src/core/features/course/components/course-index/course-index.scss
index f9ee8c8ba..d4862dd4c 100644
--- a/src/core/features/course/components/course-index/course-index.scss
+++ b/src/core/features/course/components/course-index/course-index.scss
@@ -22,15 +22,25 @@ ion-item::part(native) {
 
 ion-icon {
     margin: 0;
-    @include padding(12px, 32px, 12px, 16px);
+    @include padding(12px, 16px, 12px, 16px);
 }
 
 ion-item.core-course-index-all::part(native) {
     --padding-start: 16px;
 }
 
-ion-item.item-current ion-icon.expandable-status-icon {
-    @include padding(null, null, null, 11px);
+ion-item.item.item-current {
+    --background: var(--primary);
+    --color: var(--primary-contrast);
+    border: 0;
+
+    ion-badge {
+        border: 1px solid var(--primary-contrast);
+    }
+
+    ::ng-deep ion-icon {
+        color: var(--primary-contrast);
+    }
 }
 
 ion-icon.restricted {
diff --git a/src/core/features/course/components/course-index/course-index.ts b/src/core/features/course/components/course-index/course-index.ts
index bbc2601c1..a36cee588 100644
--- a/src/core/features/course/components/course-index/course-index.ts
+++ b/src/core/features/course/components/course-index/course-index.ts
@@ -23,7 +23,6 @@ import { CoreCourseFormatDelegate } from '@features/course/services/format-deleg
 import { CoreCourseAnyCourseData } from '@features/courses/services/courses';
 import { IonContent } from '@ionic/angular';
 import { CoreDomUtils } from '@services/utils/dom';
-import { CoreUtils } from '@services/utils/utils';
 import { ModalController } from '@singletons';
 
 /**
@@ -62,12 +61,11 @@ export class CoreCourseCourseIndexComponent implements OnInit {
         }
 
         let completionEnabled = !!this.course.enablecompletion;
-        if (completionEnabled && 'courseformatoptions' in this.course && this.course.courseformatoptions) {
-            const formatOptions = CoreUtils.objectToKeyValueMap(this.course.courseformatoptions, 'name', 'value');
-
-            if (formatOptions) {
-                completionEnabled = !!formatOptions.completionusertracked;
-            }
+        if (completionEnabled && 'completionusertracked' in this.course && this.course.completionusertracked !== undefined) {
+            completionEnabled = this.course.completionusertracked;
+        }
+        if (completionEnabled && 'showcompletionconditions' in this.course && this.course.showcompletionconditions !== undefined) {
+            completionEnabled = this.course.showcompletionconditions;
         }
 
         const currentSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, this.sections);
diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html
index 8ea74f89a..256f2c789 100644
--- a/src/core/features/course/components/module-info/core-course-module-info.html
+++ b/src/core/features/course/components/module-info/core-course-module-info.html
@@ -20,7 +20,7 @@
 </ion-item>
 <ng-content select="[description]"></ng-content>
 
-<ion-item class="ion-text-wrap core-module-dates" *ngIf="showCompletion && (module.dates?.length ||
+<ion-item class="ion-text-wrap" *ngIf="showCompletion && (module.dates?.length ||
 (module.completiondata && module.completiondata.isautomatic && module.uservisible))">
     <ion-label>
         <!-- Activity dates. -->
diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss
index 4ded49790..98f6c87d4 100644
--- a/src/core/features/course/components/module-info/course-module-info.scss
+++ b/src/core/features/course/components/module-info/course-module-info.scss
@@ -16,8 +16,14 @@
         align-self: flex-start;
     }
 
-    .core-module-dates ion-icon {
-        @include margin-horizontal(null, 8px);
+    .core-module-dates {
+        background: var(--light);
+        border-radius: var(--small-radius);
+        padding: 8px;
+
+        ion-icon {
+            @include margin-horizontal(null, 8px);
+        }
     }
 
 }
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index fff96491f..e20fbae5c 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -3,7 +3,6 @@
         <ion-item id="core-course-module-{{module.id}}" detail="false"
             class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
             (click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" [ngClass]="{
-                'has-module-info': hasInfo,
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
             }" [button]="module.handlerData.action && module.uservisible">
@@ -19,24 +18,26 @@
                     </core-format-text>
                 </p>
 
-                <!-- Basic module completion. -->
-                <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
-                    [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
-                    [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)" mode="basic">
-                </core-course-module-completion>
+                <div class="core-module-additional-info">
+                    <!-- Basic module completion. -->
+                    <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
+                        [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
+                        [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)" mode="basic">
+                    </core-course-module-completion>
 
-                <ion-chip *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
-                    class="ion-text-wrap ion-text-start" [outline]="true">
-                    <ion-label><span [innerHTML]="module.handlerData.extraBadge"></span></ion-label>
-                </ion-chip>
+                    <ion-chip *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
+                        class="ion-text-wrap ion-text-start" [outline]="true">
+                        <ion-label><span [innerHTML]="module.handlerData.extraBadge"></span></ion-label>
+                    </ion-chip>
 
-                <!-- Hidden badges -->
-                <ion-badge color="warning" *ngIf="module.visible === 0 && (!section || section.visible)">
-                    {{ 'core.course.hiddenfromstudents' | translate }}
-                </ion-badge>
-                <ion-badge color="warning" *ngIf="module.visible !== 0 && module.isStealth">
-                    {{ 'core.course.hiddenoncoursepage' | translate }}
-                </ion-badge>
+                    <!-- Hidden badges -->
+                    <ion-badge color="warning" *ngIf="module.visible === 0 && (!section || section.visible)">
+                        {{ 'core.course.hiddenfromstudents' | translate }}
+                    </ion-badge>
+                    <ion-badge color="warning" *ngIf="module.visible !== 0 && module.isStealth">
+                        {{ 'core.course.hiddenoncoursepage' | translate }}
+                    </ion-badge>
+                </div>
             </ion-label>
             <!-- Buttons. -->
             <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
@@ -72,24 +73,24 @@
                     [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
                 </core-course-module-completion>
 
-                <!-- Activity dates. -->
-                <div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
-                    <p *ngFor="let date of module.dates">
-                        <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon><strong>{{ date.label }}</strong> {{ date.timestamp *
-                        1000 | coreFormatDate:'strftimedatetime' }}
-                    </p>
-                </div>
+                <div class="core-module-dates-availabilityinfo"
+                    *ngIf="(showActivityDates && module.dates && module.dates.length) || module.availabilityinfo">
+                    <!-- Activity dates. -->
+                    <div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
+                        <p *ngFor="let date of module.dates">
+                            <ion-icon name="fas-calendar" aria-hidden="true"></ion-icon><strong>{{ date.label }}</strong> {{ date.timestamp
+                            *
+                            1000 | coreFormatDate:'strftimedatetime' }}
+                        </p>
+                    </div>
 
-                <!-- Availability info -->
-                <div *ngIf="module.availabilityinfo">
-                    <ion-chip class="core-module-availabilityinfo">
+                    <!-- Availability info -->
+                    <div *ngIf="module.availabilityinfo" class="core-module-availabilityinfo">
                         <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-                        <ion-label>
-                            <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
-                                [courseId]="module.course">
-                            </core-format-text>
-                        </ion-label>
-                    </ion-chip>
+                        <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
+                            [courseId]="module.course">
+                        </core-format-text>
+                    </div>
                 </div>
 
             </ion-label>
diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss
index dc01fae72..f398ee1fa 100644
--- a/src/core/features/course/components/module/module.scss
+++ b/src/core/features/course/components/module/module.scss
@@ -35,13 +35,29 @@
         .core-module-buttons core-course-module-completion {
             text-align: center;
         }
+
+        .core-module-additional-info {
+            display: flex;
+            align-items: center;
+        }
     }
 
     .core-course-module-info {
+        .core-module-dates-availabilityinfo {
+            background: var(--light);
+            border-radius: var(--small-radius);
+            padding: 8px;
+        }
+
+        .core-module-dates + .core-module-availabilityinfo {
+            border-top: 1px solid var(--stroke);
+            padding-top: 8px;
+        }
+
         .core-module-availabilityinfo {
             font-size: 90%;
-            ul {
-                margin-block-start: 0.5em;
+            ::ng-deep  ul {
+                margin-top: 0.5em;
             }
         }
     }
@@ -57,10 +73,6 @@
         margin-top: 0px;
     }
 
-    .core-module-main-item.has-module-info {
-        --inner-border-width: 0px;
-    }
-
     .core-module-availabilityinfo  ion-icon,
     .core-module-dates ion-icon {
         @include margin-horizontal(null, 8px);
diff --git a/src/core/features/course/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index f302e2299..3fceb9d64 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -27,38 +27,39 @@
         <core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
             [componentId]="module.id" [expandDescription]="true">
 
-            <div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
-                <ion-chip *ngIf="module.handlerData?.extraBadge" [color]="module.handlerData?.extraBadgeColor"
-                    class="ion-text-wrap ion-text-start" [outline]="true">
-                    <ion-label><span [innerHTML]="module.handlerData?.extraBadge"></span></ion-label>
-                </ion-chip>
-            </div>
+            <ion-item class="ion-text-wrap" *ngIf="module.handlerData?.extraBadge ||
+                (module.visible === 0 && (!section || section.visible)) ||
+                    (module.visible !== 0 && module.isStealth) ||
+                    module.availabilityinfo">
+                <ion-label>
+                    <div class="ion-padding" *ngIf="module.handlerData?.extraBadge">
+                        <ion-chip *ngIf="module.handlerData?.extraBadge" [color]="module.handlerData?.extraBadgeColor"
+                            class="ion-text-wrap ion-text-start" [outline]="true">
+                            <ion-label><span [innerHTML]="module.handlerData?.extraBadge"></span></ion-label>
+                        </ion-chip>
+                    </div>
 
-            <!-- Hidden badges -->
-            <div *ngIf="module.visible === 0 && (!section || section.visible)">
-                <ion-chip color="warning">
-                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
-                </ion-chip>
-            </div>
-            <div *ngIf="module.visible !== 0 && module.isStealth">
-                <ion-chip color="warning">
-                    <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
-                </ion-chip>
-            </div>
+                    <!-- Hidden badges -->
+                    <div *ngIf="module.visible === 0 && (!section || section.visible)">
+                        <ion-badge color="warning">
+                            {{ 'core.course.hiddenfromstudents' | translate }}
+                        </ion-badge>
+                    </div>
+                    <div *ngIf="module.visible !== 0 && module.isStealth">
+                        <ion-badge color="warning">
+                            {{ 'core.course.hiddenoncoursepage' | translate }}
+                        </ion-badge>
+                    </div>
 
-            <!-- Availability info -->
-            <div *ngIf="module.availabilityinfo">
-                <ion-chip class="core-module-availabilityinfo">
-                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-                    <ion-label>
+                    <!-- Availability info -->
+                    <div *ngIf="module.availabilityinfo" class="core-module-availabilityinfo">
+                        <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
                         <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
                             [courseId]="module.course">
                         </core-format-text>
-                    </ion-label>
-                </ion-chip>
-            </div>
+                    </div>
+                </ion-label>
+            </ion-item>
 
             <core-course-unsupported-module *ngIf="unsupported" [module]="module" [courseId]="courseId"></core-course-unsupported-module>
         </core-course-module-info>
diff --git a/src/core/features/course/pages/module-preview/module-preview.page.ts b/src/core/features/course/pages/module-preview/module-preview.page.ts
index 620b1f981..258a1fe18 100644
--- a/src/core/features/course/pages/module-preview/module-preview.page.ts
+++ b/src/core/features/course/pages/module-preview/module-preview.page.ts
@@ -27,6 +27,7 @@ import { CoreUtils } from '@services/utils/utils';
 @Component({
     selector: 'page-core-course-module-preview',
     templateUrl: 'module-preview.html',
+    styleUrls: ['module-preview.scss'],
 })
 export class CoreCourseModulePreviewPage implements OnInit {
 
diff --git a/src/core/features/course/pages/module-preview/module-preview.scss b/src/core/features/course/pages/module-preview/module-preview.scss
new file mode 100644
index 000000000..21bd09377
--- /dev/null
+++ b/src/core/features/course/pages/module-preview/module-preview.scss
@@ -0,0 +1,15 @@
+@import "~theme/globals";
+
+.core-module-availabilityinfo {
+    background: var(--light);
+    border-radius: var(--small-radius);
+    padding: 8px;
+    font-size: 90%;
+    ::ng-deep  ul {
+        margin-top: 0.5em;
+    }
+
+    ion-icon {
+        @include margin-horizontal(null, 8px);
+    }
+}
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.ts b/src/core/features/courses/components/course-list-item/course-list-item.ts
index 46a7defb0..73d73d61e 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.ts
+++ b/src/core/features/courses/components/course-list-item/course-list-item.ts
@@ -160,7 +160,7 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
 
             const tint = CoreColors.lighter(this.course.color, 50);
             this.element.style.setProperty('--course-color-tint', tint);
-        } else {
+        } else if(this.course.colorNumber !== undefined) {
             this.element.classList.add('course-color-' + this.course.colorNumber);
         }
     }
diff --git a/src/core/features/courses/pages/my/my.scss b/src/core/features/courses/pages/my/my.scss
index 5586e1140..1f5841edc 100644
--- a/src/core/features/courses/pages/my/my.scss
+++ b/src/core/features/courses/pages/my/my.scss
@@ -13,6 +13,7 @@
 
 core-block ::ng-deep ion-card.addon-block-myoverview {
     --border-width: 0;
+    --background: transparent;
 }
 
 @if ($core-dashboard-logo) {
diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss
index 25fb8be63..f77fee9ef 100644
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/src/core/features/sitehome/pages/index/index.scss
@@ -5,6 +5,7 @@ ion-item ion-icon {
     border-radius: var(--module-icon-radius);
     padding: 0.7rem;
     background-color: var(--gray-100);
+    color: var(--gray-900);
     line-height: var(--size);
     --margin-end: 1rem;
     @include margin-horizontal(null, var(--margin-end));
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 6b19a3d73..21fe2d0dd 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -36,7 +36,7 @@ $background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default;
 
 $ion-item-background:      $white !default;
 $ion-item-background-rgb:  color-to-rgb-list($ion-item-background) !default;
-$ion-item-background-dark: mix(#ffffff, #000000, 20%) !default; // #333333
+$ion-item-background-dark: $gray-900 !default;
 $ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
 
 $primary:    $blue !default;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 17af36413..24d609fcf 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -415,8 +415,9 @@ ion-alert {
 }
 
 // Ionic list.
-ion-list.list-md {
+ion-list {
     padding: 0;
+    --ion-item-background: transparent;
 }
 
 // Safe areas
@@ -1249,7 +1250,6 @@ ion-item.item-input ion-input.has-focus {
 ion-item-divider.item,
 ion-item.item.divider {
     --inner-padding-end: 8px;
-    background: var(--background);
     min-height: var(--min-height);
     border-bottom-width: var(--item-divider-border-width);
     --border-width: var(--item-divider-border-width);
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 6e88cfc14..1d55e6631 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -76,12 +76,13 @@
     --core-progressbar-text-color: var(--gray-100);
 
     --ion-item-background: #{$ion-item-background-dark};
-    --ion-item-detail-icon-color: var(--white);
+    --item-divider-background: var(--ion-item-background);
     --item-divider-color: var(--text-color);
-    --spacer-background: var(--gray-100);
+    --spacer-background: var(--gray-700);
 
     --core-combobox-background: var(--ion-item-background);
-    --core-combobox-color: var(--white);
+    --core-combobox-color: var(--gray-100);
+    --core-combobox-border-color: var(--stroke);
 
     --core-login-background: var(--gray-900);
     --core-login-text-color: var(--white);

From abfc4ffb386127ed302f4d33a086307b57734764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Feb 2022 13:24:18 +0100
Subject: [PATCH 13/14] MOBILE-3814 styles: Animate expandable chevrons

---
 .../group-conversations.html                    | 17 ++++++-----------
 .../pages/new-discussion/new-discussion.html    |  6 ++----
 .../components/course-index/course-index.html   | 11 ++++++-----
 .../components/course-index/course-index.scss   |  4 ++--
 .../features/grades/pages/course/course.html    |  4 ++--
 .../features/grades/pages/course/course.scss    |  5 +++++
 src/theme/theme.base.scss                       | 12 +++++++++++-
 src/theme/theme.light.scss                      |  9 +++++----
 8 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 6b476b60f..e6165166a 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -40,11 +40,9 @@
                     [attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
                     [attr.aria-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading"
                     detail="false">
-                    <ion-icon *ngIf="!favourites.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                        class="expandable-status-icon">
+                    <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
+                        [class.expandable-status-icon-expanded]="favourites.expanded">
                     </ion-icon>
-                    <ion-icon *ngIf="favourites.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
-                        class="expandable-status-icon"></ion-icon>
                     <ion-label>
                         <h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2>
                     </ion-label>
@@ -76,9 +74,8 @@
                 <ion-item button class="divider ion-text-wrap" (click)="toggle(group)" sticky="true"
                     [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-expanded]="group.expanded"
                     aria-controls="addon-messages-groupconversations-group" role="heading" detail="false">
-                    <ion-icon *ngIf="!group.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                        class="expandable-status-icon"></ion-icon>
-                    <ion-icon *ngIf="group.expanded" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
+                    <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
+                        [class.expandable-status-icon-expanded]="group.expanded">
                     </ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2>
@@ -111,11 +108,9 @@
                     [attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
                     [attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading"
                     detail="false">
-                    <ion-icon *ngIf="!individual.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                        class="expandable-status-icon">
+                    <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
+                        [class.expandable-status-icon-expanded]="individual.expanded">
                     </ion-icon>
-                    <ion-icon *ngIf="individual.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
-                        class="expandable-status-icon"></ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
                     </ion-label>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index e8b2c7232..85ca66dcf 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -34,10 +34,8 @@
             <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" role="heading"
                 aria-controls="addon-mod-forum-new-discussion-advanced">
-                <ion-icon *ngIf="!advanced" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                    class="expandable-status-icon"></ion-icon>
-                <ion-icon *ngIf="advanced" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
-                </ion-icon>
+                <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
+                    [class.expandable-status-icon-expanded]="advanced"></ion-icon>
                 <ion-label>
                     <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
                 </ion-label>
diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index 0d27a9a42..e70f1b6fb 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -26,10 +26,11 @@
                 <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
                     [class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0" detail="false"
                     sticky="true">
-                    <ion-icon *ngIf="section.hasVisibleModules" [name]="section.expanded ? 'fas-chevron-down' : 'fas-chevron-right'"
-                        flip-rtl slot="start" class="expandable-status-icon" (click)="toggleExpand($event, section)"
+                    <ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
+                        class="expandable-status-icon" (click)="toggleExpand($event, section)"
                         [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
-                        [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id">
+                        [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"
+                        [class.expandable-status-icon-expanded]="section.expanded">
                     </ion-icon>
                     <ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
                     </ion-icon>
@@ -45,8 +46,8 @@
                 </ion-item>
                 <ng-container *ngIf="section.expanded">
                     <ng-container *ngFor="let module of section.modules">
-                        <ion-item [class.item-dimmed]="!module.visible" (click)="selectSectionOrModule($event, section.id, module.id)"
-                            button>
+                        <ion-item class="module" [class.item-dimmed]="!module.visible"
+                            (click)="selectSectionOrModule($event, section.id, module.id)" button>
                             <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
                                 slot="start" aria-hidden="true"></ion-icon>
                             <ion-icon class="completioninfo completion_incomplete" name="far-circle" *ngIf="module.completionStatus === 0"
diff --git a/src/core/features/course/components/course-index/course-index.scss b/src/core/features/course/components/course-index/course-index.scss
index d4862dd4c..169950d9d 100644
--- a/src/core/features/course/components/course-index/course-index.scss
+++ b/src/core/features/course/components/course-index/course-index.scss
@@ -16,11 +16,11 @@ ion-icon.completioninfo {
     width: 18px;
 }
 
-ion-item::part(native) {
+ion-item.module::part(native) {
     --padding-start: 0;
 }
 
-ion-icon {
+ion-item.module ion-icon {
     margin: 0;
     @include padding(12px, 16px, 12px, 16px);
 }
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index 053b16cd1..c484de9f0 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -36,8 +36,8 @@
                                 <td *ngIf="row.itemtype == 'category'" class="core-grades-table-category" [attr.rowspan]="row.rowspan">
                                 </td>
                                 <th class="core-grades-table-gradeitem ion-text-start" [attr.colspan]="row.colspan">
-                                    <ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start"
-                                        [name]="row.expanded ? 'fas-chevron-down' : 'fas-chevron-right'" class="expandable-status-icon">
+                                    <ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start" name="fas-chevron-right"
+                                        class="expandable-status-icon" [class.expandable-status-icon-expanded]="row.expanded">
                                     </ion-icon>
                                     <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
                                     </ion-icon>
diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss
index dec25329c..32bb2b00a 100644
--- a/src/core/features/grades/pages/course/course.scss
+++ b/src/core/features/grades/pages/course/course.scss
@@ -96,6 +96,11 @@
         .expandable-status-icon {
             font-size: 14px;
             @include margin-horizontal(0, 2px);
+            @include core-transition(transform, 200ms);
+
+            &.expandable-status-icon-expanded {
+                transform: var(--rotate-expandable);
+            }
         }
 
     }
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 24d609fcf..38dc3ccd9 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -416,7 +416,7 @@ ion-alert {
 
 // Ionic list.
 ion-list {
-    padding: 0;
+    padding: 0 !important;
     --ion-item-background: transparent;
 }
 
@@ -1264,6 +1264,16 @@ ion-item.item.divider {
     ion-label h2.big {
         font-size: var(--item-divider-font-size-big);
     }
+
+    .expandable-status-icon {
+        font-size: 18px;
+        @include core-transition(transform, 200ms);
+        @include margin-horizontal(null, 16px);
+
+        &.expandable-status-icon-expanded {
+            transform: var(--rotate-expandable);
+        }
+    }
 }
 
 // Change default outline.
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 691831088..9a0b55bc0 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -236,10 +236,6 @@
         --background: var(--item-divider-background);
         --color: var(--item-divider-color);
         --min-height: var(--item-divider-min-height);
-
-        .expandable-status-icon {
-            font-size: 18px;
-        }
     }
 
     --spacer-background: var(--light);
@@ -327,6 +323,11 @@
     --core-dd-question-radius: 10px;
     --core-dd-question-border: var(--medium);
 
+    --rotate-expandable: rotate(90deg);
+    &[dir=rtl] {
+        --rotate-expandable: rotate(-90deg);
+    }
+
     @for $i from 0 to length($core-course-image-background) {
         --core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)};
         --core-course-color-#{$i}-tint: #{get-color-tint(nth($core-course-image-background, $i + 1))};

From b4f67f7d6ee623fd10c415d757de44932d9265d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Feb 2022 17:14:06 +0100
Subject: [PATCH 14/14] MOBILE-3814 site: Add cards to site list

---
 .../features/login/components/sites/sites.html   | 16 ++++++++--------
 .../features/login/components/sites/sites.ts     |  1 +
 src/core/features/login/pages/sites/sites.html   |  8 ++++----
 src/core/features/login/pages/sites/sites.ts     |  1 +
 src/core/features/login/sitelist.scss            | 10 ++++++++++
 5 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 src/core/features/login/sitelist.scss

diff --git a/src/core/features/login/components/sites/sites.html b/src/core/features/login/components/sites/sites.html
index 66eea2e81..8ddf94c02 100644
--- a/src/core/features/login/components/sites/sites.html
+++ b/src/core/features/login/components/sites/sites.html
@@ -20,9 +20,9 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="loaded">
-        <ion-list>
-            <ng-container *ngIf="accountsList.currentSite">
-                <ion-item-divider sticky="true">
+        <ion-list class="core-sitelist">
+            <ion-card *ngIf="accountsList.currentSite">
+                <ion-item-divider sticky="true" class="core-sitelist-sitename">
                     <ion-label>
                         <h2>
                             <core-format-text [text]="accountsList.currentSite.siteName" clean="true"
@@ -34,7 +34,7 @@
                     </ion-label>
                 </ion-item-divider>
 
-                <ion-item detail="false" class="item-current">
+                <ion-item detail="false">
                     <ion-avatar slot="start">
                         <img [src]="accountsList.currentSite.avatar" core-external-content [siteId]="accountsList.currentSite.id"
                             alt="{{ 'core.pictureof' | translate:{$a: accountsList.currentSite.fullName} }}"
@@ -47,10 +47,10 @@
                 </ion-item>
 
                 <ng-container *ngTemplateOutlet="siteList; context: {sites: accountsList.sameSite}"></ng-container>
-            </ng-container>
+            </ion-card>
 
-            <ng-container *ngFor="let sites of accountsList.otherSites">
-                <ion-item-divider sticky="true" *ngIf="sites[0]">
+            <ion-card *ngFor="let sites of accountsList.otherSites">
+                <ion-item-divider sticky="true" *ngIf="sites[0]" class="core-sitelist-sitename">
                     <ion-label>
                         <h2>
                             <core-format-text [text]="sites[0].siteName" clean="true" [siteId]="sites[0].id"></core-format-text>
@@ -60,7 +60,7 @@
                 </ion-item-divider>
 
                 <ng-container *ngTemplateOutlet="siteList; context: {sites: sites}"></ng-container>
-            </ng-container>
+            </ion-card>
 
         </ion-list>
     </core-loading>
diff --git a/src/core/features/login/components/sites/sites.ts b/src/core/features/login/components/sites/sites.ts
index 1f14b51a7..899b49741 100644
--- a/src/core/features/login/components/sites/sites.ts
+++ b/src/core/features/login/components/sites/sites.ts
@@ -28,6 +28,7 @@ import { ModalController } from '@singletons';
 @Component({
     selector: 'core-login-sites',
     templateUrl: 'sites.html',
+    styleUrls: ['../../sitelist.scss'],
     animations: [CoreAnimations.SLIDE_IN_OUT, CoreAnimations.SHOW_HIDE],
 })
 export class CoreLoginSitesComponent implements OnInit {
diff --git a/src/core/features/login/pages/sites/sites.html b/src/core/features/login/pages/sites/sites.html
index 994b7e7df..d7a06fa24 100644
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@@ -21,9 +21,9 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="loaded">
-        <ion-list>
-            <ng-container *ngFor="let sites of accountsList.otherSites">
-                <ion-item-divider sticky="true" *ngIf="sites[0]">
+        <ion-list class="core-sitelist">
+            <ion-card *ngFor="let sites of accountsList.otherSites">
+                <ion-item-divider sticky="true" *ngIf="sites[0]" class="core-sitelist-sitename">
                     <ion-label>
                         <h2>
                             <core-format-text [text]="sites[0].siteName" clean="true" [siteId]="sites[0].id"></core-format-text>
@@ -50,7 +50,7 @@
                         <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
                 </ion-item>
-            </ng-container>
+            </ion-card>
         </ion-list>
     </core-loading>
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
diff --git a/src/core/features/login/pages/sites/sites.ts b/src/core/features/login/pages/sites/sites.ts
index a6d3e1eeb..6184e717e 100644
--- a/src/core/features/login/pages/sites/sites.ts
+++ b/src/core/features/login/pages/sites/sites.ts
@@ -27,6 +27,7 @@ import { CoreAnimations } from '@components/animations';
 @Component({
     selector: 'page-core-login-sites',
     templateUrl: 'sites.html',
+    styleUrls: ['../../sitelist.scss'],
     animations: [CoreAnimations.SLIDE_IN_OUT, CoreAnimations.SHOW_HIDE],
 })
 export class CoreLoginSitesPage implements OnInit {
diff --git a/src/core/features/login/sitelist.scss b/src/core/features/login/sitelist.scss
new file mode 100644
index 000000000..22a83f842
--- /dev/null
+++ b/src/core/features/login/sitelist.scss
@@ -0,0 +1,10 @@
+ion-list.core-sitelist {
+    .core-sitelist-sitename {
+        ion-label {
+            margin-top: 8px;
+            margin-bottom: 8px;
+        }
+
+        border-bottom: 1px solid var(--stroke);
+    }
+}