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 1/2] 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>

From 9b3bd3012e0ed37938d6199b0cc6663f4abec300 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 9 Aug 2018 17:57:39 +0200
Subject: [PATCH 2/2] MOBILE-2481 course: Add section navigation

---
 src/addon/mod/quiz/pages/player/player.html   |  2 +-
 src/app/app.scss                              |  6 +++--
 src/components/tabs/core-tabs.html            |  4 ++--
 .../components/format/core-course-format.html | 18 ++++++++++++---
 src/core/course/components/format/format.scss |  9 ++++++++
 src/core/course/components/format/format.ts   | 22 +++++++++++++++++++
 .../section-selector/section-selector.html    |  1 +
 .../login/pages/credentials/credentials.html  |  2 +-
 src/core/login/pages/reconnect/reconnect.html |  2 +-
 9 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/addon/mod/quiz/pages/player/player.html b/src/addon/mod/quiz/pages/player/player.html
index d3d07b9be..253ea995b 100644
--- a/src/addon/mod/quiz/pages/player/player.html
+++ b/src/addon/mod/quiz/pages/player/player.html
@@ -67,7 +67,7 @@
         <ion-grid text-wrap *ngIf="questions && questions.length && !quizAborted && !showSummary">
             <ion-row>
                 <ion-col *ngIf="previousPage >= 0" >
-                    <button ion-button block icon-start (click)="changePage(previousPage)">
+                    <button ion-button block icon-start color="light" (click)="changePage(previousPage)">
                         <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
                         {{ 'core.previous' | translate }}
                     </button>
diff --git a/src/app/app.scss b/src/app/app.scss
index 6f2aa9226..ebe16db2b 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -416,7 +416,7 @@ ion-col ion-select {
 }
 
 
-:not(.item) ion-select,
+:not(.item) > * > * > ion-select,
 .core-button-select {
   background-color: white;
   color: $core-color;
@@ -447,7 +447,7 @@ ion-col ion-select {
   }
 
   .button-inner {
-    justify-content: space-between;
+    justify-content: start;
   }
 
   .select-icon .select-icon-inner {
@@ -456,6 +456,8 @@ ion-col ion-select {
 
   ion-icon:last-child {
     @include margin(null, null, null, 5px);
+    text-align: right;
+    flex-grow: 2;
   }
 }
 
diff --git a/src/components/tabs/core-tabs.html b/src/components/tabs/core-tabs.html
index 4045a3264..4958a47b6 100644
--- a/src/components/tabs/core-tabs.html
+++ b/src/components/tabs/core-tabs.html
@@ -2,7 +2,7 @@
     <div class="core-tabs-bar" #topTabs [hidden]="!tabs || tabs.length < 2">
         <ion-row>
             <ion-col class="col-with-arrow" (click)="slidePrev()" no-padding col-1>
-                <ion-icon *ngIf="showPrevButton" name="arrow-back"></ion-icon>
+                <ion-icon *ngIf="showPrevButton" name="arrow-back" md="ios-arrow-back"></ion-icon>
             </ion-col>
             <ion-col no-padding col-10>
                 <ion-slides (ionSlideDidChange)="slideChanged()" [slidesPerView]="slidesShown">
@@ -18,7 +18,7 @@
                 </ion-slides>
             </ion-col>
             <ion-col class="col-with-arrow" (click)="slideNext()" no-padding col-1>
-                <ion-icon *ngIf="showNextButton" name="arrow-forward"></ion-icon>
+                <ion-icon *ngIf="showNextButton" name="arrow-forward" md="ios-arrow-forward"></ion-icon>
             </ion-col>
         </ion-row>
     </div>
diff --git a/src/core/course/components/format/core-course-format.html b/src/core/course/components/format/core-course-format.html
index 304ae4ce1..56eedc8d8 100644
--- a/src/core/course/components/format/core-course-format.html
+++ b/src/core/course/components/format/core-course-format.html
@@ -13,7 +13,7 @@
             <div *ngIf="course.imageThumb" class="core-course-thumb">
                 <img [src]="course.imageThumb" core-external-content alt=""/>
             </div>
-            <ion-item *ngIf="course.progress != null && course.progress >= 0">
+            <ion-item *ngIf="course.progress != null && course.progress >= 0" class="core-course-progress">
                 <core-progress-bar [progress]="course.progress"></core-progress-bar>
             </ion-item>
         </ion-list>
@@ -22,8 +22,9 @@
     <core-loading [hideUntil]="loaded">
         <!-- Section selector. -->
         <core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
-            <div text-wrap *ngIf="displaySectionSelector && sections && sections.length" no-padding class="clearfix">
-                <button float-start ion-button (click)="showSectionSelector($event)" clear class="core-button-select button-no-uppercase">
+            <div text-wrap *ngIf="displaySectionSelector && sections && sections.length" padding class="clearfix" ion-row justify-content-between>
+                <button float-start ion-button icon-start (click)="showSectionSelector($event)" color="light" class="core-button-select button-no-uppercase" ion-col>
+                    <core-icon name="fa-folder"></core-icon>
                     {{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}
                     <ion-icon name="arrow-dropdown" ios="md-arrow-dropdown"></ion-icon>
                 </button>
@@ -49,6 +50,17 @@
             </core-dynamic-component>
         </div>
     </core-loading>
+    <ion-buttons padding end class="core-course-section-nav-buttons" *ngIf="displaySectionSelector && sections && sections.length">
+        <button *ngIf="previousSection" ion-button color="light" icon-only (click)="sectionChanged(previousSection)" title="{{ 'core.previous' | translate }}">
+            <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
+            <core-format-text class="accesshide" [text]="previousSection.formattedName || previousSection.name"></core-format-text>
+        </button>
+        <button *ngIf="nextSection" ion-button icon-only (click)="sectionChanged(nextSection)" title="{{ 'core.next' | translate }}">
+            <core-format-text class="accesshide" [text]="nextSection.formattedName || nextSection.name"></core-format-text>
+            <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
+        </button>
+    </ion-buttons>
+
 </core-dynamic-component>
 
 <!-- Template to render a section. -->
diff --git a/src/core/course/components/format/format.scss b/src/core/course/components/format/format.scss
index fd34053d6..5596893e1 100644
--- a/src/core/course/components/format/format.scss
+++ b/src/core/course/components/format/format.scss
@@ -55,4 +55,13 @@ core-course-format {
             line-height: 44px;
         }
     }
+
+    .core-course-section-nav-buttons {
+        .button-inner core-format-text {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            text-transform: none;
+        }
+    }
 }
diff --git a/src/core/course/components/format/format.ts b/src/core/course/components/format/format.ts
index 97e10bf48..c378fe847 100644
--- a/src/core/course/components/format/format.ts
+++ b/src/core/course/components/format/format.ts
@@ -63,6 +63,8 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
 
     displaySectionSelector: boolean;
     selectedSection: any;
+    previousSection: any;
+    nextSection: any;
     allSectionsId: number = CoreCourseProvider.ALL_SECTIONS_ID;
     selectOptions: any = {};
     loaded: boolean;
@@ -248,6 +250,26 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
         this.selectedSection = newSection;
         this.data.section = this.selectedSection;
 
+        // Select next and previous sections to show the arrows.
+        const i = this.sections.findIndex((value, index) => {
+            return this.compareSections(value, this.selectedSection);
+        });
+
+        let j;
+        for (j = i - 1; j >= 1; j--) {
+            if (!(this.sections[j].visible === 0 || this.sections[j].uservisible === false) && this.sections[j].hasContent) {
+                break;
+            }
+        }
+        this.previousSection = j >= 1 ? this.sections[j] : null;
+
+        for (j = i + 1; j < this.sections.length; j++) {
+            if (!(this.sections[j].visible === 0 || this.sections[j].uservisible === false) && this.sections[j].hasContent) {
+                break;
+            }
+        }
+        this.nextSection = j < this.sections.length ? this.sections[j] : null;
+
         if (this.moduleId && typeof previousValue == 'undefined') {
             setTimeout(() => {
                 this.domUtils.scrollToElementBySelector(this.content, '#core-course-module-' + this.moduleId);
diff --git a/src/core/course/pages/section-selector/section-selector.html b/src/core/course/pages/section-selector/section-selector.html
index 3b1fec899..dcdd72a9c 100644
--- a/src/core/course/pages/section-selector/section-selector.html
+++ b/src/core/course/pages/section-selector/section-selector.html
@@ -11,6 +11,7 @@
 <ion-content>
     <ng-container *ngFor="let section of sections">
         <a ion-item *ngIf="section.hasContent" text-wrap (click)="selectSection(section)" [class.core-primary-item]="selected.id == section.id" [class.item-dimmed]="section.visible === 0 || section.uservisible === false" detail-none>
+            <core-icon name="fa-folder" item-start></core-icon>
             <h2><core-format-text [text]="section.formattedName || section.name"></core-format-text></h2>
             <ion-badge color="secondary" *ngIf="section.visible === 0">{{ 'core.course.nocontentavailable' | translate }}</ion-badge>
             <ion-badge color="secondary" *ngIf="section.availabilityinfo"><core-format-text  [text]=" section.availabilityinfo"></core-format-text></ion-badge>
diff --git a/src/core/login/pages/credentials/credentials.html b/src/core/login/pages/credentials/credentials.html
index 9f6af1247..e7160fbc8 100644
--- a/src/core/login/pages/credentials/credentials.html
+++ b/src/core/login/pages/credentials/credentials.html
@@ -6,7 +6,7 @@
 <ion-content class="core-center-view">
     <core-loading [hideUntil]="pageLoaded">
         <div class="box">
-            <div text-wrap text-center>
+            <div text-wrap text-center margin-bottom>
                 <!-- Show site logo or a default image. -->
                 <img *ngIf="logoUrl" [src]="logoUrl" role="presentation">
                 <img *ngIf="!logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation">
diff --git a/src/core/login/pages/reconnect/reconnect.html b/src/core/login/pages/reconnect/reconnect.html
index e96b9846d..ca9d980b1 100644
--- a/src/core/login/pages/reconnect/reconnect.html
+++ b/src/core/login/pages/reconnect/reconnect.html
@@ -5,7 +5,7 @@
 </ion-header>
 <ion-content padding class="core-center-view">
     <div class="box">
-        <div *ngIf="site" text-wrap text-center [ngClass]="{'item-avatar-center': site.avatar}">
+        <div *ngIf="site" text-wrap text-center margin-bottom [ngClass]="{'item-avatar-center': site.avatar}">
             <ion-avatar *ngIf="site.avatar">
                 <!-- Show user avatar. -->
                 <img [src]="site.avatar" class="avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" role="presentation" onError="this.src='assets/img/user-avatar.png'">