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

feat [front]: trailer modal component

Browse source
This commit is contained in:
Alice 2022-07-13 00:37:49 +02:00
parent 2068695dc9
commit 7e495ea7cb
3 changed files with 112 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
front/components/movieCard/full.vue
View file

@ -1,73 +1,87 @@
<template> <template>
<div class="card"> <div v-if="film">
<header class="card-content is-flex"> <div class="card">
<div> <header class="card-content is-flex">
<h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3> <div>
<div class="subtitle is-5 is-inline">{{ film.director }}</div> <h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
<div class="field is-grouped is-grouped-multiline mt-4"> <div class="subtitle is-5 is-inline">{{ film.director }}</div>
<div v-for="(tag, index) of headerTags" :key="index" class="control"> <div class="field is-grouped is-grouped-multiline mt-4">
<div class="tags has-addons"> <div
<span v-if="tag.label" class="tag">{{ tag.label }}</span> v-for="(tag, index) of headerTags"
<span class="tag is-primary">{{ tag.value }}</span> :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>
</div> </div>
</div> <ButtonIcon
<ButtonIcon v-if="film.trailerLink"
label="Bande-annonce" label="Bande-annonce"
icon="ri-play-circle-fill" icon="ri-play-circle-fill"
class="is-primary is-outlined ml-auto" class="is-primary is-outlined ml-auto"
/> @click="showTrailerModal = true"
</header> />
<div class="is-flex"> </header>
<div <div class="is-flex">
class="poster-container" <div
:style="{ '--poster-url': `url(${film.posterLink})` }" class="poster-container"
> :style="{ '--poster-url': `url(${film.posterLink})` }"
<figure class="image my-auto"> >
<img :src="film.posterLink" alt="Affiche du film" /> <figure class="image my-auto">
</figure> <img :src="film.posterLink" alt="Affiche du film" />
</div> </figure>
<div class="card-content"> </div>
<div class="content"> <div class="card-content">
<p class="block"> <div class="content">
<span class="has-text-weight-bold">Acteurs :</span> <p class="block">
{{ film.actors.join(", ") }} <span class="has-text-weight-bold">Acteurs :</span>
</p> {{ film.actors.join(", ") }}
<p class="block"> </p>
<span class="has-text-weight-bold">Synopsis :</span> <p class="block">
{{ film.synopsis }} <span class="has-text-weight-bold">Synopsis :</span>
</p> {{ film.synopsis }}
<!-- TODO additional info about partnership etc --> </p>
<!-- TODO additional info about partnership etc -->
</div>
</div> </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> </div>
<footer class="card-content is-flex"> <MovieCardTrailerModal
<div class="buttons"> v-if="showTrailerModal"
<template v-if="isPast"> :url="film.trailerLink"
<ButtonIcon :iframe-id="`film-card-${film.id}`"
label="Lire notre analyse" @close="showTrailerModal = false"
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> </div>
</template> </template>

34
front/components/movieCard/trailerModal.vue Normal file
View file

@ -0,0 +1,34 @@
<template>
<div class="modal is-active">
<div class="modal-background" @click="$emit('close')" />
<div class="modal-card">
<section class="modal-card-body">
<iframe
v-if="url"
:id="`ytplayer-${iframeId}`"
type="text/html"
width="640"
height="360"
:src="url"
frameborder="0"
/>
</section>
</div>
</div>
</template>
<script setup lang="ts">
defineProps({
iframeId: {
type: String,
default: () => (Math.random() + 1).toString(36).substring(7),
},
url: { type: String, default: "" },
})
defineEmits(["close"])
</script>
<style scoped lang="sass">
.modal-card
width: fit-content
</style>

1
front/css/app.sass
View file

@ -6,6 +6,7 @@
@import "bulma-list/sass/bulma-list" @import "bulma-list/sass/bulma-list"
@import "bulma/sass/base/_all" @import "bulma/sass/base/_all"
@import "bulma/sass/components/card" @import "bulma/sass/components/card"
@import "bulma/sass/components/modal"
@import "bulma/sass/components/navbar" @import "bulma/sass/components/navbar"
@import "bulma/sass/elements/button" @import "bulma/sass/elements/button"
@import "bulma/sass/elements/container" @import "bulma/sass/elements/container"