128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<div class="card">
|
||
|
|
<header class="card-content is-flex">
|
||
|
|
<div>
|
||
|
|
<h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
|
||
|
|
<div class="subtitle is-5 is-inline">{{ film.director }}</div>
|
||
|
|
<div class="field is-grouped is-grouped-multiline mt-4">
|
||
|
|
<div v-for="(tag, index) of headerTags" :key="index" class="control">
|
||
|
|
<div class="tags has-addons">
|
||
|
|
<span v-if="tag.label" class="tag">{{ tag.label }}</span>
|
||
|
|
<span class="tag is-primary">{{ tag.value }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ButtonIcon
|
||
|
|
label="Bande-annonce"
|
||
|
|
icon="ri-play-circle-fill"
|
||
|
|
class="is-primary is-outlined ml-auto"
|
||
|
|
/>
|
||
|
|
</header>
|
||
|
|
<div class="is-flex">
|
||
|
|
<div
|
||
|
|
class="poster-container"
|
||
|
|
:style="{ '--poster-url': `url(${film.posterLink})` }"
|
||
|
|
>
|
||
|
|
<figure class="image my-auto">
|
||
|
|
<img :src="film.posterLink" alt="Affiche du film" />
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<div class="content">
|
||
|
|
<p class="block">
|
||
|
|
<span class="has-text-weight-bold">Acteurs :</span>
|
||
|
|
{{ film.actors.join(", ") }}
|
||
|
|
</p>
|
||
|
|
<p class="block">
|
||
|
|
<span class="has-text-weight-bold">Synopsis :</span>
|
||
|
|
{{ film.synopsis }}
|
||
|
|
</p>
|
||
|
|
<!-- TODO additional info about partnership etc -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<footer class="card-content is-flex">
|
||
|
|
<div class="buttons">
|
||
|
|
<template v-if="isPast">
|
||
|
|
<ButtonIcon
|
||
|
|
label="Lire notre analyse"
|
||
|
|
icon="ri-double-quotes-l"
|
||
|
|
class="is-outlined is-primary"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<ButtonIcon
|
||
|
|
label="Événement Facebook"
|
||
|
|
icon="ri-facebook-box-fill"
|
||
|
|
class="is-outlined is-primary"
|
||
|
|
/>
|
||
|
|
<ButtonIcon
|
||
|
|
label="Ajouter au calendrier"
|
||
|
|
icon="ri-calendar-event-fill"
|
||
|
|
class="is-outlined is-primary"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto title is-4">
|
||
|
|
{{ film.projectionDate }}
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { Film } from "~/composables/types"
|
||
|
|
import { PropType } from "@vue/runtime-core"
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
film: { type: Object as PropType<Film>, required: true },
|
||
|
|
})
|
||
|
|
const isPast = ref<boolean>(false)
|
||
|
|
|
||
|
|
const headerTags = ref<{ label?: string; value: string }[]>([
|
||
|
|
{
|
||
|
|
value: film.value.isInColor ? "Couleur" : "Noir et blanc",
|
||
|
|
},
|
||
|
|
{ label: "Langue", value: film.value.languageSubtitles },
|
||
|
|
{
|
||
|
|
label: "Durée",
|
||
|
|
value: film.value.duration,
|
||
|
|
},
|
||
|
|
{ label: "Sortie", value: film.value.releaseYear.toString() },
|
||
|
|
{ label: "Pays", value: film.value.originCountry },
|
||
|
|
])
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="sass">
|
||
|
|
header
|
||
|
|
border-bottom: $grey-lightest 1px solid
|
||
|
|
footer
|
||
|
|
border-top: $grey-lightest 1px solid
|
||
|
|
.buttons
|
||
|
|
margin-bottom: 0
|
||
|
|
.button
|
||
|
|
margin-bottom: 0
|
||
|
|
|
||
|
|
.poster-container
|
||
|
|
display: flex
|
||
|
|
flex-shrink: 0
|
||
|
|
position: relative
|
||
|
|
width: 200px
|
||
|
|
overflow: hidden
|
||
|
|
&::before
|
||
|
|
content: ''
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
right: 0
|
||
|
|
bottom: 0
|
||
|
|
left: 0
|
||
|
|
filter: blur(15px)
|
||
|
|
background-image: var(--poster-url)
|
||
|
|
background-size: cover
|
||
|
|
background-position: center
|
||
|
|
margin: -10px
|
||
|
|
.image img
|
||
|
|
object-fit: contain
|
||
|
|
</style>
|