Start table view

frontend/components/Note.vue

@@ -2,27 +2,34 @@
     <v-card
         class="d-flex flex-column"
         :class="{ hover: hover }"
+        d
         height="100%"
-        :color="hover ? 'blue lighten-3' : 'white'"
+        :color="hover ? 'blue lighten-4' : ''"
         :elevation="hover ? 12 : 2"
     >
         <div class="mb-auto">
-            <v-card-title>{{ title }}</v-card-title>
-
-            <div class="tags">
-                <v-chip
-                    v-for="tag in tags"
-                    :key="tag"
-                    active
-                    color="secondary"
-                    >{{ tag }}</v-chip
-                >
-            </div>
-        </div>
-
-        <div v-if="updatedAt" class="mt-auto">
-            <v-divider />
-            <v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
+            <v-list-item three-line>
+                <v-list-item-content>
+                    <div class="overline mb-4">
+                        Last updated {{ updatedAt }}
+                    </div>
+                    <v-list-item-title class="headline mb-1">
+                        <h2 class="title primary--text">{{ title }}</h2>
+                    </v-list-item-title>
+                </v-list-item-content>
+            </v-list-item>
+            <v-card-actions>
+                <div class="tags">
+                    <v-chip
+                        v-for="tag in tags"
+                        :key="tag"
+                        active
+                        color="secondary"
+                    >
+                        {{ tag }}
+                    </v-chip>
+                </div>
+            </v-card-actions>
         </div>
     </v-card>
 </template>