From 77f969284b0616d66371af6fcef24d96cd4ce878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 27 May 2021 12:12:15 +0200
Subject: [PATCH] MOBILE-3320 quiz: Include time left toolbar on header to fix
 position

---
 src/addons/mod/quiz/pages/player/player.html |  7 ++--
 src/theme/theme.base.scss                    | 42 ++++++++++----------
 src/theme/theme.light.scss                   |  2 +-
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index d3df9686d..31fb22135 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -21,10 +21,8 @@
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
-</ion-header>
-<ion-content>
     <!-- Navigation arrows and time left. -->
-    <ion-toolbar *ngIf="loaded && endTime && questions.length && !quizAborted && !showSummary" color="light" slot="fixed">
+    <ion-toolbar *ngIf="loaded && endTime && questions.length && !quizAborted && !showSummary" color="light">
         <ion-title>
             <core-timer [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate"
                 [align]="'center'">
@@ -40,7 +38,8 @@
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
-
+</ion-header>
+<ion-content>
     <core-loading [hideUntil]="loaded">
         <!-- Navigation arrows if there's no timer. -->
         <ion-toolbar *ngIf="!endTime && questions.length && !quizAborted && !showSummary" color="light">
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 8461285ed..12670beaa 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -153,7 +153,7 @@ ion-item.ion-text-wrap ion-label {
     }
 }
 
-// Ionic toolbar.
+// Ionic toolbar on header.
 ion-app.md ion-toolbar {
     --min-height: #{$toolbar-height-md};
 }
@@ -162,29 +162,31 @@ ion-app.ios ion-toolbar {
     --min-height: #{$toolbar-height-ios};
 }
 
-ion-toolbar ion-back-button,
-ion-toolbar .in-toolbar.button-clear {
-    --color: var(--core-header-toolbar-color);
-    --ion-toolbar-color: var(--core-header-toolbar-color);
-}
+ion-header ion-toolbar {
+    ion-back-button,
+    .in-toolbar.button-clear {
+        --color: var(--core-header-toolbar-color);
+        --ion-toolbar-color: var(--core-header-toolbar-color);
+    }
 
-ion-header ion-toolbar .button.button-clear,
-ion-header ion-toolbar .button.button-solid {
-    --background: transparent;
-    --color: var(--core-header-toolbar-color);
-    --ion-color-primary: var(--core-header-toolbar-color);
-}
+    .button.button-clear,
+    .button.button-solid {
+        --background: transparent;
+        --color: var(--core-header-toolbar-color);
+        --ion-color-primary: var(--core-header-toolbar-color);
+    }
 
-ion-header ion-toolbar .button.button-clear.button-has-icon-only,
-ion-header ion-toolbar .button.button-solid.button-has-icon-only {
-    --border-radius: 50%;
-    width: 48px;
-    height: 48px;
-}
+    .button.button-clear.button-has-icon-only,
+    .button.button-solid.button-has-icon-only {
+        --border-radius: 50%;
+        width: 48px;
+        height: 48px;
+    }
 
 
-ion-toolbar .core-navbar-button-hidden {
-    display: none !important;
+    .core-navbar-button-hidden {
+        display: none !important;
+    }
 }
 
 // Ionic icon.
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 20ee9e9c1..102ea5bdd 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -107,7 +107,7 @@
     --core-header-toolbar-button-image-size: #{$toolbar-button-image-size};
     --core-header-toolbar-background: #{$toolbar-background};
     --core-header-toolbar-color: #{$toolbar-color};
-    ion-toolbar {
+    ion-header ion-toolbar {
         --color: var(--core-header-toolbar-color);
         --background: var(--core-header-toolbar-background);
         ion-button {