cineclub-site/front/pages/index.vue

73 lines
1.8 KiB
Vue
Raw Normal View History

2022-04-03 01:20:53 +02:00
<template>
2022-07-29 00:52:40 +02:00
<main>
<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
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>