Merge pull request #3131 from dpalou/MOBILE-3927

MOBILE-3927 swipe: Make swipe-slides fill whole height

src/addons/calendar/components/calendar/addon-calendar-calendar.html

@@ -7,7 +7,8 @@
     </core-context-menu>
 </core-navbar-buttons>
 
-<core-loading [hideUntil]="loaded" class="safe-area-padding">
+<core-loading [hideUntil]="loaded" class="safe-area-padding core-loading-full-height">
+    <div class="core-swipe-slides-container">
         <!-- Period name and arrows to navigate. -->
         <ion-grid class="ion-no-padding addon-calendar-navigation">
             <ion-row class="ion-align-items-center">
@@ -104,5 +105,6 @@
                 </ion-grid>
             </ng-template>
         </core-swipe-slides>
+    </div>
 
 </core-loading>

src/addons/calendar/components/calendar/calendar.scss

@@ -3,6 +3,11 @@
 :host {
     --addon-calendar-blank-day-background-color: var(--light);
 
+    .core-swipe-slides-container ion-grid {
+        flex: none;
+        width: 100%;
+    }
+
     .addon-calendar-navigation {
         padding-top: 5px;
         padding-left: 10px;

src/addons/calendar/pages/day/day.html

@@ -27,7 +27,8 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="core-loading-full-height">
+        <div class="core-swipe-slides-container">
             <!-- Period name and arrows to navigate. -->
             <ion-grid class="ion-no-padding safe-area-padding">
                 <ion-row class="ion-align-items-center">
@@ -99,6 +100,7 @@
                     </core-loading>
                 </ng-template>
             </core-swipe-slides>
+        </div>
     </core-loading>
 
     <!-- Create a calendar event. -->

src/addons/calendar/pages/day/day.scss

@@ -1,4 +1,9 @@
 :host {
+    .core-swipe-slides-container ion-grid {
+        flex: none;
+        width: 100%;
+    }
+
     .addon-calendar-period {
         flex-grow: 3;
         h3 {
@@ -6,8 +11,4 @@
             font-size: 1.2rem;
         }
     }
-
-    core-swipe-slides {
-        --swipe-slides-min-height: calc(100% - 52px);
-    }
 }

src/addons/mod/book/pages/contents/contents.html

@@ -21,7 +21,8 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="core-loading-full-height">
+        <div class="safe-area-padding-horizontal core-swipe-slides-container">
 
             <ion-card class="core-warning-card" *ngIf="warning">
                 <ion-item>
@@ -30,7 +31,6 @@
                 </ion-item>
             </ion-card>
 
-        <div class="safe-area-padding-horizontal">
             <core-navigation-bar *ngIf="displayNavBar" [items]="navigationItems" [showTitles]="displayTitlesInNavBar"
                 previousTranslate="addon.mod_book.navprevtitle" nextTranslate="addon.mod_book.navnexttitle"
                 (action)="changeChapter($event.id)">

src/addons/mod/book/pages/contents/contents.scss

@@ -0,0 +1,7 @@
+:host {
+    .core-swipe-slides-container {
+        ion-card, core-navigation-bar {
+            flex: none;
+        }
+    }
+}

src/addons/mod/book/pages/contents/contents.ts

@@ -47,6 +47,7 @@ import {
 @Component({
     selector: 'page-addon-mod-book-contents',
     templateUrl: 'contents.html',
+    styleUrls: ['contents.scss'],
 })
 export class AddonModBookContentsPage implements OnInit, OnDestroy {
 

src/core/components/loading/loading.scss

@@ -71,6 +71,10 @@
         }
     }
 
+    &.core-loading-full-height .core-loading-content {
+        height: 100%;
+    }
+
     &.safe-area-padding:not(.core-loading-inline) .core-loading-content,
     &.safe-area-padding-horizontal:not(.core-loading-inline) .core-loading-content {
         @include safe-area-padding-horizontal(0px, 0px);

src/core/components/swipe-slides/swipe-slides.scss

@@ -1,8 +1,6 @@
 :host {
-    --swipe-slides-min-height: auto;
-
     ion-slides {
-        min-height: var(--swipe-slides-min-height);
+        height: 100%;
     }
 
     ion-slide {

src/core/components/swipe-slides/swipe-slides.ts

@@ -181,17 +181,8 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
 
         this.onWillChange.emit(currentItemData);
 
-        if (this.options.scrollOnChange !== 'top') {
-            return;
-        }
-
-        // Scroll top. This can be improved in the future to keep the scroll for each slide.
-        const scrollElement = await this.content?.getScrollElement();
-
-        if (!scrollElement || CoreDomUtils.isElementOutsideOfScreen(scrollElement, this.hostElement, VerticalPoint.TOP)) {
-            // Scroll to top.
-            this.hostElement.scrollIntoView({ behavior: 'smooth' });
-        }
+        // Apply scroll on change. In some devices it's too soon to do it, that's why it's done again in DidChange.
+        await this.applyScrollOnChange();
     }
 
     /**
@@ -204,6 +195,27 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
         }
 
         this.onDidChange.emit(currentItemData);
+
+        await this.applyScrollOnChange();
+    }
+
+    /**
+     * Treat scroll on change.
+     *
+     * @return Promise resolved when done.
+     */
+    protected async applyScrollOnChange(): Promise<void> {
+        if (this.options.scrollOnChange !== 'top') {
+            return;
+        }
+
+        // Scroll top. This can be improved in the future to keep the scroll for each slide.
+        const scrollElement = await this.content?.getScrollElement();
+
+        if (!scrollElement || CoreDomUtils.isElementOutsideOfScreen(scrollElement, this.hostElement, VerticalPoint.TOP)) {
+            // Scroll to top.
+            this.hostElement.scrollIntoView({ behavior: 'smooth' });
+        }
     }
 
     /**

src/core/features/login/pages/site-policy/site-policy.html

@@ -10,7 +10,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="policyLoaded">
+    <core-loading [hideUntil]="policyLoaded" class="core-loading-full-height">
         <ion-list *ngIf="sitePolicy">
             <ion-item class="ion-text-wrap">
                 <ion-label>

src/core/features/login/pages/site-policy/site-policy.scss

@@ -18,9 +18,3 @@
         }
     }
 }
-
-:host core-loading ::ng-deep {
-    .core-loading-content {
-        height: 100%;
-    }
-}

src/theme/theme.base.scss

@@ -1581,3 +1581,14 @@ ion-app.md .collapsible-title h1 {
 body.core-iframe-fullscreen ion-content {
     --offset-top: 0px !important;
 }
+
+// To make core-swipe-slides fill the remaining height.
+.core-swipe-slides-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    core-swipe-slides {
+        flex-grow: 1;
+    }
+}