From 4ecab6d3f17b6f26e6a880efeb0de418b9d45665 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Tue, 25 Jan 2022 09:29:06 +0100
Subject: [PATCH] MOBILE-3833 course: Format title and limit height in course
 storage

---
 .../pages/course-storage/course-storage.html  |  7 ++++---
 .../pages/course-storage/course-storage.scss  | 21 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 4f1b55179..3b15683d5 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -71,14 +71,15 @@
                 </ion-card-header>
                 <ion-card-content>
                     <ng-container *ngFor="let module of section.modules">
-                        <ion-item class="ion-no-padding"
-                            *ngIf="(downloadEnabled && module.handlerData?.showDownloadButton) || module.totalSize > 0">
+                        <ion-item class="ion-no-padding core-course-storage-activity" *ngIf="downloadEnabled || module.totalSize > 0">
                             <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
                                 [modname]="module.modname" [componentId]="module.instance">
                             </core-mod-icon>
                             <ion-label class="ion-text-wrap">
                                 <h3 class="{{module.handlerData!.class}} addon-storagemanager-module-size">
-                                    {{ module.name }}
+                                    <core-format-text [text]="module.handlerData.title" [courseId]="module.course" contextLevel="module"
+                                        [contextInstanceId]="module.id" [adaptImg]="false">
+                                    </core-format-text>
                                 </h3>
                                 <ion-badge color="light" *ngIf="module.totalSize > 0">
                                     {{ module.totalSize | coreBytesToSize }}
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.scss b/src/addons/storagemanager/pages/course-storage/course-storage.scss
index 5e459df34..29bc1c7d8 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.scss
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.scss
@@ -1,4 +1,9 @@
+@import "~theme/globals";
+
 :host {
+    --core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-rgb});
+    --course-storage-max-activity-height: 120px;
+
     ion-card.section ion-card-header {
         margin-bottom: 8px;
         padding-top: 8px;
@@ -8,6 +13,22 @@
         font-weight: bold;
         font-size: 1.2rem;
     }
+
+    .core-course-storage-activity ion-label {
+        max-height: var(--course-storage-max-activity-height);
+
+        &:before {
+            content: '';
+            height: 100%;
+            min-height: var(--course-storage-max-activity-height);
+            position: absolute;
+            @include position(0, 0, null, 0);
+            background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 20px));
+            background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 20px));
+            z-index: 6;
+            pointer-events: none;
+        }
+    }
 }
 
 .storage-buttons {