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

feat [front]: ensure full card prettiness with uncomplete data

Browse source
This commit is contained in:
Alice 2022-07-13 00:51:00 +02:00
parent c5db518aef
commit e424f4f671
1 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,17 +31,17 @@
class="poster-container" class="poster-container"
:style="{ '--poster-url': `url(${film.posterLink})` }" :style="{ '--poster-url': `url(${film.posterLink})` }"
> >
<figure class="image my-auto"> <figure class="image m-auto">
<img :src="film.posterLink" alt="Affiche du film" /> <img :src="film.posterLink" alt="Affiche du film" />
</figure> </figure>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="content"> <div class="content">
<p class="block"> <p v-if="film.actors && film.actors.length" class="block">
<span class="has-text-weight-bold">Acteurs :</span> <span class="has-text-weight-bold">Acteurs :</span>
{{ film.actors.join(", ") }} {{ film.actors.join(", ") }}
</p> </p>
<p class="block"> <p v-if="film.synopsis" class="block">
<span class="has-text-weight-bold">Synopsis :</span> <span class="has-text-weight-bold">Synopsis :</span>
{{ film.synopsis }} {{ film.synopsis }}
</p> </p>
@ -60,11 +60,13 @@
</template> </template>
<template v-else> <template v-else>
<ButtonIcon <ButtonIcon
v-if="film.facebookEventLink"
label="Événement Facebook" label="Événement Facebook"
icon="ri-facebook-box-fill" icon="ri-facebook-box-fill"
class="is-outlined is-primary" class="is-outlined is-primary"
/> />
<ButtonIcon <ButtonIcon
v-if="film.icsDownload"
label="Ajouter au calendrier" label="Ajouter au calendrier"
icon="ri-calendar-event-fill" icon="ri-calendar-event-fill"
class="is-outlined is-primary" class="is-outlined is-primary"
@ -93,19 +95,31 @@ const props = defineProps({
film: { type: Object as PropType<Film>, required: true }, film: { type: Object as PropType<Film>, required: true },
}) })
const isPast = ref<boolean>(false) const isPast = ref<boolean>(false)
const showTrailerModal = ref<boolean>(false)
const headerTags = ref<{ label?: string; value: string }[]>([ function generateTags(film: Film) {
{ const res = []
value: film.value.isInColor ? "Couleur" : "Noir et blanc", if ("isInColor" in film && film.isInColor != null)
}, res.push({
{ label: "Langue", value: film.value.languageSubtitles }, value: film.isInColor ? "Couleur" : "Noir et blanc",
{ })
label: "Durée", if (film?.languageSubtitle)
value: film.value.duration, res.push({ label: "Langue", value: film.languageSubtitles })
}, if (film?.duration)
{ label: "Sortie", value: film.value.releaseYear.toString() }, res.push({
{ label: "Pays", value: film.value.originCountry }, label: "Durée",
]) value: film.duration,
})
if (film?.releaseYear)
res.push({ label: "Sortie", value: film.releaseYear.toString() })
if (film?.originCountry)
res.push({ label: "Pays", value: film.originCountry })
return res
}
const headerTags = computed<{ label?: string; value: string }[]>(() =>
generateTags(props.film)
)
</script> </script>
<style scoped lang="sass"> <style scoped lang="sass">