🐛 Fix train card UI bugs.

quentin-aslan · Nov 25, 2024 · 062dbf7 · 062dbf7
1 parent 427f007
commit 062dbf7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/components/TrainCard.vue b/components/TrainCard.vue
@@ -23,7 +23,7 @@
           <div class="relative">
             <div
               class="absolute bg-max-sec"
-              style="width: 2px; height: 5.5rem; top: -2.5rem; left: 0.98rem;"
+              style="width: 2px; height: 5.5rem; top: -1rem; left: 0.96rem;"
             />
           </div>
 

diff --git a/components/TrainSegment.vue b/components/TrainSegment.vue
@@ -13,16 +13,16 @@
     <div
       v-if="isLast"
       class="absolute bg-max-sec"
-      style="width: 2px; height: 2.8rem; bottom: 2rem; left: -0.04rem;"
+      style="width: 2px; height: 2.5rem; bottom: 2rem; left: -0.04rem;"
     />
     <!-- Train Details -->
     <div>
       <div class="text-xl text-max-pri font-sans-semibold">
         <span>{{ formattedTime(train.departureDateTime) }}</span>
-        <span class="text-base font-sans"> ({{ train.trainNo }})</span>
+        <span class="text-base font-sans-italic"> Train n° {{ train.trainNo }}</span>
       </div>
-      <div class="text-sm font-sans-semibold  text-max-pri">
-        {{ train.origin }}
+      <div class="text-sm text-max-pri font-sans-semibold">
+        <span>{{ train.origin }}</span>
       </div>
       <!-- End Station -->
       <div
@@ -35,10 +35,7 @@
             style="position: absolute; top: 1rem; left: -2.24rem;"
           /> <!-- Dot for end station -->
           <div>
-            <div class="text-sm font-sans-semibold text-max-pri">
-              {{ train.destination }}
-            </div>
-            <div class="text-xl text-max-pri font-sans-medium">
+            <div class="text-xl text-max-pri font-sans-semibold">
               {{ formattedTime(train.arrivalDateTime) }} <span
                 v-if="!isSameDay(new Date(train.departureDateTime), new Date(train.arrivalDateTime))"
                 class="text-base font-sans"
@@ -47,6 +44,9 @@
                 <span class="border-b-max-action border-b-4">TRAIN DE NUIT</span>
               </span>
             </div>
+            <div class="text-sm text-max-pri font-sans-semibold">
+              {{ train.destination }}
+            </div>
           </div>
         </div>
       </div>
@@ -58,7 +58,7 @@
 import { defineProps } from 'vue'
 import trainIcon from 'assets/icons/train.svg?raw'
 import type { AdaptedTrainData } from '~/types/common'
-import { formattedDate, formattedDateWithoutTime, formattedTime } from '~/utils'
+import { formattedDateWithoutTime, formattedTime } from '~/utils'
 
 type Props = {
   train: AdaptedTrainData

diff --git a/pages/index.vue b/pages/index.vue
@@ -25,7 +25,7 @@
           <HomeSearch v-if="isMobile" />
 
           <!-- Paragraphe descriptif -->
-          <p class="text-xl text-max-pri">
+          <p class="text-xl text-max-pri bg-max-bg p-3 rounded-3xl">
             Utilise notre application pour tirer le meilleur parti de ton abonnement <strong>MAX JEUNE</strong>. Découvre toutes les destinations accessibles depuis ta ville de départ en quelques clics !
           </p>
         </div>