MOBILE-4565 book: Fix book page footer

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

@@ -4,4 +4,8 @@
             flex: none;
         }
     }
+
+    .has-collapsible-footer ::ng-deep swiper-container::part(container) {
+        padding-bottom: 50px;
+    }
 }

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

@@ -348,7 +348,7 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
             return;
         }
 
-        this.swiper?.update();
+        this.swiper.update();
 
         // We need to ensure the slides are updated before continuing.
         await CoreUtils.nextTicks(2);

src/theme/components/swiper.scss

@@ -0,0 +1,62 @@
+
+swiper-container {
+    --swiper-theme-color: var(--ion-color-primary, #3880ff);
+    --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
+    --swiper-pagination-color: var(--swiper-theme-color);
+    --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
+    --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+    --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
+    width: 100%;
+    max-width: 100%;
+    max-height: 100vh;
+    // CSS Grid/Flexbox bug size workaround
+    // @see https://github.com/kenwheeler/slick/issues/982
+    // @see https://github.com/nolimits4web/swiper/issues/3599
+    min-height: 0;
+    min-width: 0;
+
+    swiper-slide {
+        display: flex;
+        position: relative;
+
+        flex-direction: column;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 100%;
+
+        font-size: 18px;
+
+        text-align: center;
+        box-sizing: border-box;
+
+        img {
+            width: auto;
+            max-width: 100%;
+            height: auto;
+            max-height: 100%;
+        }
+    }
+}
+
+
+// To make core-swipe-slides fill the remaining height.
+.core-swipe-slides-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: 100%;
+
+    core-swipe-slides {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+
+        swiper-container {
+            flex-grow: 1;
+            max-width: 100%;
+        }
+    }
+}

src/theme/theme.base.scss

@@ -1243,67 +1243,6 @@ ion-grid.core-no-grid > ion-row {
     }
 }
 
-// To make core-swipe-slides fill the remaining height.
-.core-swipe-slides-container {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    min-height: 100%;
-
-    core-swipe-slides {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-
-        swiper-container {
-            flex-grow: 1;
-            max-width: 100%;
-        }
-    }
-}
-
-swiper-container {
-    --swiper-theme-color: var(--ion-color-primary, #3880ff);
-    --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
-    --swiper-pagination-color: var(--swiper-theme-color);
-    --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
-    --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
-    --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
-    width: 100%;
-    max-width: 100%;
-    max-height: 100vh;
-    // CSS Grid/Flexbox bug size workaround
-    // @see https://github.com/kenwheeler/slick/issues/982
-    // @see https://github.com/nolimits4web/swiper/issues/3599
-    min-height: 0;
-    min-width: 0;
-
-    swiper-slide {
-        display: flex;
-        position: relative;
-
-        flex-direction: column;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: center;
-
-        width: 100%;
-        height: 100%;
-
-        font-size: 18px;
-
-        text-align: center;
-        box-sizing: border-box;
-
-        img {
-            width: auto;
-            max-width: 100%;
-            height: auto;
-            max-height: 100%;
-        }
-    }
-}
-
 .has-spacer,
 .core-flex-fill {
     display: flex;

src/theme/theme.scss

@@ -44,6 +44,7 @@ html {
     @import "components/ion-searchbar.scss";
     @import "components/ion-spinner.scss";
     @import "components/ion-toast.scss";
+    @import "components/swiper.scss";
 }
 
 /* Some styles from 3rd party libraries. */