feat [front]: full movieCard
This commit is contained in:
parent
5592c1e2fc
commit
2068695dc9
|
|
@ -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>
|
||||
127
front/components/movieCard/full.vue
Normal file
127
front/components/movieCard/full.vue
Normal 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>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
@import "bulma/sass/elements/button"
|
||||
@import "bulma/sass/elements/container"
|
||||
@import "bulma/sass/elements/image"
|
||||
@import "bulma/sass/elements/other"
|
||||
@import "bulma/sass/elements/tag"
|
||||
@import "bulma/sass/elements/title"
|
||||
@import "bulma/sass/form/_all"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
<template>
|
||||
<section class="section">
|
||||
<h2 class="title">La semaine prochaine</h2>
|
||||
<MainMovie />
|
||||
<MovieCardFull :film="nextFilm" />
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title">Et après</h2>
|
||||
</section>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
import { OhVueIcon, addIcons } from "oh-vue-icons"
|
||||
import {
|
||||
RiCalendarEventFill,
|
||||
RiDoubleQuotesL,
|
||||
RiFacebookBoxFill,
|
||||
RiInstagramFill,
|
||||
RiMailFill,
|
||||
RiMapPin2Fill,
|
||||
RiPlayCircleFill,
|
||||
} from "oh-vue-icons/icons"
|
||||
|
||||
addIcons(RiFacebookBoxFill, RiInstagramFill, RiMailFill, RiMapPin2Fill)
|
||||
addIcons(
|
||||
RiCalendarEventFill,
|
||||
RiDoubleQuotesL,
|
||||
RiFacebookBoxFill,
|
||||
RiInstagramFill,
|
||||
RiMailFill,
|
||||
RiMapPin2Fill,
|
||||
RiPlayCircleFill
|
||||
)
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.component("v-icon", OhVueIcon)
|
||||
|
|
|
|||
Loading…
Reference in a new issue