💄 (task) improve task list and preview

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

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">
+        <router-link :to="{ name: 'task-view', params: { id: task.id } }">
           <div class="line">
-          <router-link :to="{ name: 'task-view', params: { id: task.id } }">{{
-            task.title
-          }}</router-link>
+            {{ 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;

src/views/HomeView.vue

@@ -55,6 +55,7 @@ main {
 
 .new-task-container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }