From d8e0aca5dc0f94faf1340c5ea0209b0782973d0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 30 Nov 2018 10:19:54 +0100
Subject: [PATCH 1/6] MOBILE-2773 course: Add course shortname to course
 dashboard

---
 .../course-progress/core-courses-course-progress.html | 11 +++++++----
 .../components/course-progress/course-progress.scss   |  4 ++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/core/courses/components/course-progress/core-courses-course-progress.html b/src/core/courses/components/course-progress/core-courses-course-progress.html
index 4dab77489..4a8f9f36b 100644
--- a/src/core/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/courses/components/course-progress/core-courses-course-progress.html
@@ -3,10 +3,13 @@
         <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt=""/>
     </div>
     <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.summary && course.summary.length) || (course.progress != null && course.progress >= 0)">
-        <h2>
-            <core-icon name="fa-star" *ngIf="course.isfavourite"></core-icon>
-            <core-format-text [text]="course.displayname || course.fullname"></core-format-text>
-        </h2>
+        <div>
+            <p *ngIf="course.displayname && course.shortname && course.fullname != course.displayname" class="core-course-shortname"><core-format-text [text]="course.shortname"></core-format-text></p>
+            <h2>
+                <core-icon name="fa-star" *ngIf="course.isfavourite"></core-icon>
+                <core-format-text [text]="course.fullname"></core-format-text>
+            </h2>
+        </div>
 
         <div class="core-button-spinner" *ngIf="downloadCourseEnabled && !courseOptionMenuEnabled">
             <!-- Download course. -->
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 4f2c29f5d..7914924b0 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -33,6 +33,10 @@ ion-app.app-root core-courses-course-progress {
             }
         }
 
+        .core-course-shortname {
+            margin-bottom: 8px;
+        }
+
         .core-course-link {
             @include padding(8px, 0px, 8px, 16px);
             .item-inner {

From b78ca51bb138aea0c7bf433fba40656c9ffd94c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 3 Dec 2018 13:18:04 +0100
Subject: [PATCH 2/6] MOBILE-2773 courses: Hide summary from course cards

---
 src/app/app.scss                                      |  5 +++++
 .../course-progress/core-courses-course-progress.html | 11 ++---------
 .../components/course-progress/course-progress.scss   |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index 0c420d698..48252ee67 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -498,6 +498,11 @@ ion-app.app-root {
       @include text-align('end');
       flex-grow: 2;
     }
+
+    .select-text {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
 
diff --git a/src/core/courses/components/course-progress/core-courses-course-progress.html b/src/core/courses/components/course-progress/core-courses-course-progress.html
index 4a8f9f36b..4e2323129 100644
--- a/src/core/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/courses/components/course-progress/core-courses-course-progress.html
@@ -2,8 +2,8 @@
     <div (click)="openCourse(course)" class="core-course-thumb" [class.core-course-color-img]="course.courseImage">
         <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt=""/>
     </div>
-    <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.summary && course.summary.length) || (course.progress != null && course.progress >= 0)">
-        <div>
+    <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.progress != null && course.progress >= 0)">
+        <div class="core-course-title">
             <p *ngIf="course.displayname && course.shortname && course.fullname != course.displayname" class="core-course-shortname"><core-format-text [text]="course.shortname"></core-format-text></p>
             <h2>
                 <core-icon name="fa-star" *ngIf="course.isfavourite"></core-icon>
@@ -30,13 +30,6 @@
             </button>
         </div>
     </ion-item>
-    <ion-item text-wrap *ngIf="course.summary && course.summary.length" [class.item-disabled]="course.visible == 0">
-        <p>
-            <summary>
-                <core-format-text [text]="course.summary" [singleLine]="true" [clean]="true" [fullOnClick]="true"></core-format-text>
-            </summary>
-        </p>
-    </ion-item>
     <ion-item *ngIf="course.progress != null && course.progress >= 0">
         <core-progress-bar [progress]="course.progress"></core-progress-bar>
     </ion-item>
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 7914924b0..5b3b407c7 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -47,7 +47,7 @@ ion-app.app-root core-courses-course-progress {
                 align-items: center;
                 justify-content: space-between;
             }
-            h2 {
+            .core-course-title {
                 margins: 6px 0;
                 flex-grow: 1;
 

From b03b67e393fd36110d1d35700f6c1002f3e6e473 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 3 Dec 2018 13:18:33 +0100
Subject: [PATCH 3/6] MOBILE-2773 courses: Add horizontal scroll on dashboard

---
 .../myoverview/addon-block-myoverview.html    | 16 +++----
 .../addon-block-recentlyaccessedcourses.html  | 12 +++--
 .../addon-block-starredcourses.html           | 12 +++--
 src/app/app.scss                              |  7 +++
 .../course-progress/course-progress.scss      | 44 ++++++++++++++++++-
 5 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
index 1932ed057..6cdb0b541 100644
--- a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -7,6 +7,14 @@
 
 <ion-item-divider color="light">
     <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
+    <!-- Download all courses. -->
+    <div *ngIf="downloadAllCoursesEnabled && courses[selectedFilter] && courses[selectedFilter].length > 1" class="core-button-spinner" item-end>
+        <button *ngIf="prefetchCoursesData[selectedFilter].icon && prefetchCoursesData[selectedFilter].icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
+            <core-icon [name]="prefetchCoursesData[selectedFilter].icon"></core-icon>
+        </button>
+        <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData[selectedFilter].badge">{{prefetchCoursesData[selectedFilter].badge}}</ion-badge>
+        <ion-spinner *ngIf="!prefetchCoursesData[selectedFilter].icon || prefetchCoursesData[selectedFilter].icon == 'spinner'"></ion-spinner>
+    </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
     <div padding ion-row justify-content-end [hidden]="showFilter" class="safe-padding-horizontal">
@@ -28,14 +36,6 @@
                 <ion-option value="lastaccess">{{ 'addon.block_myoverview.lastaccessed' | translate }}</ion-option>
             </ion-select>
         </ion-col>
-        <!-- Download all courses. -->
-        <ion-col *ngIf="downloadAllCoursesEnabled && courses[selectedFilter] && courses[selectedFilter].length > 1" class="core-button-spinner" text-end col-1>
-            <button *ngIf="prefetchCoursesData[selectedFilter].icon && prefetchCoursesData[selectedFilter].icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
-                <core-icon [name]="prefetchCoursesData[selectedFilter].icon"></core-icon>
-            </button>
-            <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData[selectedFilter].badge">{{prefetchCoursesData[selectedFilter].badge}}</ion-badge>
-            <ion-spinner *ngIf="!prefetchCoursesData[selectedFilter].icon || prefetchCoursesData[selectedFilter].icon == 'spinner'"></ion-spinner>
-        </ion-col>
     </div>
     <core-empty-box *ngIf="courses[selectedFilter].length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_myoverview.nocourses' | translate"></core-empty-box>
 
diff --git a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index 04b90057e..8012cf048 100644
--- a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -12,12 +12,10 @@
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
     <div class="safe-area-page">
-        <ion-grid no-padding>
-            <ion-row no-padding>
-                <ion-col *ngFor="let course of courses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
-                    <core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses"></core-courses-course-progress>
-                </ion-col>
-            </ion-row>
-        </ion-grid>
+         <div class="core-horizontal-scroll">
+            <ng-container *ngFor="let course of courses">
+                <core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses"></core-courses-course-progress>
+            </ng-container>
+        </div>
     </div>
 </core-loading>
diff --git a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index 19c6fea67..194a1d6fe 100644
--- a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -12,12 +12,10 @@
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
     <div class="safe-area-page">
-        <ion-grid no-padding>
-            <ion-row no-padding>
-                <ion-col *ngFor="let course of courses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
-                    <core-courses-course-progress [course]="course" class="core-block_starredcourses"></core-courses-course-progress>
-                </ion-col>
-            </ion-row>
-        </ion-grid>
+        <div class="core-horizontal-scroll">
+            <ng-container *ngFor="let course of courses">
+                <core-courses-course-progress [course]="course" class="core-block_starredcourses"></core-courses-course-progress>
+            </ng-container>
+        </div>
     </div>
 </core-loading>
diff --git a/src/app/app.scss b/src/app/app.scss
index 48252ee67..86daf6c4f 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -990,6 +990,13 @@ ion-app.app-root {
     display: none !important;
   }
 
+  .core-horizontal-scroll {
+    display: flex;
+    flex-flow: nowrap;
+    overflow-x: scroll;
+    flex-direction: row;
+  }
+
   ion-content.core-expand-max .scroll-content {
     overflow-y: hidden;
     display: flex;
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 5b3b407c7..95155e832 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -4,6 +4,7 @@ ion-app.app-root core-courses-course-progress {
     ion-card.card {
         display: flex;
         flex-direction: column;
+        align-self: stretch;
 
         @for $i from 0 to length($core-course-image-background) {
             &[course-color="#{$i}"] {
@@ -20,6 +21,8 @@ ion-app.app-root core-courses-course-progress {
             cursor: pointer;
             pointer-events: auto;
             position: relative;
+            background-position: center;
+            background-size: cover;
 
             &.core-course-color-img {
                 background: white;
@@ -51,7 +54,7 @@ ion-app.app-root core-courses-course-progress {
                 margins: 6px 0;
                 flex-grow: 1;
 
-                ion-icon {
+                h2 ion-icon {
                     margin-right: 4px;
                     color: $core-star-color;
                 }
@@ -88,6 +91,45 @@ ion-app.app-root core-courses-course-progress {
     }
 }
 
+
+ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
+    min-width: 300px;
+    align-self: stretch;
+    .card-md {
+        height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
+    }
+    .card-ios {
+        height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
+    }
+    .card-wp {
+        height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
+    }
+}
+
+@media (min-width: 576px) {
+  ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
+    width: calc(50% - 0.5rem);
+  }
+}
+
+@media (min-width: 840px) {
+  ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
+    width: calc(33.33% - 0.5rem);
+  }
+}
+
+@media (min-width: 1100px) {
+  ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
+    width: calc(25% - 0.5rem);
+  }
+}
+
+@media (min-width: 1360px) {
+  ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
+    width: calc(20% - 0.5rem);
+  }
+}
+
 body.version-3-1 .core-course-thumb{
     display: none;
 }

From 4782e35fc2da2b38af22ae1d913bce626efd4b1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 7 Dec 2018 11:44:32 +0100
Subject: [PATCH 4/6] MOBILE-2773 dashboard: Add horizontal scroll to recent
 items

---
 .../addon-block-recentlyaccesseditems.html    | 18 ++++++----
 .../recentlyaccesseditems.scss                | 11 ++++++
 .../course-progress/course-progress.scss      | 36 +------------------
 src/theme/variables.scss                      | 22 ++++++++++++
 4 files changed, 45 insertions(+), 42 deletions(-)
 create mode 100644 src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss

diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index 5b514dc86..b61015674 100644
--- a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -2,13 +2,17 @@
     <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
-    <ng-container *ngFor="let item of items">
-        <a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, item)" [title]="item.name">
-            <img item-start [src]="item.iconUrl" alt="" role="presentation" *ngIf="item.iconUrl" class="core-module-icon">
-            <h2><core-format-text [text]="item.name"></core-format-text></h2>
-            <p><core-format-text [text]="item.coursename"></core-format-text></p>
-        </a>
-    </ng-container>
+    <div class="core-horizontal-scroll" *ngIf="items && items.length > 0">
+        <ng-container *ngFor="let item of items">
+            <ion-card>
+                <a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, item)" [title]="item.name">
+                    <img item-start [src]="item.iconUrl" alt="" role="presentation" *ngIf="item.iconUrl" class="core-module-icon">
+                    <h2><core-format-text [text]="item.name"></core-format-text></h2>
+                    <p><core-format-text [text]="item.coursename"></core-format-text></p>
+                </a>
+            </ion-card>
+        </ng-container>
+    </div>
 
     <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg" [message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>
 
diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
new file mode 100644
index 000000000..36d06eb54
--- /dev/null
+++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@@ -0,0 +1,11 @@
+ion-app.app-root addon-block-recentlyaccesseditems .core-horizontal-scroll  .card {
+    @include horizontal_scroll_item(80%, 250px, 300px);
+
+    [text-wrap] .label {
+        h2, p {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 95155e832..0805bdd31 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -93,41 +93,7 @@ ion-app.app-root core-courses-course-progress {
 
 
 ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
-    min-width: 300px;
-    align-self: stretch;
-    .card-md {
-        height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
-    }
-    .card-ios {
-        height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
-    }
-    .card-wp {
-        height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
-    }
-}
-
-@media (min-width: 576px) {
-  ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
-    width: calc(50% - 0.5rem);
-  }
-}
-
-@media (min-width: 840px) {
-  ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
-    width: calc(33.33% - 0.5rem);
-  }
-}
-
-@media (min-width: 1100px) {
-  ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
-    width: calc(25% - 0.5rem);
-  }
-}
-
-@media (min-width: 1360px) {
-  ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
-    width: calc(20% - 0.5rem);
-  }
+    @include horizontal_scroll_item(40%, 150px, 300px);
 }
 
 body.version-3-1 .core-course-thumb{
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 974cc1380..0d6c2bad8 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -351,6 +351,28 @@ $core-question-state-incorrect-color: $red-light !default;
   }
 }
 
+@mixin horizontal_scroll_item($width, $min-width, $max-width) {
+    flex: 0 0 $width;
+    min-width: $min-width;
+    max-width: $max-width;
+    align-self: stretch;
+    display: block;
+
+    &.card-md, .card-md {
+      height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
+    }
+    &.card-ios, .card-ios {
+      height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
+    }
+    &.card-wp, .card-wp {
+      height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
+    }
+    &.card {
+      margin-top: $card-md-margin-start;
+      margin-bottom: $card-md-margin-end;
+    }
+}
+
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";

From bf87987b02e579afc8fae4bf032e19491459edfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 7 Dec 2018 13:49:50 +0100
Subject: [PATCH 5/6] MOBILE-2773 dashboard: Hide progress bar on small course
 cards

---
 .../components/myoverview/addon-block-myoverview.html         | 2 +-
 src/core/block/components/block/block.scss                    | 4 ++++
 .../course-progress/core-courses-course-progress.html         | 2 +-
 .../courses/components/course-progress/course-progress.ts     | 3 ++-
 src/core/courses/pages/my-courses/my-courses.html             | 2 +-
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
index 6cdb0b541..39dc99008 100644
--- a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -47,7 +47,7 @@
         <ion-grid no-padding>
             <ion-row no-padding>
                 <ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
-                    <core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress>
+                    <core-courses-course-progress [course]="course" class="core-courseoverview" showAll="true"></core-courses-course-progress>
                 </ion-col>
             </ion-row>
         </ion-grid>
diff --git a/src/core/block/components/block/block.scss b/src/core/block/components/block/block.scss
index 5a4b20515..28a9914d4 100644
--- a/src/core/block/components/block/block.scss
+++ b/src/core/block/components/block/block.scss
@@ -16,4 +16,8 @@ ion-app.app-root core-block {
     @include position(initial, initial, null, initial);
     height: auto;
   }
+
+  .item-divider .core-button-spinner {
+    margin: 0;
+  }
 }
\ No newline at end of file
diff --git a/src/core/courses/components/course-progress/core-courses-course-progress.html b/src/core/courses/components/course-progress/core-courses-course-progress.html
index 4e2323129..c59de59e4 100644
--- a/src/core/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/courses/components/course-progress/core-courses-course-progress.html
@@ -30,7 +30,7 @@
             </button>
         </div>
     </ion-item>
-    <ion-item *ngIf="course.progress != null && course.progress >= 0">
+    <ion-item *ngIf="showAll && course.progress != null && course.progress >= 0">
         <core-progress-bar [progress]="course.progress"></core-progress-bar>
     </ion-item>
     <ng-content></ng-content>
diff --git a/src/core/courses/components/course-progress/course-progress.ts b/src/core/courses/components/course-progress/course-progress.ts
index 294c73dd8..75a8c6fab 100644
--- a/src/core/courses/components/course-progress/course-progress.ts
+++ b/src/core/courses/components/course-progress/course-progress.ts
@@ -38,6 +38,7 @@ import { CoreCoursesCourseOptionsMenuComponent } from '../course-options-menu/co
 })
 export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
     @Input() course: any; // The course to render.
+    @Input() showAll = false; // If true, will show all actions, options, star and progress.
 
     isDownloading: boolean;
     prefetchCourseData = {
@@ -69,7 +70,7 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
         }
 
         // This field is only available from 3.6 onwards.
-        this.courseOptionMenuEnabled = typeof this.course.isfavourite != 'undefined';
+        this.courseOptionMenuEnabled = this.showAll && typeof this.course.isfavourite != 'undefined';
 
         // Refresh the enabled flag if site is updated.
         this.siteUpdatedObserver = this.eventsProvider.on(CoreEventsProvider.SITE_UPDATED, () => {
diff --git a/src/core/courses/pages/my-courses/my-courses.html b/src/core/courses/pages/my-courses/my-courses.html
index bfecbf856..2129adec0 100644
--- a/src/core/courses/pages/my-courses/my-courses.html
+++ b/src/core/courses/pages/my-courses/my-courses.html
@@ -24,7 +24,7 @@
         <ion-grid no-padding>
             <ion-row no-padding>
                 <ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
-                    <core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress>
+                    <core-courses-course-progress [course]="course" class="core-courseoverview" showAll="true"></core-courses-course-progress>
                 </ion-col>
             </ion-row>
         </ion-grid>

From 4af45f06bceb263f79645add0db88261eebc91dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 7 Dec 2018 13:50:25 +0100
Subject: [PATCH 6/6] MOBILE-2773 dashboard: Fix small cards width and height

---
 .../recentlyaccesseditems.scss                |  8 ---
 .../course-progress/course-progress.scss      | 51 +++++++++++++++++--
 src/theme/variables.scss                      | 39 +++++++++++---
 3 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
index 36d06eb54..0ae7043f0 100644
--- a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
+++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@@ -1,11 +1,3 @@
 ion-app.app-root addon-block-recentlyaccesseditems .core-horizontal-scroll  .card {
     @include horizontal_scroll_item(80%, 250px, 300px);
-
-    [text-wrap] .label {
-        h2, p {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 0805bdd31..cf0b3bc4c 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -15,7 +15,7 @@ ion-app.app-root core-courses-course-progress {
         }
 
         .core-course-thumb {
-            height: 150px;
+            padding-top: 40%;
             width: 100%;
             overflow: hidden;
             cursor: pointer;
@@ -49,10 +49,12 @@ ion-app.app-root core-courses-course-progress {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+                flex-wrap: wrap;
             }
             .core-course-title {
-                margins: 6px 0;
+                margin: 5px 0;
                 flex-grow: 1;
+                max-width: calc(100% - 50px);
 
                 h2 ion-icon {
                     margin-right: 4px;
@@ -70,6 +72,7 @@ ion-app.app-root core-courses-course-progress {
 
             .item-button[icon-only] {
                 min-width: 50px;
+                width: 50px;
             }
         }
         .label {
@@ -93,7 +96,49 @@ ion-app.app-root core-courses-course-progress {
 
 
 ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
-    @include horizontal_scroll_item(40%, 150px, 300px);
+    @include horizontal_scroll_item(45%, 210px, 300px);
+
+
+    ion-card.card {
+        .core-course-thumb {
+            padding-top: 40%;
+        }
+
+        .core-course-link {
+            @include padding(4px, 0px, 4px, 8px);
+            .core-course-shortname {
+                font-size: 1.2rem;
+            }
+
+            .core-course-title {
+                margin: 3px 0;
+                max-width: calc(100% - 40px);
+
+                h2 {
+                    font-size: 1.5rem;
+                    ion-icon {
+                        margin-right: 2px;
+                    }
+                }
+            }
+            .core-button-spinner {
+                min-height: 40px;
+                min-width: 40px;
+
+                ion-spinner {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+            .item-button[icon-only] {
+                min-width: 40px;
+                width: 40px;
+                font-size: 1.5rem;
+                padding: 8px;
+            }
+
+        }
+    }
 }
 
 body.version-3-1 .core-course-thumb{
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 0d6c2bad8..07ead78b8 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -359,17 +359,44 @@ $core-question-state-incorrect-color: $red-light !default;
     display: block;
 
     &.card-md, .card-md {
-      height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
+      height: calc(100% - #{($card-md-margin-bottom + $card-md-margin-top)});
+      width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
     }
     &.card-ios, .card-ios {
-      height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
+      height: calc(100% - #{($card-ios-margin-bottom + $card-ios-margin-top)});
+      width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
     }
     &.card-wp, .card-wp {
-      height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
+      height: calc(100% - #{($card-wp-margin-bottom + $card-wp-margin-top)});
+      width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
     }
-    &.card {
-      margin-top: $card-md-margin-start;
-      margin-bottom: $card-md-margin-end;
+    &.card-md {
+      margin-top: $card-md-margin-top;
+      margin-bottom: $card-md-margin-bottom;
+    }
+    &.card-ios {
+      margin-top: $card-ios-margin-top;
+      margin-bottom: $card-ios-margin-bottom;
+    }
+    &.card-wp {
+      margin-top: $card-wp-margin-top;
+      margin-bottom: $card-wp-margin-bottom;
+    }
+
+    &.card, .card {
+      @media (max-width: 360px) {
+        margin-left: 6px;
+        margin-right: 6px;
+        width: calc(100% - 12px);
+      }
+    }
+
+    [text-wrap] .label {
+        h2, p {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 }