From 3293d9ff0864acf03f30ce6c3833102f33b7be24 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Fri, 22 Jul 2022 00:48:31 +0200
Subject: [PATCH] refactor [front]: extract style and helpers

---
 front/components/movieCard/full.vue | 33 +++--------------------------
 front/composables/strUtils.ts       | 29 ++++++++++++++++++-------
 front/css/app.sass                  |  1 +
 front/css/movie-card.sass           | 30 ++++++++++++++++++++++++++
 4 files changed, 55 insertions(+), 38 deletions(-)
 create mode 100644 front/css/movie-card.sass

diff --git a/front/components/movieCard/full.vue b/front/components/movieCard/full.vue
index 10a75fe..65c8690 100644
--- a/front/components/movieCard/full.vue
+++ b/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
-  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
+.movie-card .poster-container
   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>
diff --git a/front/composables/strUtils.ts b/front/composables/strUtils.ts
index d8bcd51..2d871ab 100644
--- a/front/composables/strUtils.ts
+++ b/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
-      .getHours()
-      .toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
-    const minute = objDate
-      .getMinutes()
-      .toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
-    const time = `${hour}h${minute}`
-
+    const time = prettyTime(objDate)
+    return `${strDate}, ${time}`
+  },
+  short(date: Date | string) {
+    const objDate = typeof date === "string" ? new Date(date) : date
+    const strDate = objDate.toLocaleDateString("fr-FR", {
+      weekday: "narrow",
+      month: "numeric",
+      day: "numeric",
+    })
+    const time = prettyTime(objDate)
     return `${strDate}, ${time}`
   },
 }
diff --git a/front/css/app.sass b/front/css/app.sass
index 9c38f8d..e299243 100644
--- a/front/css/app.sass
+++ b/front/css/app.sass
@@ -24,3 +24,4 @@
 @import "bulma/sass/helpers/visibility"
 @import "bulma/sass/layout/section"
 
+@import "movie-card"
diff --git a/front/css/movie-card.sass b/front/css/movie-card.sass
new file mode 100644
index 0000000..bd2ce75
--- /dev/null
+++ b/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