From f01301e590016dc1e57694f376fc1d74f2e14916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 26 May 2021 13:39:47 +0200
Subject: [PATCH] MOBILE-3320 course: Fix on course card styles

---
 .../core-courses-course-progress.html         |  3 +-
 .../course-progress/course-progress.scss      | 30 +++++++++++--------
 src/theme/globals.mixins.scss                 | 18 +++++------
 3 files changed, 29 insertions(+), 22 deletions(-)

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 2327c187b..9b5b972ce 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
@@ -5,7 +5,8 @@
     </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"
-        [class.core-course-more-than-title]="course.progress! >= 0" detail="false">
+        [class.core-course-only-title]="!showAll || course.progress! < 0 && course.completionusertracked === false"
+        detail="false">
         <ion-label
             class="ion-text-wrap core-course-title"
             [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)"
diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss
index f0a4cda3e..8ca42ef7f 100644
--- a/src/core/features/courses/components/course-progress/course-progress.scss
+++ b/src/core/features/courses/components/course-progress/course-progress.scss
@@ -2,10 +2,14 @@
 
 :host {
     ion-card {
+        --vertical-margin: 12px;
+
         display: flex;
         flex-direction: column;
         align-self: stretch;
-        height: calc(100% - 20px);
+        height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        margin-top: var(--vertical-margin);
+        margin-bottom: var(--vertical-margin);
 
         @for $i from 0 to length($core-course-image-background) {
             &[course-color="#{$i}"] .core-course-thumb {
@@ -42,10 +46,19 @@
         }
 
         .core-course-header {
-            padding-top: 8px;
-            padding-bottom: 8px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+
+            &.core-course-only-title {
+                &::part(native) {
+                    flex-grow: 1;
+                }
+
+            }
+
             .core-course-title {
-                margin: 5px 0;
+                margin: 12px 0;
                 flex-grow: 1;
 
                 .item-heading ion-icon {
@@ -54,10 +67,6 @@
                 }
             }
 
-            &.core-course-more-than-title {
-                padding-bottom: 0;
-            }
-
             .core-button-spinner {
                 margin: 0;
             }
@@ -93,11 +102,8 @@
         }
 
         .core-course-header {
-            padding-top: 4px;
-            padding-bottom: 4px;
-
             .core-course-title {
-                margin: 3px 0;
+                margin: 7px 0;
 
                 .item-heading ion-icon {
                     margin-right: 2px;
diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss
index 3cddfea7e..13c691f3e 100644
--- a/src/theme/globals.mixins.scss
+++ b/src/theme/globals.mixins.scss
@@ -213,16 +213,16 @@
     display: block;
 
     ion-card {
-      height: calc(100% - 20px);
-      width: calc(100% - 20px);
-      margin-top: 10px;
-      margin-bottom: 10px;
+        --vertical-margin: 10px;
+        --horizontal-margin: 10px;
 
-      @media (max-width: 360px) {
-        margin-left: 6px;
-        margin-right: 6px;
-        width: calc(100% - 12px);
-      }
+        width: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        margin: var(--vertical-margin) var(--horizontal-margin);
+
+        @media (max-width: 360px) {
+            --horizontal-margin: 6px;
+        }
     }
 
     .ion-text-wrap ion-label {