From 348b4b2702b5cac3382be2c37b4ad7899b60213f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Mon, 27 May 2019 14:23:33 +0200
Subject: [PATCH] layout fixes DeckList and subcomponents

---
 frontend/src/components/Deck.vue     | 12 ++++++++----
 frontend/src/components/DeckList.vue | 13 +++++++------
 frontend/src/components/NewDeck.vue  | 22 ++++++++++++++++------
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Deck.vue b/frontend/src/components/Deck.vue
index 8bd70fb..8657163 100644
--- a/frontend/src/components/Deck.vue
+++ b/frontend/src/components/Deck.vue
@@ -2,7 +2,7 @@
   <v-expansion-panel-content>
     <template v-slot:header>
       <v-layout align-center row>
-        <v-flex text-xs-center xs2>
+        <v-flex text-xs-center xs4 sm3 md2>
           <Crystal
             v-for="element in deck.elements()"
             :key="element.name"
@@ -10,7 +10,11 @@
           />
         </v-flex>
         <v-flex class="subheading">
-          {{ deck.name }}
+          <v-card flat>
+            <v-card-text>
+              {{ deck.name }}
+            </v-card-text>
+          </v-card>
         </v-flex>
       </v-layout>
     </template>
@@ -54,8 +58,8 @@
               </v-card-title>
 
               <v-card-text>
-                Are you sure you want to delete this deck? This cannot be
-                undone.
+                Are you sure you want to delete your deck "{{ deck.name }}"?
+                This cannot be undone.
               </v-card-text>
 
               <v-card-actions>
diff --git a/frontend/src/components/DeckList.vue b/frontend/src/components/DeckList.vue
index f57aa10..d83e09b 100644
--- a/frontend/src/components/DeckList.vue
+++ b/frontend/src/components/DeckList.vue
@@ -1,17 +1,18 @@
 <template>
   <v-expansion-panel v-model="open">
-    <Deck
-      v-for="deck in linked"
-      :deck="deck"
-      :key="deck.id"
-      @change="refresh_decks"
-    />
     <NewDeck
       @change="
         open = null
         refresh_decks()
       "
     />
+
+    <Deck
+      v-for="deck in linked"
+      :deck="deck"
+      :key="deck.id"
+      @change="refresh_decks"
+    />
   </v-expansion-panel>
 </template>
 
diff --git a/frontend/src/components/NewDeck.vue b/frontend/src/components/NewDeck.vue
index 42d6fc9..a1eec5c 100644
--- a/frontend/src/components/NewDeck.vue
+++ b/frontend/src/components/NewDeck.vue
@@ -1,14 +1,24 @@
 <template>
   <v-expansion-panel-content>
     <template v-slot:header>
-      <span class="subheading">New Deck</span>
+      <v-layout align-center row>
+        <v-flex text-xs-center xs4 sm3 md2>
+          <v-icon>view_carousel</v-icon>
+          <v-icon>add</v-icon>
+        </v-flex>
+        <v-flex class="subheading">
+          <v-card flat>
+            <v-card-text>
+              New Deck
+            </v-card-text>
+          </v-card>
+        </v-flex>
+      </v-layout>
     </template>
 
-    <v-container>
-      <v-card flat>
-        <DeckEditor ref="editor" @save="save_deck" />
-      </v-card>
-    </v-container>
+    <v-card flat>
+      <DeckEditor ref="editor" @save="save_deck" />
+    </v-card>
   </v-expansion-panel-content>
 </template>