feat [front]: mobile full movie card
This commit is contained in:
parent
47f315d0da
commit
e00d6a0a81
1 changed files with 93 additions and 34 deletions
|
|
@ -1,34 +1,63 @@
|
|||
<template>
|
||||
<div v-if="film">
|
||||
<div class="card movie-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">
|
||||
<header class="card-content is-hidden-tablet">
|
||||
<h3 class="title is-4 mr-4">{{ film.title }}</h3>
|
||||
<div class="subtitle is-5">{{ film.director }}</div>
|
||||
</header>
|
||||
<header class="is-flex">
|
||||
<div
|
||||
class="poster-container is-hidden-tablet"
|
||||
:style="{ '--poster-url': `url(${film.posterLink})` }"
|
||||
>
|
||||
<figure class="image m-auto">
|
||||
<img :src="film.posterLink" alt="Affiche du film" />
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="is-flex is-flex-direction-column">
|
||||
<ButtonIcon
|
||||
v-if="film.trailerLink"
|
||||
label="Bande-annonce"
|
||||
icon="ri-play-circle-fill"
|
||||
class="is-primary is-outlined mb-4 ml-auto is-hidden-tablet"
|
||||
@click="showTrailerModal = true"
|
||||
/>
|
||||
<div
|
||||
v-for="(tag, index) of headerTags"
|
||||
:key="index"
|
||||
class="control"
|
||||
class="is-hidden-mobile mb-5 is-flex is-justify-content-space-between is-align-items-center"
|
||||
>
|
||||
<div class="tags has-addons">
|
||||
<span v-if="tag.label" class="tag">{{ tag.label }}</span>
|
||||
<span class="tag is-primary">{{ tag.value }}</span>
|
||||
<div>
|
||||
<h3 class="title is-4 is-inline mr-4 mb-0">{{ film.title }}</h3>
|
||||
<div class="subtitle is-5 is-inline mb-0">
|
||||
{{ film.director }}
|
||||
</div>
|
||||
</div>
|
||||
<ButtonIcon
|
||||
v-if="film.trailerLink"
|
||||
label="Bande-annonce"
|
||||
icon="ri-play-circle-fill"
|
||||
class="is-primary is-outlined"
|
||||
@click="showTrailerModal = true"
|
||||
/>
|
||||
</div>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<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>
|
||||
</div>
|
||||
<ButtonIcon
|
||||
v-if="film.trailerLink"
|
||||
label="Bande-annonce"
|
||||
icon="ri-play-circle-fill"
|
||||
class="is-primary is-outlined ml-auto"
|
||||
@click="showTrailerModal = true"
|
||||
/>
|
||||
</header>
|
||||
<div class="is-flex">
|
||||
<div
|
||||
class="poster-container"
|
||||
class="poster-container is-hidden-mobile"
|
||||
:style="{ '--poster-url': `url(${film.posterLink})` }"
|
||||
>
|
||||
<figure class="image m-auto">
|
||||
|
|
@ -37,6 +66,12 @@
|
|||
</div>
|
||||
<div class="card-content">
|
||||
<div class="content movie-content">
|
||||
<p
|
||||
v-if="film.projectionComment"
|
||||
class="block has-text-centered has-text-weight-bold is-italic"
|
||||
>
|
||||
{{ film.projectionComment }}
|
||||
</p>
|
||||
<p v-if="film.actors && film.actors.length" class="block">
|
||||
<span class="has-text-weight-bold">Acteurs :</span>
|
||||
{{ film.actors.join(", ") }}
|
||||
|
|
@ -45,16 +80,22 @@
|
|||
<span class="has-text-weight-bold">Synopsis :</span>
|
||||
{{ film.synopsis }}
|
||||
</p>
|
||||
<div
|
||||
v-if="film.projectionComment"
|
||||
class="block has-text-centered has-text-weight-bold is-italic my-auto"
|
||||
>
|
||||
<p>{{ film.projectionComment }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-content is-flex">
|
||||
<time
|
||||
class="title is-4 mb-4 is-hidden-tablet"
|
||||
:datetime="film.projectionDate"
|
||||
>
|
||||
{{ prettyDate.short(film.projectionDate) }}
|
||||
</time>
|
||||
<time
|
||||
class="title is-4 mb-0 is-hidden-mobile"
|
||||
:datetime="film.projectionDate"
|
||||
>
|
||||
{{ prettyDate.full(film.projectionDate) }}
|
||||
</time>
|
||||
<div class="buttons">
|
||||
<template v-if="isPast">
|
||||
<ButtonIcon
|
||||
|
|
@ -77,17 +118,16 @@
|
|||
class="is-outlined is-primary"
|
||||
/>
|
||||
</a>
|
||||
<!-- TODO
|
||||
<ButtonIcon
|
||||
v-if="film.icsDownload"
|
||||
label="Ajouter au calendrier"
|
||||
icon="ri-calendar-event-fill"
|
||||
class="is-outlined is-primary"
|
||||
/>
|
||||
v-if="film.icsDownload"
|
||||
label="Ajouter au calendrier"
|
||||
icon="ri-calendar-event-fill"
|
||||
class="is-outlined is-primary"
|
||||
/>
|
||||
-->
|
||||
</template>
|
||||
</div>
|
||||
<time class="ml-auto title is-4" :datetime="film.projectionDate">
|
||||
{{ prettyDate.full(film.projectionDate) }}
|
||||
</time>
|
||||
</footer>
|
||||
</div>
|
||||
<MovieCardTrailerModal
|
||||
|
|
@ -96,6 +136,7 @@
|
|||
:iframe-id="`film-card-${film.id}`"
|
||||
@close="showTrailerModal = false"
|
||||
/>
|
||||
<!-- TODO responsive modal video cf MSF -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -137,11 +178,29 @@ const headerTags = computed<{ label?: string; value: string }[]>(() =>
|
|||
|
||||
<style scoped lang="sass">
|
||||
.movie-card .poster-container
|
||||
width: 200px
|
||||
max-width: 50%
|
||||
width: 25%
|
||||
// ?
|
||||
// TODO fit poster size
|
||||
@include tablet()
|
||||
width: 200px
|
||||
|
||||
.card .card-content .content.movie-content
|
||||
height: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
white-space: pre-wrap
|
||||
|
||||
.card-content
|
||||
@include mobile()
|
||||
padding: 1rem
|
||||
|
||||
footer.card-content
|
||||
flex-direction: column
|
||||
text-align: center
|
||||
justify-items: center
|
||||
@include tablet()
|
||||
flex-direction: row-reverse
|
||||
justify-content: space-between
|
||||
justify-items: auto
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue