From 23fccb22e542a8095521523fb70be9304f8f08ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 23 Apr 2024 11:39:06 +0200
Subject: [PATCH] MOBILE-4565 book: Fix book page footer

---
 .../mod/book/pages/contents/contents.scss     |  4 ++
 .../components/swipe-slides/swipe-slides.ts   |  2 +-
 src/theme/components/swiper.scss              | 62 +++++++++++++++++++
 src/theme/theme.base.scss                     | 61 ------------------
 src/theme/theme.scss                          |  1 +
 5 files changed, 68 insertions(+), 62 deletions(-)
 create mode 100644 src/theme/components/swiper.scss

diff --git a/src/addons/mod/book/pages/contents/contents.scss b/src/addons/mod/book/pages/contents/contents.scss
index 87e3729a3..c4e7488f9 100644
--- a/src/addons/mod/book/pages/contents/contents.scss
+++ b/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;
+    }
 }
diff --git a/src/core/components/swipe-slides/swipe-slides.ts b/src/core/components/swipe-slides/swipe-slides.ts
index 360968d83..49690e299 100644
--- a/src/core/components/swipe-slides/swipe-slides.ts
+++ b/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);
diff --git a/src/theme/components/swiper.scss b/src/theme/components/swiper.scss
new file mode 100644
index 000000000..ceb684684
--- /dev/null
+++ b/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%;
+        }
+    }
+}
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 8de6cf26d..5a2119282 100644
--- a/src/theme/theme.base.scss
+++ b/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;
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index 093663e33..9cd363bca 100644
--- a/src/theme/theme.scss
+++ b/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. */