From e00d6a0a819e3090345c02c25d1cc0183a521f79 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Fri, 10 Mar 2023 18:18:21 +0100
Subject: [PATCH] feat [front]: mobile full movie card

---
 front/components/movieCard/full.vue | 127 ++++++++++++++++++++--------
 1 file changed, 93 insertions(+), 34 deletions(-)

diff --git a/front/components/movieCard/full.vue b/front/components/movieCard/full.vue
index c2bab62..d9a7081 100644
--- a/front/components/movieCard/full.vue
+++ b/front/components/movieCard/full.vue
@@ -1,34 +1,63 @@
 <template>
   <div v-if="film">
     <div class="card movie-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">
+      <header class="card-content is-hidden-tablet">
+        <h3 class="title is-4 mr-4">{{ film.title }}</h3>
+        <div class="subtitle is-5">{{ film.director }}</div>
+      </header>
+      <header class="is-flex">
+        <div
+          class="poster-container is-hidden-tablet"
+          :style="{ '--poster-url': `url(${film.posterLink})` }"
+        >
+          <figure class="image m-auto">
+            <img :src="film.posterLink" alt="Affiche du film" />
+          </figure>
+        </div>
+        <div class="card-content">
+          <div class="is-flex is-flex-direction-column">
+            <ButtonIcon
+              v-if="film.trailerLink"
+              label="Bande-annonce"
+              icon="ri-play-circle-fill"
+              class="is-primary is-outlined mb-4 ml-auto is-hidden-tablet"
+              @click="showTrailerModal = true"
+            />
             <div
-              v-for="(tag, index) of headerTags"
-              :key="index"
-              class="control"
+              class="is-hidden-mobile mb-5 is-flex is-justify-content-space-between is-align-items-center"
             >
-              <div class="tags has-addons">
-                <span v-if="tag.label" class="tag">{{ tag.label }}</span>
-                <span class="tag is-primary">{{ tag.value }}</span>
+              <div>
+                <h3 class="title is-4 is-inline mr-4 mb-0">{{ film.title }}</h3>
+                <div class="subtitle is-5 is-inline mb-0">
+                  {{ film.director }}
+                </div>
+              </div>
+              <ButtonIcon
+                v-if="film.trailerLink"
+                label="Bande-annonce"
+                icon="ri-play-circle-fill"
+                class="is-primary is-outlined"
+                @click="showTrailerModal = true"
+              />
+            </div>
+            <div class="field is-grouped is-grouped-multiline">
+              <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>
         </div>
-        <ButtonIcon
-          v-if="film.trailerLink"
-          label="Bande-annonce"
-          icon="ri-play-circle-fill"
-          class="is-primary is-outlined ml-auto"
-          @click="showTrailerModal = true"
-        />
       </header>
       <div class="is-flex">
         <div
-          class="poster-container"
+          class="poster-container is-hidden-mobile"
           :style="{ '--poster-url': `url(${film.posterLink})` }"
         >
           <figure class="image m-auto">
@@ -37,6 +66,12 @@
         </div>
         <div class="card-content">
           <div class="content movie-content">
+            <p
+              v-if="film.projectionComment"
+              class="block has-text-centered has-text-weight-bold is-italic"
+            >
+              {{ film.projectionComment }}
+            </p>
             <p v-if="film.actors && film.actors.length" class="block">
               <span class="has-text-weight-bold">Acteurs :</span>
               {{ film.actors.join(", ") }}
@@ -45,16 +80,22 @@
               <span class="has-text-weight-bold">Synopsis :</span>
               {{ film.synopsis }}
             </p>
-            <div
-              v-if="film.projectionComment"
-              class="block has-text-centered has-text-weight-bold is-italic my-auto"
-            >
-              <p>{{ film.projectionComment }}</p>
-            </div>
           </div>
         </div>
       </div>
       <footer class="card-content is-flex">
+        <time
+          class="title is-4 mb-4 is-hidden-tablet"
+          :datetime="film.projectionDate"
+        >
+          {{ prettyDate.short(film.projectionDate) }}
+        </time>
+        <time
+          class="title is-4 mb-0 is-hidden-mobile"
+          :datetime="film.projectionDate"
+        >
+          {{ prettyDate.full(film.projectionDate) }}
+        </time>
         <div class="buttons">
           <template v-if="isPast">
             <ButtonIcon
@@ -77,17 +118,16 @@
                 class="is-outlined is-primary"
               />
             </a>
+            <!--  TODO          
             <ButtonIcon
-              v-if="film.icsDownload"
-              label="Ajouter au calendrier"
-              icon="ri-calendar-event-fill"
-              class="is-outlined is-primary"
-            />
+                v-if="film.icsDownload"
+                label="Ajouter au calendrier"
+                icon="ri-calendar-event-fill"
+                class="is-outlined is-primary"
+              />
+              -->
           </template>
         </div>
-        <time class="ml-auto title is-4" :datetime="film.projectionDate">
-          {{ prettyDate.full(film.projectionDate) }}
-        </time>
       </footer>
     </div>
     <MovieCardTrailerModal
@@ -96,6 +136,7 @@
       :iframe-id="`film-card-${film.id}`"
       @close="showTrailerModal = false"
     />
+    <!-- TODO responsive modal video cf MSF -->
   </div>
 </template>
 
@@ -137,11 +178,29 @@ const headerTags = computed<{ label?: string; value: string }[]>(() =>
 
 <style scoped lang="sass">
 .movie-card .poster-container
-  width: 200px
+  max-width: 50%
+  width: 25%
+  // ?
+  // TODO fit poster size
+  @include tablet()
+    width: 200px
 
 .card .card-content .content.movie-content
   height: 100%
   display: flex
   flex-direction: column
   white-space: pre-wrap
+
+.card-content
+  @include mobile()
+    padding: 1rem
+
+footer.card-content
+  flex-direction: column
+  text-align: center
+  justify-items: center
+  @include tablet()
+    flex-direction: row-reverse
+    justify-content: space-between
+    justify-items: auto
 </style>