From b0165e87e4c25e665c644378b615346fa8f77adf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 9 Mar 2022 16:18:03 +0100
Subject: [PATCH] MOBILE-3814 collapsible: Reduce collapsible item size

---
 .../addon-mod-assign-feedback-plugin.html     |  2 +-
 .../addon-mod-assign-submission-plugin.html   |  2 +-
 .../addon-mod-assign-feedback-comments.html   |  4 ++--
 ...ddon-mod-assign-submission-onlinetext.html |  4 ++--
 .../lesson/pages/user-retake/user-retake.html |  2 +-
 .../index/addon-mod-workshop-index.html       | 10 ++++-----
 src/addons/notifications/pages/list/list.html |  2 +-
 src/core/directives/collapsible-item.ts       |  6 ++---
 .../core-course-module-description.html       |  2 +-
 .../module-info/core-course-module-info.html  |  2 +-
 .../module-summary/module-summary.html        |  4 ++--
 .../components/module/core-course-module.html |  2 +-
 .../pages/course-summary/course-summary.html  |  5 ++---
 .../courses/pages/categories/categories.html  |  2 +-
 .../features/grades/pages/course/course.html  |  4 ++--
 src/theme/components/collapsible-item.scss    | 22 ++++++++++---------
 src/theme/theme.dark.scss                     | 10 ++++++---
 src/theme/theme.light.scss                    |  5 ++---
 18 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html b/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
index 413cb3751..3a61b78e2 100644
--- a/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
+++ b/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html
@@ -8,7 +8,7 @@
                     {{ 'addon.mod_assign.feedbacknotsupported' | translate }}
                 </ion-badge>
                 <p *ngIf="text">
-                    <core-format-text [component]="component" [componentId]="assign.cmid" [collapsible-item]="120" [text]="text"
+                    <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text"
                         contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
                     </core-format-text>
                 </p>
diff --git a/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html b/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
index e466eb7b5..29818a878 100644
--- a/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
+++ b/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html
@@ -8,7 +8,7 @@
                     {{ 'addon.mod_assign.submissionnotsupported' | translate }}
                 </ion-badge>
                 <p *ngIf="text">
-                    <core-format-text [component]="component" [componentId]="assign.cmid" [collapsible-item]="120" [text]="text"
+                    <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text"
                         contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
                     </core-format-text>
                 </p>
diff --git a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
index 3bcfbbb0f..e30f369a0 100644
--- a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
+++ b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
@@ -3,8 +3,8 @@
     <ion-label>
         <h2>{{ plugin.name }}</h2>
         <p>
-            <core-format-text [component]="component" [componentId]="assign.cmid" [collapsible-item]="120" [text]="text"
-                contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
+            <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text" contextLevel="module"
+                [contextInstanceId]="assign.cmid" [courseId]="assign.course">
             </core-format-text>
         </p>
     </ion-label>
diff --git a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
index fe1dc1a17..549976d19 100644
--- a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
+++ b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
@@ -4,8 +4,8 @@
         <h2>{{ plugin.name }}</h2>
         <p *ngIf="words">{{ 'addon.mod_assign.numwords' | translate: {'$a': words} }}</p>
         <p>
-            <core-format-text [component]="component" [componentId]="assign.cmid" [collapsible-item]="120" [text]="text"
-                contextLevel="module" [contextInstanceId]="assign.cmid" [courseId]="assign.course">
+            <core-format-text [component]="component" [componentId]="assign.cmid" collapsible-item [text]="text" contextLevel="module"
+                [contextInstanceId]="assign.cmid" [courseId]="assign.course">
             </core-format-text>
         </p>
     </ion-label>
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 428f88da9..6c8bcc2df 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -87,7 +87,7 @@
                         <ion-label>
                             <h3 class="item-heading">{{ 'addon.mod_lesson.question' | translate }}</h3>
                             <p>
-                                <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [collapsible-item]="50"
+                                <core-format-text [component]="component" [componentId]="lesson?.coursemodule" collapsible-item
                                     [text]="page.contents" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
                                     [courseId]="courseId">
                                 </core-format-text>
diff --git a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
index 5dd51d9ff..9ccdc53bc 100644
--- a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -58,8 +58,8 @@
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <h2>{{ 'addon.mod_workshop.conclusion' | translate }}</h2>
-                        <core-format-text [collapsible-item]="120" [component]="component" [componentId]="module.id"
-                            [text]="workshop!.conclusion" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                        <core-format-text collapsible-item [component]="component" [componentId]="module.id" [text]="workshop!.conclusion"
+                            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                         </core-format-text>
                     </ion-label>
                 </ion-item>
@@ -91,8 +91,8 @@
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <h2>{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h2>
-                    <core-format-text [collapsible-item]="120" [component]="component" [componentId]="module.id"
-                        [text]="workshop!.instructauthors" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                    <core-format-text collapsible-item [component]="component" [componentId]="module.id" [text]="workshop!.instructauthors"
+                        contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                     </core-format-text>
                 </ion-label>
             </ion-item>
@@ -141,7 +141,7 @@
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <h2>{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h2>
-                        <core-format-text [collapsible-item]="120" [component]="component" [componentId]="module.id"
+                        <core-format-text collapsible-item [component]="component" [componentId]="module.id"
                             [text]="workshop!.instructreviewers" contextLevel="module" [contextInstanceId]="module.id"
                             [courseId]="courseId">
                         </core-format-text>
diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index 965a5158d..d3b9fe72e 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -64,7 +64,7 @@
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <core-format-text [text]="notification.mobiletext | coreCreateLinks" contextLevel="system" [contextInstanceId]="0"
-                            [collapsible-item]="120">
+                            collapsible-item>
                         </core-format-text>
                     </ion-label>
                 </ion-item>
diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts
index 279089fc6..86acabe5f 100644
--- a/src/core/directives/collapsible-item.ts
+++ b/src/core/directives/collapsible-item.ts
@@ -20,8 +20,8 @@ import { CoreComponentsRegistry } from '@singletons/components-registry';
 import { CoreEventLoadingChangedData, CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreFormatTextDirective } from './format-text';
 
-const defaultMaxHeight = 64;
-const buttonHeight = 44;
+const defaultMaxHeight = 80;
+const minMaxHeight = 56;
 
 /**
  * Directive to make an element collapsible.
@@ -70,7 +70,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
         } else {
             this.maxHeight = this.height;
         }
-        this.maxHeight = this.maxHeight < defaultMaxHeight ? defaultMaxHeight : this.maxHeight;
+        this.maxHeight = this.maxHeight < minMaxHeight ? defaultMaxHeight : this.maxHeight;
 
         if (!this.maxHeight) {
             // Do not collapse.
diff --git a/src/core/features/course/components/module-description/core-course-module-description.html b/src/core/features/course/components/module-description/core-course-module-description.html
index 1476d7476..0ada00665 100644
--- a/src/core/features/course/components/module-description/core-course-module-description.html
+++ b/src/core/features/course/components/module-description/core-course-module-description.html
@@ -1,7 +1,7 @@
 <ion-card *ngIf="description">
     <ion-item class="ion-text-wrap">
         <ion-label>
-            <core-format-text [text]="description" [component]="component" [componentId]="componentId" [collapsible-item]="120"
+            <core-format-text [text]="description" [component]="component" [componentId]="componentId" collapsible-item
                 [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
             </core-format-text>
         </ion-label>
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 aea829834..2ff034ce9 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
@@ -46,7 +46,7 @@
 <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" [collapsible-item]="expandDescription ? null : 120">
+            [contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="expandDescription ? null : ''">
         </core-format-text>
     </ion-label>
 </ion-item>
diff --git a/src/core/features/course/components/module-summary/module-summary.html b/src/core/features/course/components/module-summary/module-summary.html
index a510cf893..11bb659c0 100644
--- a/src/core/features/course/components/module-summary/module-summary.html
+++ b/src/core/features/course/components/module-summary/module-summary.html
@@ -49,7 +49,7 @@
                     {{ 'core.description' | translate}}
                 </p>
                 <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
-                    [contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="120">
+                    [contextInstanceId]="module.id" [courseId]="courseId" collapsible-item>
                 </core-format-text>
             </ion-label>
         </ion-item>
@@ -169,7 +169,7 @@
                             <ion-label>
                                 <p class="item-heading">{{ 'core.grades.feedback' | translate}}</p>
                                 <p>
-                                    <core-format-text [collapsible-item]="120" [text]="grade.feedback" contextLevel="course"
+                                    <core-format-text collapsible-item [text]="grade.feedback" contextLevel="course"
                                         [contextInstanceId]="courseId">
                                     </core-format-text>
                                 </p>
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 60e2ece03..b9449db96 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -66,7 +66,7 @@
             class="ion-text-wrap core-course-module-handler core-course-module-info {{module.handlerData.class}}" [ngClass]="{
                 'item-dimmed': module.visible === 0 || module.uservisible === false
             }">
-            <ion-label collapsible-item>
+            <ion-label [collapsible-item]="64">
                 <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/core/features/course/pages/course-summary/course-summary.html b/src/core/features/course/pages/course-summary/course-summary.html
index 9fbfb57a4..625e360ae 100644
--- a/src/core/features/course/pages/course-summary/course-summary.html
+++ b/src/core/features/course/pages/course-summary/course-summary.html
@@ -72,8 +72,7 @@
                     <p class="item-heading">
                         {{'core.summary' | translate}}
                     </p>
-                    <core-format-text [text]="course.summary" [collapsible-item]="120" contextLevel="course"
-                        [contextInstanceId]="course.id">
+                    <core-format-text [text]="course.summary" collapsible-item contextLevel="course" [contextInstanceId]="course.id">
                     </core-format-text>
                 </ion-label>
             </ion-item>
@@ -105,7 +104,7 @@
                                 </core-format-text>
                             </span><span class="core-customfieldseparator">: </span>
                             <span class="core-customfieldvalue">
-                                <core-format-text [text]="field.value" [collapsible-item]="120" contextLevel="course"
+                                <core-format-text [text]="field.value" collapsible-item contextLevel="course"
                                     [contextInstanceId]="course.id">
                                 </core-format-text>
                             </span>
diff --git a/src/core/features/courses/pages/categories/categories.html b/src/core/features/courses/pages/categories/categories.html
index fa208cdca..da1c214e4 100644
--- a/src/core/features/courses/pages/categories/categories.html
+++ b/src/core/features/courses/pages/categories/categories.html
@@ -34,7 +34,7 @@
                         </core-format-text>
                     </p>
                     <p *ngIf="currentCategory.description">
-                        <core-format-text [text]="currentCategory.description" [collapsible-item]="120" contextLevel="coursecat"
+                        <core-format-text [text]="currentCategory.description" collapsible-item contextLevel="coursecat"
                             [contextInstanceId]="currentCategory.id"></core-format-text>
                     </p>
                 </ion-label>
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index 2c237cf64..30e043ec3 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -55,7 +55,7 @@
                                     </td>
                                     <td *ngIf="column.name === 'feedback' && row.feedback !== undefined"
                                         class="ion-text-start core-grades-table-feedback" [class.ion-hide-md-down]="column.hiddenPhone">
-                                        <core-format-text [collapsible-item]="120" [text]="row.feedback" contextLevel="course"
+                                        <core-format-text collapsible-item [text]="row.feedback" contextLevel="course"
                                             [contextInstanceId]="courseId">
                                         </core-format-text>
                                     </td>
@@ -124,7 +124,7 @@
                                         <ion-label>
                                             <h2>{{ 'core.grades.feedback' | translate}}</h2>
                                             <p>
-                                                <core-format-text [collapsible-item]="120" [text]="row.feedback" contextLevel="course"
+                                                <core-format-text collapsible-item [text]="row.feedback" contextLevel="course"
                                                     [contextInstanceId]="courseId">
                                                 </core-format-text>
                                             </p>
diff --git a/src/theme/components/collapsible-item.scss b/src/theme/components/collapsible-item.scss
index 30fc99352..ab23a9b1d 100644
--- a/src/theme/components/collapsible-item.scss
+++ b/src/theme/components/collapsible-item.scss
@@ -2,6 +2,8 @@
 .collapsible-item {
     --display-toggle: none;
     --height: none;
+    --toggle-size: 24px;
+    --gradient-size: 44px;
 
     &.collapsible-loading-height {
         display: block !important;
@@ -17,10 +19,10 @@
     @include media-breakpoint-down(sm) {
         &.collapsible-enabled:not(.collapsible-loading-height) {
             position: relative;
-            padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit.
+            padding-bottom: var(--toggle-size); // So the Show less button can fit.
             --display-toggle: block;
             @include core-transition(height max-height, 300ms);
-            height: calc(var(--height, auto) + var(--collapsible-min-button-height));
+            height: calc(var(--height, auto) + var(--toggle-size));
 
             .collapsible-toggle {
                 position: absolute;
@@ -28,12 +30,12 @@
                 text-align: center;
                 z-index: 7;
                 text-transform: none;
-                font-size: 14px;
+                font-size: 11px;
                 font-weight: normal;
                 background-color: var(--collapsible-toggle-background);
                 color: var(--collapsible-toggle-text);
-                min-height: var(--a11y-min-target-size);
-                min-width: var(--a11y-min-target-size);
+                min-height: var(--toggle-size);
+                min-width: var(--toggle-size);
                 --border-radius: var(--huge-radius);
                 border-radius: var(--border-radius);
                 --padding-start: 0px;
@@ -41,8 +43,8 @@
                 margin: 0px;
 
                 .collapsible-toggle-arrow {
-                    width: var(--a11y-min-target-size);
-                    height: var(--a11y-min-target-size);
+                    width: var(--toggle-size);
+                    height: var(--toggle-size);
 
                     background-position: center;
                     background-repeat: no-repeat;
@@ -61,7 +63,7 @@
 
             &.collapsible-collapsed {
                 overflow: hidden;
-                min-height: calc(var(--collapsible-min-button-height) + 12px);
+                min-height: calc(var(--toggle-size) + 12px);
                 height: var(--height, auto);
 
                 .collapsible-toggle-arrow {
@@ -73,8 +75,8 @@
                     height: 60px;
                     position: absolute;
                     @include position(null, 0, 0, 0);
-                    background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px));
-                    background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px));
+                    background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - var(--gradient-size)), rgba(var(--background-gradient-rgb), 1) calc(100% - 4px));
+                    background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - var(--gradient-size)), rgba(var(--background-gradient-rgb), 1) calc(100% - 4px));
                     z-index: 6;
                 }
             }
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index ab278951a..a3a1a18da 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -39,7 +39,11 @@
     --subdued-text-color:       var(--medium);
     --stroke:                   var(--gray-700);
 
-    --contrast-background: black;
+    --contrast-background: var(--gray-900);
+
+    --drop-shadow: 0, 0, 0, 1;
+    --scroll-shadow-bottom: drop-shadow(0px -3px 3px rgba(var(--drop-shadow)));
+    --scroll-shadow-top: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
 
     --ion-card-color: var(--text-color);
     --ion-card-background: var(--ion-item-background);
@@ -73,7 +77,7 @@
     --core-header-toolbar-color:        var(--text-color);
     --core-header-toolbar-border-color: var(--stroke);
 
-    --core-tabs-background: var(--gray-800);
+    --core-tabs-background: var(--gray-900);
     --core-tab-background: var(--core-tabs-background);
     --core-tab-color: var(--subdued-text-color);
     --core-tab-border-color: var(--gray-200);
@@ -104,7 +108,7 @@
     --core-combobox-color: var(--text-color);
     --core-combobox-border-color: var(--core-input-stroke);
 
-    --collapsible-toggle-background: var(--light);
+    --collapsible-toggle-text: var(--medium);
 
     --background-gradient-rgb: #{$ion-item-background-dark-rgb};
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 4f4deceb4..e3afcfc70 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -315,9 +315,8 @@
     --selected-item-color: var(--primary);
     --selected-item-border-width: 5px;
 
-    --collapsible-toggle-background: var(--light);
-    --collapsible-min-button-height: 44px;
-    --collapsible-toggle-text: var(--text-color);
+    --collapsible-toggle-background: transparent;
+    --collapsible-toggle-text: var(--medium);
 
     --background-gradient-rgb: #{$ion-item-background-rgb};