fix: pagination

src/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <ion-app>
+  <ion-app class="main">
     <PagesHeader />
     <ion-content>
-      <ion-router-outlet id="main-content" />
+      <ion-router-outlet class="main" id="main-content" />
     </ion-content>
   </ion-app>
 </template>
@@ -11,6 +11,12 @@
 import { IonApp, IonRouterOutlet } from "@ionic/vue";
 import { IonContent } from "@ionic/vue";
 import PagesHeader from "@/components/PagesHeader.vue";
-
-import "./theme/main.css";
 </script>
+
+<style>
+.main {
+  background-color: var(--ion-color-light);
+  height: 100%;
+  min-height: 0;
+}
+</style>

src/components/IllusionSwiper.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+import AudioGuide from "@/components/AudioGuide.vue";
+import { ref } from "vue";
+
+const props = defineProps<{
+  data: any;
+}>();
+
+const pagination = ref<HTMLElement | null>(null);
+
+defineEmits(["onSlideIndexChange"]);
+</script>
+
+<template>
+  <swiper
+    :pagination="{
+      clickable: true,
+      el: pagination,
+      bulletClass: 'pagination-bullet',
+      bulletActiveClass: 'pagination-bullet-active',
+    }"
+    :modules="[Pagination]"
+    :space-between="250"
+    :auto-height="false"
+    @slide-change-transition-end="
+      (e) => $emit('onSlideIndexChange', e.activeIndex)
+    "
+    class="swiper-horizontal"
+  >
+    <swiper-slide v-for="element in props.data" :key="element.titre">
+      <section>
+        <h4>{{ element.fields.titre }}</h4>
+        <img :src="element.fields.image[0].url" alt="hallan" />
+        <AudioGuide :src="element.fields.audio[0].url" />
+      </section>
+    </swiper-slide>
+  </swiper>
+  <div ref="pagination" slot="pagination" class="swiper-pagination"></div>
+</template>
+
+<style scoped>
+.swiper-pagination {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 32px;
+}
+
+.swiper-horizontal {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+img {
+  height: 100%;
+  object-fit: cover;
+  border-radius: 14px;
+  min-height: 0;
+}
+
+h4 {
+  text-align: left;
+  font-size: 30px;
+  font-weight: 600;
+  color: var(--ion-color-dark);
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  height: 100%;
+  min-height: 0;
+}
+</style>

src/main.ts

@@ -1,32 +1,31 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
-import router from './router';
+import router from "./router";
 
-import { IonicVue } from '@ionic/vue';
+import { IonicVue } from "@ionic/vue";
 
 /* Core CSS required for Ionic components to work properly */
-import '@ionic/vue/css/core.css';
+import "@ionic/vue/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-import '@ionic/vue/css/normalize.css';
+import "@ionic/vue/css/normalize.css";
-import '@ionic/vue/css/structure.css';
+import "@ionic/vue/css/structure.css";
-import '@ionic/vue/css/typography.css';
+import "@ionic/vue/css/typography.css";
 
 /* Optional CSS utils that can be commented out */
-import '@ionic/vue/css/padding.css';
+import "@ionic/vue/css/padding.css";
-import '@ionic/vue/css/float-elements.css';
+import "@ionic/vue/css/float-elements.css";
-import '@ionic/vue/css/text-alignment.css';
+import "@ionic/vue/css/text-alignment.css";
-import '@ionic/vue/css/text-transformation.css';
+import "@ionic/vue/css/text-transformation.css";
-import '@ionic/vue/css/flex-utils.css';
+import "@ionic/vue/css/flex-utils.css";
-import '@ionic/vue/css/display.css';
+import "@ionic/vue/css/display.css";
 
 /* Theme variables */
-import './theme/variables.css';
+import "./theme/variables.css";
+import "./theme/main.css";
 
-const app = createApp(App)
+const app = createApp(App).use(IonicVue).use(router);
-  .use(IonicVue)
-  .use(router);
 
 router.isReady().then(() => {
-  app.mount('#app');
+  app.mount("#app");
 });

src/views/RoomsPage.vue

@@ -2,10 +2,9 @@
 import { IonPage } from "@ionic/vue";
 import { onMounted, ref } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import { Pagination } from "swiper/modules";
 import { CapacitorHttp } from "@capacitor/core";
 
-import AudioGuide from "@/components/AudioGuide.vue";
+import IllusionSwiper from "@/components/IllusionSwiper.vue";
 
 import "swiper/css";
 import "swiper/css/pagination";
@@ -38,30 +37,10 @@ onMounted(async () => {
           <h2>Les salles</h2>
           <h3>Venez découvrir les salles mises en place !</h3>
 
-          <swiper
+          <IllusionSwiper
-            :pagination="{
+            :data="data"
-              clickable: true,
+            @on-slide-index-change="(i) => (currentRoomIndex = i)"
-              el: '.swiper-pagination',
+          />
-              bulletClass: 'pagination-bullet',
-              bulletActiveClass: 'pagination-bullet-active',
-            }"
-            :modules="[Pagination]"
-            :space-between="250"
-            :auto-height="false"
-            @slide-change-transition-end="
-              (e) => (currentRoomIndex = e.activeIndex)
-            "
-            class="swiper-horizontal"
-          >
-            <swiper-slide v-for="element in data" :key="element.titre">
-              <section>
-                <h4>{{ element.fields.titre }}</h4>
-                <img :src="element.fields.image[0].url" alt="hallan" />
-                <AudioGuide :src="element.fields.audio[0].url" />
-              </section>
-            </swiper-slide>
-          </swiper>
-          <div slot="pagination" class="swiper-pagination"></div>
         </main>
       </swiper-slide>
       <swiper-slide class="bottom-content">
@@ -77,7 +56,8 @@ onMounted(async () => {
   background-color: var(--ion-color-light);
 
   justify-content: start;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
 }
 
 section {
@@ -113,17 +93,9 @@ h3 {
   margin: 0;
 }
 
-h4 {
+.swiper-vertical {
-  text-align: left;
+  width: 100%;
-  font-size: 30px;
-  font-weight: 600;
-  color: var(--ion-color-dark);
-}
-
-img {
   height: 100%;
-  object-fit: cover;
-  border-radius: 14px;
   min-height: 0;
 }
 
@@ -131,26 +103,6 @@ audio {
   width: 100%;
 }
 
-.swiper-pagination {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  margin-top: 32px;
-}
-
-.swiper-horizontal {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-}
-
-.swiper-vertical {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-}
-
 .top-content {
   display: flex;
   flex-direction: column;
@@ -168,7 +120,11 @@ audio {
   height: 100%;
   min-height: 0;
 
-  background-image: linear-gradient(-45deg, #7e33ac 0, #282828 60%);
+  background-image: linear-gradient(
+    -45deg,
+    #7e33ac 0,
+    var(--ion-color-light) 60%
+  );
 }
 
 .bottom-content h2 {

src/views/SetupsPage.vue

@@ -2,10 +2,9 @@
 import { IonPage } from "@ionic/vue";
 import { onMounted, ref } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import { Pagination } from "swiper/modules";
 import { CapacitorHttp } from "@capacitor/core";
 
-import AudioGuide from "@/components/AudioGuide.vue";
+import IllusionSwiper from "@/components/IllusionSwiper.vue";
 
 import "swiper/css";
 import "swiper/css/pagination";
@@ -38,30 +37,10 @@ onMounted(async () => {
           <h2>Les installations !</h2>
           <h3>Venez découvrir les installations mises en place !!</h3>
 
-          <swiper
+          <IllusionSwiper
-            :pagination="{
+            :data="data"
-              clickable: true,
+            @on-slide-index-change="(i) => (currentRoomIndex = i)"
-              el: '.swiper-pagination',
+          />
-              bulletClass: 'pagination-bullet',
-              bulletActiveClass: 'pagination-bullet-active',
-            }"
-            :modules="[Pagination]"
-            :space-between="250"
-            :auto-height="false"
-            @slide-change-transition-end="
-              (e) => (currentRoomIndex = e.activeIndex)
-            "
-            class="swiper-horizontal"
-          >
-            <swiper-slide v-for="element in data" :key="element.titre">
-              <section>
-                <h4>{{ element.fields.titre }}</h4>
-                <img :src="element.fields.image[0].url" alt="hallan" />
-                <AudioGuide :src="element.fields.audio[0].url" />
-              </section>
-            </swiper-slide>
-          </swiper>
-          <div slot="pagination" class="swiper-pagination"></div>
         </main>
       </swiper-slide>
       <swiper-slide class="bottom-content">
@@ -77,14 +56,6 @@ onMounted(async () => {
   background-color: var(--ion-color-light);
 
   justify-content: start;
-  height: 100vh;
-}
-
-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-
   height: 100%;
   min-height: 0;
 }
@@ -113,11 +84,10 @@ h3 {
   margin: 0;
 }
 
-h4 {
+.swiper-vertical {
-  text-align: left;
+  width: 100%;
-  font-size: 30px;
+  height: 100%;
-  font-weight: 600;
+  min-height: 0;
-  color: var(--ion-color-dark);
 }
 
 img {
@@ -131,26 +101,6 @@ audio {
   width: 100%;
 }
 
-.swiper-pagination {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  margin-top: 32px;
-}
-
-.swiper-horizontal {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-}
-
-.swiper-vertical {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-}
-
 .top-content {
   display: flex;
   flex-direction: column;
@@ -168,7 +118,11 @@ audio {
   height: 100%;
   min-height: 0;
 
-  background-image: linear-gradient(-45deg, #7e33ac 0, #282828 60%);
+  background-image: linear-gradient(
+    -45deg,
+    #7e33ac 0,
+    var(--ion-color-light) 60%
+  );
 }
 
 .bottom-content h2 {