2022-04-03 01:20:53 +02:00
|
|
|
<template>
|
2022-07-29 00:52:40 +02:00
|
|
|
<main>
|
2022-08-27 15:08:10 +02:00
|
|
|
<h1 hidden>Page d'accueil</h1>
|
2022-07-29 00:52:40 +02:00
|
|
|
<section class="section">
|
|
|
|
<h2 class="title">La semaine prochaine</h2>
|
|
|
|
<MovieCardFull :film="firstFilm" />
|
|
|
|
</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>
|
|
|
|
</section>
|
|
|
|
</main>
|
2022-04-03 01:20:53 +02:00
|
|
|
</template>
|
|
|
|
|
2022-07-11 01:31:21 +02:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { Film } from "~/composables/types"
|
2022-07-19 04:17:24 +02:00
|
|
|
import { Swiper, SwiperSlide } from "swiper/vue"
|
2022-07-29 00:49:27 +02:00
|
|
|
import { Navigation } from "swiper"
|
|
|
|
import { SwiperModule } from "swiper/types"
|
2022-07-19 04:17:24 +02:00
|
|
|
import "swiper/css"
|
2022-07-29 00:49:27 +02:00
|
|
|
import "swiper/css/navigation"
|
|
|
|
|
|
|
|
const modules = ref<SwiperModule[]>([Navigation])
|
2022-07-11 01:31:21 +02:00
|
|
|
|
2022-07-14 01:39:19 +02:00
|
|
|
const films = ref<Film[]>()
|
|
|
|
films.value = (await apiGet<Film[]>(`films/`)).data.value
|
|
|
|
const firstFilm = computed(() => films.value[0])
|
|
|
|
const nextFilms = computed(() => films.value.slice(1))
|
2022-07-11 01:31:21 +02:00
|
|
|
</script>
|
2022-07-25 00:52:05 +02:00
|
|
|
|
|
|
|
<style lang="sass">
|
2022-07-29 00:49:27 +02:00
|
|
|
.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
|
|
|
|
|
2022-07-25 00:52:05 +02:00
|
|
|
.swiper-slide
|
2022-07-29 00:49:27 +02:00
|
|
|
width: 500px
|
|
|
|
height: auto
|
|
|
|
> .block
|
|
|
|
height: 100%
|
2022-07-25 00:52:05 +02:00
|
|
|
</style>
|