feat [front]: full movieCard

This commit is contained in:
Alice 2022-07-11 01:31:21 +02:00
parent 5592c1e2fc
commit 2068695dc9
5 changed files with 147 additions and 68 deletions

View file

@ -1,65 +0,0 @@
<template>
<div class="main-movie rounded border bg-white overflow-hidden shadow">
<img
class="main-movie__poster"
src="https://m.media-amazon.com/images/I/71bmNSxkw-L._AC_SY550_.jpg"
/>
<div
class="main-movie__description flex flex-col justify-between p-8 space-y-5"
>
<div class="text-4xl">{{ title }}</div>
<div>
Durée :125 minutes<br />
Noir et blanc<br />
Pays :USA<br />
35mm . VOSTFR<br />
Année :1960<br />
Avec :Jack Lemmon, Shirley MacLaine, Fred MacMurray, Ray Walston<br />
</div>
<div class="text-3xl">
{{ formattedDate }}
</div>
</div>
<MovieDetailsModal />
</div>
</template>
<script>
export default {
data() {
return {
title: "Harry Potter à l'école des sorciers",
date: new Date(2021, 7, 26, 20, 30),
}
},
computed: {
formattedDate() {
const date = this.date.toLocaleDateString("fr-FR", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
})
const hour = this.date
.getHours()
.toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
const minute = this.date
.getMinutes()
.toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
const time = `${hour}h${minute}`
return `${date} à ${time}`
},
},
}
</script>
<style>
.main-movie {
@apply flex justify-between;
}
.main-movie__poster {
@apply w-72;
}
</style>

View file

@ -0,0 +1,127 @@
<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>

View file

@ -10,6 +10,7 @@
@import "bulma/sass/elements/button" @import "bulma/sass/elements/button"
@import "bulma/sass/elements/container" @import "bulma/sass/elements/container"
@import "bulma/sass/elements/image" @import "bulma/sass/elements/image"
@import "bulma/sass/elements/other"
@import "bulma/sass/elements/tag" @import "bulma/sass/elements/tag"
@import "bulma/sass/elements/title" @import "bulma/sass/elements/title"
@import "bulma/sass/form/_all" @import "bulma/sass/form/_all"

View file

@ -1,11 +1,16 @@
<template> <template>
<section class="section"> <section class="section">
<h2 class="title">La semaine prochaine</h2> <h2 class="title">La semaine prochaine</h2>
<MainMovie /> <MovieCardFull :film="nextFilm" />
</section> </section>
<section class="section"> <section class="section">
<h2 class="title">Et après</h2> <h2 class="title">Et après</h2>
</section> </section>
</template> </template>
<script setup lang="ts"></script> <script setup lang="ts">
import { Film } from "~/composables/types"
const nextFilm = ref<Film>()
nextFilm.value = (await apiGet(`films/1/`)).data.value
</script>

View file

@ -1,12 +1,23 @@
import { OhVueIcon, addIcons } from "oh-vue-icons" import { OhVueIcon, addIcons } from "oh-vue-icons"
import { import {
RiCalendarEventFill,
RiDoubleQuotesL,
RiFacebookBoxFill, RiFacebookBoxFill,
RiInstagramFill, RiInstagramFill,
RiMailFill, RiMailFill,
RiMapPin2Fill, RiMapPin2Fill,
RiPlayCircleFill,
} from "oh-vue-icons/icons" } from "oh-vue-icons/icons"
addIcons(RiFacebookBoxFill, RiInstagramFill, RiMailFill, RiMapPin2Fill) addIcons(
RiCalendarEventFill,
RiDoubleQuotesL,
RiFacebookBoxFill,
RiInstagramFill,
RiMailFill,
RiMapPin2Fill,
RiPlayCircleFill
)
export default defineNuxtPlugin((nuxtApp) => { export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("v-icon", OhVueIcon) nuxtApp.vueApp.component("v-icon", OhVueIcon)