aandres/cineclub-site
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat [front]: remove slider in homepage

Browse source
This commit is contained in:
Alice 2023-01-28 22:21:27 +01:00
parent 06b6282be8
commit 760c6f1342
1 changed files with 17 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
front/pages/index.vue
View file

@ -9,33 +9,22 @@
</section> </section>
<section v-if="nextFilms.length" class="section is-relative"> <section v-if="nextFilms.length" class="section is-relative">
<h2 class="title">Et après</h2> <h2 class="title">Et après</h2>
<swiper <div class="is-flex next-films">
class="py-4" <MovieCardShort v-for="film of nextFilms" :key="film.id" :film="film" />
:loadtheme="false" </div>
:modules="modules" <div class="is-flex mt-5">
slides-per-view="auto" <nuxt-link class="ml-auto" to="/calendrier?view=future">
:space-between="52" Voir plus
center-insufficient-slides </nuxt-link>
navigation </div>
>
<swiper-slide v-for="film of nextFilms" :key="film.id">
<MovieCardShort :film="film" class="block" />
</swiper-slide>
</swiper>
</section> </section>
</main> </main>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Film } from "~/composables/types" 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" }) useHead({ title: "Accueil" })
const modules = ref<SwiperModule[]>([Navigation])
const films = ref<Film[]>() const films = ref<Film[]>()
films.value = ((await apiGet<Film[]>(`films/home/`)).data.value || []) as Film[] films.value = ((await apiGet<Film[]>(`films/home/`)).data.value || []) as Film[]
@ -44,32 +33,13 @@ const nextFilms = computed(() => films.value?.slice(1))
</script> </script>
<style lang="sass"> <style lang="sass">
.swiper-button-disabled .next-films
display: none flex-wrap: wrap
.swiper-button-prev, .swiper-button-next justify-content: space-evenly
height: 100% margin-bottom: -3rem
top: 1.5rem > *
color: $primary-dark flex: 0 0 31rem
&:hover margin-bottom: 3rem
color: $primary &:not(:last-child)
margin-right: 3rem
&: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%
</style> </style>