MOBILE-3320 quiz: Include time left toolbar on header to fix position

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

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 {
+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 {
+    .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 {
+    .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 {
+    .core-navbar-button-hidden {
         display: none !important;
+    }
 }
 
 // Ionic icon.

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 {