refactor [front]: extract style and helpers

front/components/movieCard/full.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="film">
-    <div class="card">
+    <div class="card movie-card">
       <header class="card-content is-flex">
         <div>
           <h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
@@ -110,7 +110,7 @@ function generateTags(film: Film) {
     res.push({
       value: film.isInColor ? "Couleur" : "Noir et blanc",
     })
-  if (film?.languageSubtitle)
+  if (film?.languageSubtitles)
     res.push({ label: "Langue", value: film.languageSubtitles })
   if (film?.duration)
     res.push({
@@ -130,33 +130,6 @@ const headerTags = computed<{ label?: string; value: string }[]>(() =>
 </script>
 
 <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
-  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>

front/composables/strUtils.ts

@@ -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 = {
   full(date: Date | string) {
     const objDate = typeof date === "string" ? new Date(date) : date
@@ -7,14 +17,17 @@ export const prettyDate = {
       month: "long",
       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}`
   },
 }

front/css/app.sass

@@ -24,3 +24,4 @@
 @import "bulma/sass/helpers/visibility"
 @import "bulma/sass/layout/section"
 
+@import "movie-card"

front/css/movie-card.sass

@@ -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