From f5c5b0e65e2d93bd58a222b2fd36c9dcb5b6d4e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 28 May 2021 14:34:50 +0200
Subject: [PATCH] MOBILE-3320 style: Layout improvements

---
 src/addons/blog/pages/entries/entries.html             |  2 +-
 .../components/calendar/addon-calendar-calendar.html   |  2 +-
 .../addon-calendar-upcoming-events.html                |  2 +-
 src/addons/messages/pages/contacts/contacts.html       |  4 ++--
 src/core/components/tabs/tabs.scss                     | 10 ++++++++--
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index e168d0f2b..94e0fb5e2 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -11,7 +11,7 @@
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refresh($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="core-loading-center">
+    <core-loading [hideUntil]="loaded">
         <ion-item *ngIf="showMyEntriesToggle">
             <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
             <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)"></ion-toggle>
diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
index 62d65cc20..a0aae3188 100644
--- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
@@ -8,7 +8,7 @@
     </core-context-menu>
 </core-navbar-buttons>
 
-<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
+<core-loading [hideUntil]="loaded" class="safe-area-page">
     <!-- Period name and arrows to navigate. -->
     <ion-grid class="ion-no-padding addon-calendar-navigation">
         <ion-row class="ion-align-items-center">
diff --git a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
index d8ac7e917..46de2aacf 100644
--- a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
+++ b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
@@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded">
     <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar" [message]="'addon.calendar.noevents' | translate">
     </core-empty-box>
 
diff --git a/src/addons/messages/pages/contacts/contacts.html b/src/addons/messages/pages/contacts/contacts.html
index 43623185f..dcdd35ab1 100644
--- a/src/addons/messages/pages/contacts/contacts.html
+++ b/src/addons/messages/pages/contacts/contacts.html
@@ -24,7 +24,7 @@
                     <ion-refresher slot="fixed" [disabled]="!confirmedLoaded" (ionRefresh)="refreshData($event.target)">
                         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
                     </ion-refresher>
-                    <core-loading [hideUntil]="confirmedLoaded" class="core-loading-center">
+                    <core-loading [hideUntil]="confirmedLoaded">
                         <ion-list class="ion-no-margin">
                             <ion-item class="ion-text-wrap addon-messages-conversation-item" (click)="selectUser(contact.id)" button
                                 *ngFor="let contact of confirmedContacts" [attr.aria-label]="contact.fullname" detail="true"
@@ -62,7 +62,7 @@
                     <ion-refresher slot="fixed" [disabled]="!requestsLoaded" (ionRefresh)="refreshData($event.target)">
                         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
                     </ion-refresher>
-                    <core-loading [hideUntil]="requestsLoaded" class="core-loading-center">
+                    <core-loading [hideUntil]="requestsLoaded">
                         <ion-list class="ion-no-margin">
                             <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let request of requests"
                                 [attr.aria-label]="request.fullname" (click)="selectUser(request.id)" button
diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss
index 8bc9d4b3e..b20e3c3c4 100644
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@@ -3,7 +3,8 @@
     --tabs-color: var(--core-tab-color);
     --height: 56px;
     height: 100%;
-    display: block;
+    display: flex;
+    flex-direction: column;
 
     ion-tabs {
         background: transparent;
@@ -82,7 +83,7 @@
             z-index: 1;
 
             &.selected {
-                display: block;
+                display: contents;
             }
 
             ion-header {
@@ -95,6 +96,11 @@
             }
         }
     }
+
+    div.core-tabs-content-container {
+        flex-grow: 1;
+        position: relative;
+    }
 }