From c767c84a43ca1fe344b6379bec0fcfe51eae68c5 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Thu, 3 Aug 2023 23:25:25 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20(task)=20improve=20task=20list?=
 =?UTF-8?q?=20and=20preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../record/components/TaskRecordPreview.vue   | 26 +++++++++------
 src/modules/task/components/TaskList.vue      | 32 ++++++++++++-------
 src/views/HomeView.vue                        |  1 +
 3 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/modules/record/components/TaskRecordPreview.vue b/src/modules/record/components/TaskRecordPreview.vue
index f805edb..450e26c 100644
--- a/src/modules/record/components/TaskRecordPreview.vue
+++ b/src/modules/record/components/TaskRecordPreview.vue
@@ -14,14 +14,7 @@ const { duration } = useTaskRecordMetadata(taskRecord)
 </script>
 
 <template>
-  <div>
-    <div class="content">
-      <div v-if="taskRecord" class="task-record-link-container content">
-        <span v-if="duration !== null">last time: {{ duration }} minutes</span>
-      </div>
-      <div v-else>No record yet</div>
-    </div>
-    <hr />
+  <div class="task-record-preview">
     <router-link
       :to="{
         name: 'record-view',
@@ -30,13 +23,28 @@ const { duration } = useTaskRecordMetadata(taskRecord)
       class="button is-primary is-light"
       >recording page</router-link
     >
+    <div v-if="taskRecord" class="task-record-link-container content">
+      <span v-if="duration !== null"
+        >Last record took {{ duration }} minutes</span
+      >
+    </div>
+    <div v-else>No record yet</div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.task-record-link-container {
+.task-record-preview {
+  margin: auto;
   display: flex;
+  justify-content: space-around;
   align-items: center;
+  flex-wrap: wrap;
   gap: 1rem;
+
+  .task-record-link-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
 }
 </style>
diff --git a/src/modules/task/components/TaskList.vue b/src/modules/task/components/TaskList.vue
index 695117b..a687509 100644
--- a/src/modules/task/components/TaskList.vue
+++ b/src/modules/task/components/TaskList.vue
@@ -9,33 +9,41 @@ const taskStore = useTaskStore()
   <div class="task-list-container" v-if="taskStore.recentTasks.length > 0">
     <ul class="task-list">
       <li v-for="task in taskStore.recentTasks" :key="task.id">
-        <div class="line">
-          <router-link :to="{ name: 'task-view', params: { id: task.id } }">{{
-            task.title
-          }}</router-link>
-        </div>
-        <div class="line">
-          <span class="tag">{{ task.totalEstimation }} minutes</span>
-          <span>{{ formatToShortDate(task.date) }}</span>
-        </div>
+        <router-link :to="{ name: 'task-view', params: { id: task.id } }">
+          <div class="line">
+            {{ task.title }}
+          </div>
+          <div class="line">
+            <span class="tag">{{ task.totalEstimation }} minutes</span>
+            <span>{{ formatToShortDate(task.date) }}</span>
+          </div>
+        </router-link>
       </li>
     </ul>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .task-list-container {
   padding: 0.5rem;
-  background-color: #f1f2f6;
 }
 
 .task-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+
+  li {
+    background-color: #f1f2f6;
+
+    a {
+      display: block;
+      padding: 1rem;
+    }
+  }
 }
 
-.task-list .line {
+.line {
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index fa977c3..4021444 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -55,6 +55,7 @@ main {
 
 .new-task-container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }