MOBILE-3833 loading: Fix loading occupying full height

main
Pau Ferrer Ocaña 2022-04-19 15:58:18 +02:00
parent ffa95a5115
commit 91e8d8af55
2 changed files with 11 additions and 9 deletions

View File

@ -1,15 +1,16 @@
<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
<ion-button *ngIf="glossary && glossary.browsemodes && glossary.browsemodes.length > 1" (click)="openModePicker($event)"
<ion-button *ngIf="!showLoading && glossary && glossary.browsemodes && glossary.browsemodes.length > 1" (click)="openModePicker($event)"
[attr.aria-label]="'addon.mod_glossary.browsemode' | translate">
<ion-icon name="fas-sort" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button *ngIf="glossary" (click)="toggleSearch()" [attr.aria-label]="'addon.mod_glossary.bysearch' | translate">
<ion-button *ngIf="!showLoading && glossary" (click)="toggleSearch()" [attr.aria-label]="'addon.mod_glossary.bysearch' | translate">
<ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
<ion-button *ngIf="!showLoading" fill="clear" (click)="openModuleSummary()" aria-haspopup="true"
[attr.aria-label]="'core.info' | translate">
<ion-icon name="fas-info-circle" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</core-navbar-buttons>
@ -77,7 +78,7 @@
<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
</core-course-module-navigation>
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAdd">
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="canAdd && !showLoading">
<ion-fab-button (click)="openNewEntry()" [attr.aria-label]="'addon.mod_glossary.addentry' | translate">
<ion-icon name="fas-plus" aria-hidden="true"></ion-icon>
<span class="sr-only">{{ 'addon.mod_glossary.addentry' | translate }}</span>

View File

@ -3,9 +3,9 @@
@mixin inline() {
min-height: var(--internal-loading-inline-min-height);
max-height: 100vh; // In order show it on the page (content will be cut).
position: relative;
&:not(.core-loading-loaded) {
position: relative;
--contents-display: flex;
flex-direction: column;
}
@ -15,6 +15,7 @@
flex-direction: row;
height: auto;
width: auto;
position: absolute;
.core-loading-message {
@include margin(0, 0, 0, 10px);
@ -32,14 +33,14 @@
--internal-loading-inline-min-height: var(--loading-inline-min-height);
--loading-display: flex;
--loading-display-message: block;
--contents-display: contents;
--contents-display: block;
@include core-transition(all, 200ms);
pointer-events: none;
display: var(--contents-display);
&.core-loading-loaded {
position: static;
--contents-display: contents;
pointer-events: auto;
--internal-loading-inline-min-height: 0px;
@ -52,11 +53,11 @@
.core-loading-container {
pointer-events: none;
position: absolute;
position: fixed;
@include position(0, 0, 0, 0);
height: 100%;
width: 100%;
z-index: 3;
z-index: 100;
margin: 0;
padding: 0;
color: var(--loading-text-color);