From 8a2160db17728734d73512ffc0a65aedfb47558e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 9 Aug 2018 15:49:06 +0200
Subject: [PATCH] MOBILE-2481 courses: Highlight section selector

---
 src/addon/files/pages/list/list.html          |  2 +-
 src/app/app.scss                              | 42 ++++++++++++++++++-
 src/core/course/components/format/format.scss | 20 +++++++--
 src/core/course/components/module/module.scss |  6 +--
 .../pages/my-overview/my-overview.html        |  8 ++--
 5 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/src/addon/files/pages/list/list.html b/src/addon/files/pages/list/list.html
index 596171161..791a6d6db 100644
--- a/src/addon/files/pages/list/list.html
+++ b/src/addon/files/pages/list/list.html
@@ -10,7 +10,7 @@
 
     <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
         <!-- Allow selecting the files to see: private or site. -->
-        <div no-padding *ngIf="showPrivateFiles && showSiteFiles && !path">
+        <div padding *ngIf="showPrivateFiles && showSiteFiles && !path">
             <ion-select [(ngModel)]="root" (ngModelChange)="rootChanged()" interface="popover">
                 <ion-option value="my">{{ 'addon.files.privatefiles' | translate }}</ion-option>
                 <ion-option value="site">{{ 'addon.files.sitefiles' | translate }}</ion-option>
diff --git a/src/app/app.scss b/src/app/app.scss
index 921809f76..6f2aa9226 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -402,7 +402,7 @@ ion-card core-format-text img {
 
 // Ionic fix. Button can occupy all page if not.
 ion-select {
-  position: relative
+  position: relative;
 }
 
 ion-col ion-select {
@@ -415,12 +415,52 @@ ion-col ion-select {
     }
 }
 
+
+:not(.item) ion-select,
 .core-button-select {
+  background-color: white;
+  color: $core-color;
+  white-space: normal;
+  align-self: start;
+  max-width: none;
+
+  &.select-md,
+  &.button-md {
+    background: $card-md-background-color;
+    box-shadow: $card-md-box-shadow;
+  }
+
+  &.select-ios,
+  &.button-ios {
+    background: $card-ios-background-color;
+    box-shadow: $card-ios-box-shadow;
+  }
+
+  &.select-wp,
+  &.button-wp {
+    background: $card-wp-background-color;
+    box-shadow: $card-wp-box-shadow;
+  }
+
+  .select-text {
+      white-space: normal;
+  }
+
+  .button-inner {
+    justify-content: space-between;
+  }
+
+  .select-icon .select-icon-inner {
+    color: $core-color;
+  }
+
   ion-icon:last-child {
     @include margin(null, null, null, 5px);
   }
 }
 
+
+
 // File uploader.
 // -------------------------
 
diff --git a/src/core/course/components/format/format.scss b/src/core/course/components/format/format.scss
index 9421b30a4..fd34053d6 100644
--- a/src/core/course/components/format/format.scss
+++ b/src/core/course/components/format/format.scss
@@ -9,6 +9,22 @@ core-course-format {
 
     .core-format-progress-list {
         margin-bottom: 0;
+
+        .item {
+            background: transparent;
+
+            .label {
+                margin-top: 0;
+                margin-bottom: 0;
+            }
+
+            progress {
+                .progress-bar-fallback,
+                &[value]::-webkit-progress-bar {
+                    background-color: $white;
+                }
+            }
+        }
     }
 
     .core-course-thumb {
@@ -40,7 +56,3 @@ core-course-format {
         }
     }
 }
-
-.core-section-select {
-    width: 100%;
-}
diff --git a/src/core/course/components/module/module.scss b/src/core/course/components/module/module.scss
index fcc1b07d7..9e1febfad 100644
--- a/src/core/course/components/module/module.scss
+++ b/src/core/course/components/module/module.scss
@@ -57,7 +57,7 @@ core-course-module {
         padding-right: $label-md-margin-end;
         margin-bottom: $label-md-margin-bottom;
 
-        .core-module-description .core-show-more {
+        .core-show-more {
             padding-right: $label-md-margin-end;
         }
     }
@@ -87,7 +87,7 @@ core-course-module {
         padding-right: $label-ios-margin-end;
         margin-bottom: $label-md-margin-bottom;
 
-        .core-module-description .core-show-more {
+        .core-show-more {
             padding-right: $label-ios-margin-end;
         }
     }
@@ -112,7 +112,7 @@ core-course-module {
         padding-right: ($item-wp-padding-end / 2);
         margin-bottom: $label-md-margin-bottom;
 
-        .core-module-description .core-show-more {
+        .core-show-more {
             padding-right: ($item-wp-padding-end / 2);
         }
     }
diff --git a/src/core/courses/pages/my-overview/my-overview.html b/src/core/courses/pages/my-overview/my-overview.html
index deea5afd9..0a9acea64 100644
--- a/src/core/courses/pages/my-overview/my-overview.html
+++ b/src/core/courses/pages/my-overview/my-overview.html
@@ -36,14 +36,14 @@
 
                     <core-loading [hideUntil]="courses.loaded" class="core-loading-center">
                         <!-- "Time" selector. -->
-                        <div no-padding class="clearfix" [hidden]="showFilter">
-                            <ion-select [title]="'core.show' | translate" [(ngModel)]="courses.selected" float-start (ngModelChange)="selectedChanged()" interface="popover">
+                        <div padding class="clearfix" [hidden]="showFilter" ion-row justify-content-between>
+                            <ion-select float-start [title]="'core.show' | translate" [(ngModel)]="courses.selected"  ion-col (ngModelChange)="selectedChanged()" interface="popover">
                                 <ion-option value="inprogress">{{ 'core.courses.inprogress' | translate }}</ion-option>
                                 <ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option>
                                 <ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option>
                             </ion-select>
                             <!-- Download all courses. -->
-                            <div *ngIf="downloadAllCoursesEnabled && courses[courses.selected] && courses[courses.selected].length > 1" class="core-button-spinner" float-end>
+                            <div *ngIf="downloadAllCoursesEnabled && courses[courses.selected] && courses[courses.selected].length > 1" class="core-button-spinner">
                                 <button *ngIf="prefetchCoursesData[courses.selected].icon && prefetchCoursesData[courses.selected].icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
                                     <core-icon [name]="prefetchCoursesData[courses.selected].icon"></core-icon>
                                 </button>
@@ -81,7 +81,7 @@
                         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
                     </ion-refresher>
 
-                    <div no-padding [hidden]="!(timeline.loaded || timelineCourses.loaded)">
+                    <div padding [hidden]="!(timeline.loaded || timelineCourses.loaded)">
                         <ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()" interface="popover">
                             <ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option>
                             <ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option>