EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

main
Pau Ferrer Ocaña 2021-05-27 12:12:15 +02:00
parent 29bd7e4b38
commit 77f969284b
3 changed files with 26 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/addons/mod/quiz/pages/player/player.html
View File

@ -21,10 +21,8 @@
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header>
<ion-content>
<!-- Navigation arrows and time left. --> <!-- 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> <ion-title>
<core-timer [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate" <core-timer [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate"
[align]="'center'"> [align]="'center'">
@ -40,7 +38,8 @@
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header>
<ion-content>
<core-loading [hideUntil]="loaded"> <core-loading [hideUntil]="loaded">
<!-- Navigation arrows if there's no timer. --> <!-- Navigation arrows if there's no timer. -->
<ion-toolbar *ngIf="!endTime && questions.length && !quizAborted && !showSummary" color="light"> <ion-toolbar *ngIf="!endTime && questions.length && !quizAborted && !showSummary" color="light">

18
src/theme/theme.base.scss
View File

@ -153,7 +153,7 @@ ion-item.ion-text-wrap ion-label {
} }
} }
// Ionic toolbar. // Ionic toolbar on header.
ion-app.md ion-toolbar { ion-app.md ion-toolbar {
--min-height: #{$toolbar-height-md}; --min-height: #{$toolbar-height-md};
} }
@ -162,30 +162,32 @@ ion-app.ios ion-toolbar {
--min-height: #{$toolbar-height-ios}; --min-height: #{$toolbar-height-ios};
} }
ion-toolbar ion-back-button, ion-header ion-toolbar {
ion-toolbar .in-toolbar.button-clear { ion-back-button,
.in-toolbar.button-clear {
--color: var(--core-header-toolbar-color); --color: var(--core-header-toolbar-color);
--ion-toolbar-color: var(--core-header-toolbar-color); --ion-toolbar-color: var(--core-header-toolbar-color);
} }
ion-header ion-toolbar .button.button-clear, .button.button-clear,
ion-header ion-toolbar .button.button-solid { .button.button-solid {
--background: transparent; --background: transparent;
--color: var(--core-header-toolbar-color); --color: var(--core-header-toolbar-color);
--ion-color-primary: var(--core-header-toolbar-color); --ion-color-primary: var(--core-header-toolbar-color);
} }
ion-header ion-toolbar .button.button-clear.button-has-icon-only, .button.button-clear.button-has-icon-only,
ion-header ion-toolbar .button.button-solid.button-has-icon-only { .button.button-solid.button-has-icon-only {
--border-radius: 50%; --border-radius: 50%;
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
ion-toolbar .core-navbar-button-hidden { .core-navbar-button-hidden {
display: none !important; display: none !important;
} }
}
// Ionic icon. // Ionic icon.
ion-icon { ion-icon {

2
src/theme/theme.light.scss
View File

@ -107,7 +107,7 @@
--core-header-toolbar-button-image-size: #{$toolbar-button-image-size}; --core-header-toolbar-button-image-size: #{$toolbar-button-image-size};
--core-header-toolbar-background: #{$toolbar-background}; --core-header-toolbar-background: #{$toolbar-background};
--core-header-toolbar-color: #{$toolbar-color}; --core-header-toolbar-color: #{$toolbar-color};
ion-toolbar { ion-header ion-toolbar {
--color: var(--core-header-toolbar-color); --color: var(--core-header-toolbar-color);
--background: var(--core-header-toolbar-background); --background: var(--core-header-toolbar-background);
ion-button { ion-button {