From dd1050d4e6cc25063e279abd5fe7f65124088fa5 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Mon, 21 Feb 2022 15:44:34 +0100
Subject: [PATCH] MOBILE-3927 swipe: Make swipe-slides fill whole height

---
 .../calendar/addon-calendar-calendar.html     | 192 +++++++++---------
 .../components/calendar/calendar.scss         |   5 +
 src/addons/calendar/pages/day/day.html        | 142 ++++++-------
 src/addons/calendar/pages/day/day.scss        |   9 +-
 .../mod/book/pages/contents/contents.html     |  16 +-
 .../mod/book/pages/contents/contents.scss     |   7 +
 .../mod/book/pages/contents/contents.ts       |   1 +
 src/core/components/loading/loading.scss      |   4 +
 .../components/swipe-slides/swipe-slides.scss |   4 +-
 .../components/swipe-slides/swipe-slides.ts   |  34 +++-
 .../login/pages/site-policy/site-policy.html  |   2 +-
 .../login/pages/site-policy/site-policy.scss  |   6 -
 src/theme/theme.base.scss                     |  11 +
 13 files changed, 235 insertions(+), 198 deletions(-)
 create mode 100644 src/addons/mod/book/pages/contents/contents.scss

diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
index 9d072a910..39466f120 100644
--- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
@@ -7,102 +7,104 @@
     </core-context-menu>
 </core-navbar-buttons>
 
-<core-loading [hideUntil]="loaded" class="safe-area-padding">
-    <!-- Period name and arrows to navigate. -->
-    <ion-grid class="ion-no-padding addon-calendar-navigation">
-        <ion-row class="ion-align-items-center">
-            <ion-col class="ion-text-start" *ngIf="canNavigate">
-                <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'core.previous' | translate">
-                    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
-                </ion-button>
-            </ion-col>
-            <ion-col class="ion-text-center addon-calendar-period">
-                <h2 id="addon-calendar-monthname">
-                    {{ periodName }}
-                    <ion-spinner *ngIf="!selectedMonthLoaded()" class="addon-calendar-loading-month">
-                    </ion-spinner>
-                </h2>
-            </ion-col>
-            <ion-col class="ion-text-end" *ngIf="canNavigate">
-                <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'core.next' | translate">
-                    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
-                </ion-button>
-            </ion-col>
-        </ion-row>
-    </ion-grid>
+<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">
+                <ion-col class="ion-text-start" *ngIf="canNavigate">
+                    <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'core.previous' | translate">
+                        <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                </ion-col>
+                <ion-col class="ion-text-center addon-calendar-period">
+                    <h2 id="addon-calendar-monthname">
+                        {{ periodName }}
+                        <ion-spinner *ngIf="!selectedMonthLoaded()" class="addon-calendar-loading-month">
+                        </ion-spinner>
+                    </h2>
+                </ion-col>
+                <ion-col class="ion-text-end" *ngIf="canNavigate">
+                    <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'core.next' | translate">
+                        <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                </ion-col>
+            </ion-row>
+        </ion-grid>
 
-    <core-swipe-slides [manager]="manager">
-        <ng-template let-month="item">
-            <!-- Calendar view. -->
-            <ion-grid class="addon-calendar-months" role="table" aria-describedby="addon-calendar-monthname">
-                <div role="rowgroup">
-                    <!-- List of days. -->
-                    <ion-row role="row">
-                        <ion-col class="ion-text-center addon-calendar-weekday" *ngFor="let day of month.weekDays" role="columnheader">
-                            <span class="sr-only">{{ day.fullname | translate }}</span>
-                            <span class="ion-hide-md-up" aria-hidden="true">{{ day.shortname | translate }}</span>
-                            <span class="ion-hide-md-down" aria-hidden="true">{{ day.fullname | translate }}</span>
-                        </ion-col>
-                    </ion-row>
-                </div>
-                <div role="rowgroup">
-                    <!-- Weeks. -->
-                    <ion-row *ngFor="let week of month.weeks" class="addon-calendar-week" role="row">
-                        <!-- Empty slots (first week). -->
-                        <ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day" role="cell">
-                        </ion-col>
-                        <ion-col *ngFor="let day of week.days" class="addon-calendar-day ion-text-center" [ngClass]='{
-                                "hasevents": day.hasevents,
-                                "today": month.isCurrentMonth && day.istoday,
-                                "weekend": day.isweekend,
-                                "duration_finish": day.haslastdayofevent
-                            }' [class.addon-calendar-event-past-day]="month.isPastMonth || day.ispast" role="cell" tabindex="0"
-                            (ariaButtonClick)="dayClicked(day.mday)">
-                            <p class="addon-calendar-day-number" role="button">
-                                <span aria-hidden="true">{{ day.mday }}</span>
-                                <span class="sr-only">{{ day.periodName | translate }}</span>
-                            </p>
-
-                            <!-- In phone, display some dots to indicate the type of events. -->
-                            <p class="ion-hide-md-up addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes"
-                                    class="calendar_event_type calendar_event_{{type}}"></span></p>
-
-                            <!-- In tablet, display list of events. -->
-                            <div class="ion-hide-md-down addon-calendar-day-events" *ngIf="day.filteredEvents">
-                                <ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
-                                    <div *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event"
-                                        [class.addon-calendar-event-past]="event.ispast" role="button" tabindex="0"
-                                        (ariaButtonClick)="eventClicked(event, $event)">
-                                        <span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
-                                        <ion-icon *ngIf="event.offline && !event.deleted" name="fas-clock"
-                                            [attr.aria-label]="'core.notsent' | translate"></ion-icon>
-                                        <ion-icon *ngIf="event.deleted" name="fas-trash"
-                                            [attr.aria-label]="'core.deletedoffline' | translate"></ion-icon>
-                                        <span class="addon-calendar-event-time">
-                                            {{ event.timestart * 1000 | coreFormatDate: timeFormat }}
-                                        </span>
-                                        <!-- Add the icon title so accessibility tools read it. -->
-                                        <span class="sr-only">
-                                            {{ 'addon.calendar.type' + event.formattedType | translate }}
-                                            <span class="sr-only" *ngIf="event.iconTitle">
-                                                {{ event.iconTitle }}
-                                            </span>
-                                        </span>
-                                        <span class="addon-calendar-event-name">{{event.name}}</span>
-                                    </div>
-                                </ng-container>
-                                <p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more">
-                                    <b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b>
+        <core-swipe-slides [manager]="manager">
+            <ng-template let-month="item">
+                <!-- Calendar view. -->
+                <ion-grid class="addon-calendar-months" role="table" aria-describedby="addon-calendar-monthname">
+                    <div role="rowgroup">
+                        <!-- List of days. -->
+                        <ion-row role="row">
+                            <ion-col class="ion-text-center addon-calendar-weekday" *ngFor="let day of month.weekDays" role="columnheader">
+                                <span class="sr-only">{{ day.fullname | translate }}</span>
+                                <span class="ion-hide-md-up" aria-hidden="true">{{ day.shortname | translate }}</span>
+                                <span class="ion-hide-md-down" aria-hidden="true">{{ day.fullname | translate }}</span>
+                            </ion-col>
+                        </ion-row>
+                    </div>
+                    <div role="rowgroup">
+                        <!-- Weeks. -->
+                        <ion-row *ngFor="let week of month.weeks" class="addon-calendar-week" role="row">
+                            <!-- Empty slots (first week). -->
+                            <ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day" role="cell">
+                            </ion-col>
+                            <ion-col *ngFor="let day of week.days" class="addon-calendar-day ion-text-center" [ngClass]='{
+                                    "hasevents": day.hasevents,
+                                    "today": month.isCurrentMonth && day.istoday,
+                                    "weekend": day.isweekend,
+                                    "duration_finish": day.haslastdayofevent
+                                }' [class.addon-calendar-event-past-day]="month.isPastMonth || day.ispast" role="cell" tabindex="0"
+                                (ariaButtonClick)="dayClicked(day.mday)">
+                                <p class="addon-calendar-day-number" role="button">
+                                    <span aria-hidden="true">{{ day.mday }}</span>
+                                    <span class="sr-only">{{ day.periodName | translate }}</span>
                                 </p>
-                            </div>
-                        </ion-col>
-                        <!-- Empty slots (last week). -->
-                        <ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day" role="cell">
-                        </ion-col>
-                    </ion-row>
-                </div>
-            </ion-grid>
-        </ng-template>
-    </core-swipe-slides>
+
+                                <!-- In phone, display some dots to indicate the type of events. -->
+                                <p class="ion-hide-md-up addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes"
+                                        class="calendar_event_type calendar_event_{{type}}"></span></p>
+
+                                <!-- In tablet, display list of events. -->
+                                <div class="ion-hide-md-down addon-calendar-day-events" *ngIf="day.filteredEvents">
+                                    <ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
+                                        <div *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event"
+                                            [class.addon-calendar-event-past]="event.ispast" role="button" tabindex="0"
+                                            (ariaButtonClick)="eventClicked(event, $event)">
+                                            <span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
+                                            <ion-icon *ngIf="event.offline && !event.deleted" name="fas-clock"
+                                                [attr.aria-label]="'core.notsent' | translate"></ion-icon>
+                                            <ion-icon *ngIf="event.deleted" name="fas-trash"
+                                                [attr.aria-label]="'core.deletedoffline' | translate"></ion-icon>
+                                            <span class="addon-calendar-event-time">
+                                                {{ event.timestart * 1000 | coreFormatDate: timeFormat }}
+                                            </span>
+                                            <!-- Add the icon title so accessibility tools read it. -->
+                                            <span class="sr-only">
+                                                {{ 'addon.calendar.type' + event.formattedType | translate }}
+                                                <span class="sr-only" *ngIf="event.iconTitle">
+                                                    {{ event.iconTitle }}
+                                                </span>
+                                            </span>
+                                            <span class="addon-calendar-event-name">{{event.name}}</span>
+                                        </div>
+                                    </ng-container>
+                                    <p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more">
+                                        <b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b>
+                                    </p>
+                                </div>
+                            </ion-col>
+                            <!-- Empty slots (last week). -->
+                            <ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day" role="cell">
+                            </ion-col>
+                        </ion-row>
+                    </div>
+                </ion-grid>
+            </ng-template>
+        </core-swipe-slides>
+    </div>
 
 </core-loading>
diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss
index 35cd3ccbd..7a358700e 100644
--- a/src/addons/calendar/components/calendar/calendar.scss
+++ b/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;
diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index 62939f984..d245f7258 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -27,78 +27,80 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="loaded">
-        <!-- Period name and arrows to navigate. -->
-        <ion-grid class="ion-no-padding safe-area-padding">
-            <ion-row class="ion-align-items-center">
-                <ion-col class="ion-text-start">
-                    <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.dayprev' | translate">
-                        <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
-                    </ion-button>
-                </ion-col>
-                <ion-col class="ion-text-center addon-calendar-period">
-                    <h3>{{ periodName }}</h3>
-                </ion-col>
-                <ion-col class="ion-text-end">
-                    <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.daynext' | translate">
-                        <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
-                    </ion-button>
-                </ion-col>
-            </ion-row>
-        </ion-grid>
+    <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">
+                    <ion-col class="ion-text-start">
+                        <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.dayprev' | translate">
+                            <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+                        </ion-button>
+                    </ion-col>
+                    <ion-col class="ion-text-center addon-calendar-period">
+                        <h3>{{ periodName }}</h3>
+                    </ion-col>
+                    <ion-col class="ion-text-end">
+                        <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.daynext' | translate">
+                            <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+                        </ion-button>
+                    </ion-col>
+                </ion-row>
+            </ion-grid>
 
-        <core-swipe-slides [manager]="manager">
-            <ng-template let-day="item">
-                <core-loading [hideUntil]="day.loaded" class="safe-area-padding">
-                    <!-- There is data to be synchronized -->
-                    <ion-card class="core-warning-card" *ngIf="day.hasOffline">
-                        <ion-item>
-                            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-                            <ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
-                        </ion-item>
-                    </ion-card>
-
-                    <core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar" inline="true"
-                        [message]="'addon.calendar.noevents' | translate">
-                    </core-empty-box>
-
-                    <ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="ion-no-margin">
-                        <ng-container *ngFor="let event of day.filteredEvents">
-                            <ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name"
-                                (click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast"
-                                [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
-                                <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
-                                    [modname]="event.modulename" [componentId]="event.instance">
-                                </core-mod-icon>
-                                <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
-                                    aria-hidden="true">
-                                </ion-icon>
-                                <ion-label>
-                                    <!-- Add the icon title so accessibility tools read it. -->
-                                    <span class="sr-only">
-                                        {{ 'addon.calendar.type' + event.formattedType | translate }}
-                                        <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
-                                    </span>
-                                    <p class="item-heading">
-                                        <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
-                                            [contextInstanceId]="event.contextInstanceId"></core-format-text>
-                                    </p>
-                                    <p [innerHTML]="event.formattedtime"></p>
-                                </ion-label>
-                                <ion-note *ngIf="event.offline && !event.deleted" slot="end">
-                                    <ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
-                                    <span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
-                                </ion-note>
-                                <ion-note *ngIf="event.deleted" slot="end">
-                                    <ion-icon name="fas-trash" aria-hidden="true"></ion-icon>
-                                    <span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
-                                </ion-note>
+            <core-swipe-slides [manager]="manager">
+                <ng-template let-day="item">
+                    <core-loading [hideUntil]="day.loaded" class="safe-area-padding">
+                        <!-- There is data to be synchronized -->
+                        <ion-card class="core-warning-card" *ngIf="day.hasOffline">
+                            <ion-item>
+                                <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+                                <ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
                             </ion-item>
-                        </ng-container>
-                    </ion-list>
-                </core-loading>
-            </ng-template>
-        </core-swipe-slides>
+                        </ion-card>
+
+                        <core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar" inline="true"
+                            [message]="'addon.calendar.noevents' | translate">
+                        </core-empty-box>
+
+                        <ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="ion-no-margin">
+                            <ng-container *ngFor="let event of day.filteredEvents">
+                                <ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name"
+                                    (click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast"
+                                    [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
+                                    <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
+                                        [modname]="event.modulename" [componentId]="event.instance">
+                                    </core-mod-icon>
+                                    <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
+                                        aria-hidden="true">
+                                    </ion-icon>
+                                    <ion-label>
+                                        <!-- Add the icon title so accessibility tools read it. -->
+                                        <span class="sr-only">
+                                            {{ 'addon.calendar.type' + event.formattedType | translate }}
+                                            <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
+                                        </span>
+                                        <p class="item-heading">
+                                            <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
+                                                [contextInstanceId]="event.contextInstanceId"></core-format-text>
+                                        </p>
+                                        <p [innerHTML]="event.formattedtime"></p>
+                                    </ion-label>
+                                    <ion-note *ngIf="event.offline && !event.deleted" slot="end">
+                                        <ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
+                                        <span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
+                                    </ion-note>
+                                    <ion-note *ngIf="event.deleted" slot="end">
+                                        <ion-icon name="fas-trash" aria-hidden="true"></ion-icon>
+                                        <span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
+                                    </ion-note>
+                                </ion-item>
+                            </ng-container>
+                        </ion-list>
+                    </core-loading>
+                </ng-template>
+            </core-swipe-slides>
+        </div>
     </core-loading>
 
     <!-- Create a calendar event. -->
diff --git a/src/addons/calendar/pages/day/day.scss b/src/addons/calendar/pages/day/day.scss
index d3fdad33c..145eccfb8 100644
--- a/src/addons/calendar/pages/day/day.scss
+++ b/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);
-    }
 }
diff --git a/src/addons/mod/book/pages/contents/contents.html b/src/addons/mod/book/pages/contents/contents.html
index f5a6d6f4a..6e6334aab 100644
--- a/src/addons/mod/book/pages/contents/contents.html
+++ b/src/addons/mod/book/pages/contents/contents.html
@@ -21,16 +21,16 @@
         <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>
-                <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
-                <ion-label><span [innerHTML]="warning"></span></ion-label>
-            </ion-item>
-        </ion-card>
+            <ion-card class="core-warning-card" *ngIf="warning">
+                <ion-item>
+                    <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-label><span [innerHTML]="warning"></span></ion-label>
+                </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)">
diff --git a/src/addons/mod/book/pages/contents/contents.scss b/src/addons/mod/book/pages/contents/contents.scss
new file mode 100644
index 000000000..de654bcac
--- /dev/null
+++ b/src/addons/mod/book/pages/contents/contents.scss
@@ -0,0 +1,7 @@
+:host {
+    .core-swipe-slides-container {
+        ion-card, core-navigation-bar {
+            flex: none;
+        }
+    }
+}
diff --git a/src/addons/mod/book/pages/contents/contents.ts b/src/addons/mod/book/pages/contents/contents.ts
index 0f2444198..36af98196 100644
--- a/src/addons/mod/book/pages/contents/contents.ts
+++ b/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 {
 
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index 6f439e64e..bd77cefd5 100644
--- a/src/core/components/loading/loading.scss
+++ b/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);
diff --git a/src/core/components/swipe-slides/swipe-slides.scss b/src/core/components/swipe-slides/swipe-slides.scss
index 71cf2f9f6..90b467e57 100644
--- a/src/core/components/swipe-slides/swipe-slides.scss
+++ b/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 {
diff --git a/src/core/components/swipe-slides/swipe-slides.ts b/src/core/components/swipe-slides/swipe-slides.ts
index 139393670..a169714e4 100644
--- a/src/core/components/swipe-slides/swipe-slides.ts
+++ b/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' });
+        }
     }
 
     /**
diff --git a/src/core/features/login/pages/site-policy/site-policy.html b/src/core/features/login/pages/site-policy/site-policy.html
index 05a67d683..af2cd7267 100644
--- a/src/core/features/login/pages/site-policy/site-policy.html
+++ b/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>
diff --git a/src/core/features/login/pages/site-policy/site-policy.scss b/src/core/features/login/pages/site-policy/site-policy.scss
index f54f35631..fa7bca312 100644
--- a/src/core/features/login/pages/site-policy/site-policy.scss
+++ b/src/core/features/login/pages/site-policy/site-policy.scss
@@ -18,9 +18,3 @@
         }
     }
 }
-
-:host core-loading ::ng-deep {
-    .core-loading-content {
-        height: 100%;
-    }
-}
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index c0d3691c8..ff9231e33 100644
--- a/src/theme/theme.base.scss
+++ b/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;
+    }
+}