From d0b6f429513d8afa84539ec139ac08e5ca132e76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 26 May 2021 10:33:34 +0200
Subject: [PATCH] MOBILE-3320 course: Position and style section nav buttons

---
 .../components/format/core-course-format.html       | 13 +++++++------
 .../features/course/components/format/format.scss   | 12 ++++++++++++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html
index 223fe9458..6aa6ce2f8 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -93,18 +93,19 @@
 
             <ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
                 *ngIf="displaySectionSelector && sections?.length">
-                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)"
-                    [attr.aria-label]="'core.previous' | translate">
+                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="outline"
+                    [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
                     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
-                    <core-format-text class="accesshide" [text]="previousSection.name" contextLevel="course"
+                    <core-format-text class="sr-only" [text]="previousSection.name" contextLevel="course"
                         [contextInstanceId]="course?.id">
                     </core-format-text>
                 </ion-button>
-                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" [attr.aria-label]="'core.next' | translate">
-                    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
-                    <core-format-text class="accesshide" [text]="nextSection.name" contextLevel="course"
+                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid"
+                    [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
+                    <core-format-text class="sr-only" [text]="nextSection.name" contextLevel="course"
                         [contextInstanceId]="course?.id">
                     </core-format-text>
+                    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-buttons>
         </core-loading>
diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss
index 0c0b7aca9..3e556b5d2 100644
--- a/src/core/features/course/components/format/format.scss
+++ b/src/core/features/course/components/format/format.scss
@@ -58,4 +58,16 @@
         }
     }
 
+    .core-course-section-nav-buttons {
+        display: flex;
+        justify-content: flex-end;
+
+        core-format-text {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            text-transform: none;
+        }
+    }
+
 }