refactor [front]: extract style and helpers
This commit is contained in:
parent
f7583210cf
commit
3293d9ff08
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="film">
|
<div v-if="film">
|
||||||
<div class="card">
|
<div class="card movie-card">
|
||||||
<header class="card-content is-flex">
|
<header class="card-content is-flex">
|
||||||
<div>
|
<div>
|
||||||
<h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
|
<h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
|
||||||
|
@ -110,7 +110,7 @@ function generateTags(film: Film) {
|
||||||
res.push({
|
res.push({
|
||||||
value: film.isInColor ? "Couleur" : "Noir et blanc",
|
value: film.isInColor ? "Couleur" : "Noir et blanc",
|
||||||
})
|
})
|
||||||
if (film?.languageSubtitle)
|
if (film?.languageSubtitles)
|
||||||
res.push({ label: "Langue", value: film.languageSubtitles })
|
res.push({ label: "Langue", value: film.languageSubtitles })
|
||||||
if (film?.duration)
|
if (film?.duration)
|
||||||
res.push({
|
res.push({
|
||||||
|
@ -130,33 +130,6 @@ const headerTags = computed<{ label?: string; value: string }[]>(() =>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
header
|
.movie-card .poster-container
|
||||||
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
|
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>
|
</style>
|
||||||
|
|
|
@ -1,3 +1,13 @@
|
||||||
|
function prettyTime(date: Date) {
|
||||||
|
const hour = date
|
||||||
|
.getHours()
|
||||||
|
.toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
|
||||||
|
const minute = date
|
||||||
|
.getMinutes()
|
||||||
|
.toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
|
||||||
|
return `${hour}h${minute}`
|
||||||
|
}
|
||||||
|
|
||||||
export const prettyDate = {
|
export const prettyDate = {
|
||||||
full(date: Date | string) {
|
full(date: Date | string) {
|
||||||
const objDate = typeof date === "string" ? new Date(date) : date
|
const objDate = typeof date === "string" ? new Date(date) : date
|
||||||
|
@ -7,14 +17,17 @@ export const prettyDate = {
|
||||||
month: "long",
|
month: "long",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
})
|
})
|
||||||
const hour = objDate
|
const time = prettyTime(objDate)
|
||||||
.getHours()
|
return `${strDate}, ${time}`
|
||||||
.toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
|
},
|
||||||
const minute = objDate
|
short(date: Date | string) {
|
||||||
.getMinutes()
|
const objDate = typeof date === "string" ? new Date(date) : date
|
||||||
.toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
|
const strDate = objDate.toLocaleDateString("fr-FR", {
|
||||||
const time = `${hour}h${minute}`
|
weekday: "narrow",
|
||||||
|
month: "numeric",
|
||||||
|
day: "numeric",
|
||||||
|
})
|
||||||
|
const time = prettyTime(objDate)
|
||||||
return `${strDate}, ${time}`
|
return `${strDate}, ${time}`
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,3 +24,4 @@
|
||||||
@import "bulma/sass/helpers/visibility"
|
@import "bulma/sass/helpers/visibility"
|
||||||
@import "bulma/sass/layout/section"
|
@import "bulma/sass/layout/section"
|
||||||
|
|
||||||
|
@import "movie-card"
|
||||||
|
|
30
front/css/movie-card.sass
Normal file
30
front/css/movie-card.sass
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
.movie-card
|
||||||
|
overflow: hidden
|
||||||
|
header
|
||||||
|
border-bottom: $grey-lightest 1px solid
|
||||||
|
footer
|
||||||
|
border-top: $grey-lightest 1px solid
|
||||||
|
align-items: center
|
||||||
|
.buttons
|
||||||
|
margin-bottom: 0
|
||||||
|
.button
|
||||||
|
margin-bottom: 0
|
||||||
|
.poster-container
|
||||||
|
display: flex
|
||||||
|
flex-shrink: 0
|
||||||
|
position: relative
|
||||||
|
overflow: hidden
|
||||||
|
&::before
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
bottom: 0
|
||||||
|
right: 0
|
||||||
|
left: 0
|
||||||
|
filter: blur(15px)
|
||||||
|
background-image: var(--poster-url)
|
||||||
|
background-size: cover
|
||||||
|
background-position: center
|
||||||
|
margin: -5%
|
||||||
|
.image img
|
||||||
|
object-fit: contain
|
Loading…
Reference in a new issue