From 5c3fe58ed7b85cd7ac38e209166c0a905fe5ddec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 6 Apr 2022 09:29:08 +0200
Subject: [PATCH] MOBILE-3833 storage: Fix hover style state

---
 .../pages/course-storage/course-storage.html  |  8 +--
 .../pages/course-storage/course-storage.scss  | 55 ++++++++++---------
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 1d0182cf1..d0801b848 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -47,8 +47,8 @@
         <ng-container *ngFor="let section of sections">
             <ion-card class="section" *ngIf="section.modules.length > 0">
                 <ion-card-header>
-                    <ion-item class="ion-no-padding" [lines]="section.expanded ? 'full' : 'none'" button detail="false"
-                        (click)="toggleExpand($event, section)" [class.core-course-storage-section-expanded]="section.expanded"
+                    <ion-item [lines]="section.expanded ? 'full' : 'none'" button detail="false" (click)="toggleExpand($event, section)"
+                        [class.core-course-storage-section-expanded]="section.expanded"
                         [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
                         [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id">
                         <ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon"
@@ -99,10 +99,10 @@
                         </div>
                     </ion-item>
                 </ion-card-header>
-                <ion-card-content id="core-course-storage-section-{{section.id}}" [ngClass]="{'hidden-content': !section.expanded}">
+                <ion-card-content id="core-course-storage-section-{{section.id}}">
                     <ng-container *ngIf="section.expanded">
                         <ng-container *ngFor="let module of section.modules">
-                            <ion-item class="ion-no-padding core-course-storage-activity"
+                            <ion-item class="core-course-storage-activity"
                                 *ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
                                 <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
                                     [modname]="module.modname" [componentId]="module.instance">
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.scss b/src/addons/storagemanager/pages/course-storage/course-storage.scss
index 8682b14eb..cf6193060 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.scss
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.scss
@@ -3,36 +3,41 @@
 :host {
     --course-storage-max-activity-height: 120px;
 
-    ion-card ion-item {
+    ion-card ion-item.size {
         --inner-padding-end: 0px;
     }
 
-    ion-card.section ion-card-header {
-        padding-top: 8px;
-        padding-bottom: 8px;
-    }
-    ion-card.section .item-heading {
-        font-weight: bold;
-        font-size: 1.2rem;
-    }
+    ion-card.section {
+        ion-card-header {
+            padding: 0;
+        }
+        ion-card-content {
+            padding: 0;
 
-    ion-card-content.hidden-content {
-        padding: 0;
-    }
+            .core-course-storage-activity ion-label {
+                h3 {
+                    position: relative;
+                    max-height: var(--course-storage-max-activity-height);
+                    overflow: hidden;
+                    ::ng-deep * {
+                        pointer-events: none !important;
+                    }
 
-    .core-course-storage-activity ion-label h3 {
-        position: relative;
-        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: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
-            z-index: 6;
-            pointer-events: none;
+                    &:before {
+                        content: '';
+                        height: var(--course-storage-max-activity-height);
+                        position: absolute;
+                        @include position(0, 0, null, 0);
+                        background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
+                        z-index: 6;
+                        pointer-events: none;
+                    }
+                }
+            }
+        }
+        .item-heading {
+            font-weight: bold;
+            font-size: 1.2rem;
         }
     }
 }