From 760c6f13425f344f434527be14ba9b0d56094f26 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Sat, 28 Jan 2023 22:21:27 +0100
Subject: [PATCH] feat [front]: remove slider in homepage

---
 front/pages/index.vue | 64 ++++++++++++-------------------------------
 1 file changed, 17 insertions(+), 47 deletions(-)

diff --git a/front/pages/index.vue b/front/pages/index.vue
index 54414c5..e690d92 100644
--- a/front/pages/index.vue
+++ b/front/pages/index.vue
@@ -9,33 +9,22 @@
     </section>
     <section v-if="nextFilms.length" class="section is-relative">
       <h2 class="title">Et après</h2>
-      <swiper
-        class="py-4"
-        :loadtheme="false"
-        :modules="modules"
-        slides-per-view="auto"
-        :space-between="52"
-        center-insufficient-slides
-        navigation
-      >
-        <swiper-slide v-for="film of nextFilms" :key="film.id">
-          <MovieCardShort :film="film" class="block" />
-        </swiper-slide>
-      </swiper>
+      <div class="is-flex next-films">
+        <MovieCardShort v-for="film of nextFilms" :key="film.id" :film="film" />
+      </div>
+      <div class="is-flex mt-5">
+        <nuxt-link class="ml-auto" to="/calendrier?view=future">
+          Voir plus
+        </nuxt-link>
+      </div>
     </section>
   </main>
 </template>
 
 <script setup lang="ts">
 import { Film } from "~/composables/types"
-import { Swiper, SwiperSlide } from "swiper/vue"
-import { Navigation } from "swiper"
-import { SwiperModule } from "swiper/types"
-import "swiper/css"
-import "swiper/css/navigation"
 
 useHead({ title: "Accueil" })
-const modules = ref<SwiperModule[]>([Navigation])
 
 const films = ref<Film[]>()
 films.value = ((await apiGet<Film[]>(`films/home/`)).data.value || []) as Film[]
@@ -44,32 +33,13 @@ const nextFilms = computed(() => films.value?.slice(1))
 </script>
 
 <style lang="sass">
-.swiper-button-disabled
-  display: none
-.swiper-button-prev, .swiper-button-next
-  height: 100%
-  top: 1.5rem
-  color: $primary-dark
-  &:hover
-    color: $primary
-
-  &:after
-    z-index: 10
-  &:before
-    content: ""
-    height: 100%
-    min-width: 100px
-    position: absolute
-.swiper-button-prev:before
-  background: linear-gradient(to right, $white-bis, transparent)
-  left: -10px
-.swiper-button-next:before
-  background: linear-gradient(to right, transparent, $white-bis)
-  right: -10px
-
-.swiper-slide
-  width: 500px
-  height: auto
-  > .block
-    height: 100%
+.next-films
+  flex-wrap: wrap
+  justify-content: space-evenly
+  margin-bottom: -3rem
+  > *
+    flex: 0 0 31rem
+    margin-bottom: 3rem
+    &:not(:last-child)
+      margin-right: 3rem
 </style>