From 751755c2478dc5d9f50aa7652e45af69e9c9c39f Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Fri, 29 Jul 2022 00:49:27 +0200
Subject: [PATCH] feat [front]: super pretty swiper

---
 front/components/movieCard/short.vue |  9 ++++---
 front/css/app.sass                   |  1 +
 front/pages/index.vue                | 39 +++++++++++++++++++++++++---
 3 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/front/components/movieCard/short.vue b/front/components/movieCard/short.vue
index b4f48b3..c4ad69f 100644
--- a/front/components/movieCard/short.vue
+++ b/front/components/movieCard/short.vue
@@ -10,8 +10,8 @@
             <img :src="film.posterLink" alt="Affiche du film" />
           </figure>
         </div>
-        <div>
-          <div class="card-content">
+        <div class="is-flex is-flex-direction-column">
+          <div class="card-content is-flex-grow-1">
             <div>
               <div class="is-flex movie-card-header">
                 <div>
@@ -41,7 +41,7 @@
               </div>
             </div>
           </div>
-          <footer class="card-content is-flex">
+          <footer class="card-content is-flex is-flex-grow-0">
             <div class="buttons">
               <template v-if="isPast">
                 <ButtonIcon
@@ -128,6 +128,9 @@ const headerTags = computed<{ label?: string; value: string }[]>(() =>
 
 <style scoped lang="sass">
 .movie-card
+  height: 100%
+  > *
+    height: 100%
   .movie-card-header.button
     height: fit-content
   .poster-container
diff --git a/front/css/app.sass b/front/css/app.sass
index e299243..0ea0bbf 100644
--- a/front/css/app.sass
+++ b/front/css/app.sass
@@ -22,6 +22,7 @@
 @import "bulma/sass/helpers/spacing"
 @import "bulma/sass/helpers/typography"
 @import "bulma/sass/helpers/visibility"
+@import "bulma/sass/helpers/other"
 @import "bulma/sass/layout/section"
 
 @import "movie-card"
diff --git a/front/pages/index.vue b/front/pages/index.vue
index 542961e..9fc7dc0 100644
--- a/front/pages/index.vue
+++ b/front/pages/index.vue
@@ -3,14 +3,16 @@
     <h2 class="title">La semaine prochaine</h2>
     <MovieCardFull :film="firstFilm" />
   </section>
-  <section v-if="nextFilms.length" class="section">
+  <section v-if="nextFilms.length" class="section is-relative">
     <h2 class="title">Et après</h2>
     <swiper
-      class="w-5/6 ml-auto relative"
+      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" />
@@ -22,7 +24,12 @@
 <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"
+
+const modules = ref<SwiperModule[]>([Navigation])
 
 const films = ref<Film[]>()
 films.value = (await apiGet<Film[]>(`films/`)).data.value
@@ -31,6 +38,32 @@ 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: 468px
+  width: 500px
+  height: auto
+  > .block
+    height: 100%
 </style>