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] 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;
 }