From e55f8a58634f93e377d4182d4c935c4e17320826 Mon Sep 17 00:00:00 2001
From: Florian Sylvain <floriansylvain@mailo.com>
Date: Thu, 28 Mar 2024 19:32:34 +0100
Subject: [PATCH] fix&feat: homepage responsive + swiper effect

---
 src/App.vue                       |  4 +---
 src/components/IllusionSwiper.vue | 17 ++++++++++++++---
 src/views/HomePage.vue            |  9 +++++++--
 src/views/RoomsPage.vue           |  3 ---
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c5521f0..a40ac8b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <ion-app class="main">
     <PagesHeader />
     <ion-content>
-      <ion-router-outlet class="main" id="main-content" />
+      <ion-router-outlet id="main-content" />
     </ion-content>
   </ion-app>
 </template>
@@ -16,7 +16,5 @@ import PagesHeader from "@/components/PagesHeader.vue";
 <style>
 .main {
   background-color: var(--ion-color-light);
-  height: 100%;
-  min-height: 0;
 }
 </style>
diff --git a/src/components/IllusionSwiper.vue b/src/components/IllusionSwiper.vue
index b92ab09..67b5a77 100644
--- a/src/components/IllusionSwiper.vue
+++ b/src/components/IllusionSwiper.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { Pagination } from "swiper/modules";
+import { ref } from "vue";
+import { Pagination, EffectCoverflow } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 
 import AudioGuide from "@/components/AudioGuide.vue";
-import { ref } from "vue";
+
+import "swiper/css";
+import "swiper/css/effect-coverflow";
 
 const props = defineProps<{
   data: any;
@@ -22,13 +25,21 @@ defineEmits(["onSlideIndexChange"]);
       bulletClass: 'pagination-bullet',
       bulletActiveClass: 'pagination-bullet-active',
     }"
-    :modules="[Pagination]"
+    :modules="[Pagination, EffectCoverflow]"
     :space-between="250"
     :auto-height="false"
     @slide-change-transition-end="
       (e) => $emit('onSlideIndexChange', e.activeIndex)
     "
     class="swiper-horizontal"
+    effect="coverflow"
+    :coverflowEffect="{
+      rotate: 50,
+      stretch: 0,
+      depth: 100,
+      modifier: 1,
+      slideShadows: false,
+    }"
   >
     <swiper-slide v-for="element in props.data" :key="element.titre">
       <section>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 4286796..9510ff0 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -22,10 +22,15 @@ import { IonButton, IonPage } from "@ionic/vue";
 
 <style scoped>
 .main {
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   padding: 32px;
 
-  background-image: linear-gradient(-45deg, #7e33ac 0, #282828 60%);
+  background-image: linear-gradient(
+    -45deg,
+    #7e33ac 0,
+    var(--ion-color-light) 60%
+  );
 }
 
 .top-content {
diff --git a/src/views/RoomsPage.vue b/src/views/RoomsPage.vue
index 537a287..192924f 100644
--- a/src/views/RoomsPage.vue
+++ b/src/views/RoomsPage.vue
@@ -6,9 +6,6 @@ import { CapacitorHttp } from "@capacitor/core";
 
 import IllusionSwiper from "@/components/IllusionSwiper.vue";
 
-import "swiper/css";
-import "swiper/css/pagination";
-
 const data = ref();
 const currentRoomIndex = ref(0);