MOBILE-2773 dashboard: Add horizontal scroll to recent items

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">
+    <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>
 

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

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;
+    @include horizontal_scroll_item(40%, 150px, 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{

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";