From 31015e8b313475a21502b24d0d0ba212d0f76e0e Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 17 Mar 2021 15:19:26 +0000
Subject: [PATCH] centering chosen cards in deck

---
 src/views/DeckBuilder.vue | 43 +++++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/views/DeckBuilder.vue b/src/views/DeckBuilder.vue
index 0774ab2..fa5254b 100644
--- a/src/views/DeckBuilder.vue
+++ b/src/views/DeckBuilder.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container fluid px-16 pb-10>
     <v-row>
       <v-col cols="12">
         <div class="text-center">
@@ -78,7 +78,7 @@
               </div>
               <div cols="12">
                 <!-- {{ index }} -->
-                {{selected_shikigami_decks[index][index].length}}
+                <!-- {{ selected_shikigami_decks[index][index].length }} -->
                 <v-select
                   v-model="selected_shikigami_decks[index][index]"
                   v-on:input="limit_decks"
@@ -91,7 +91,7 @@
                   persistent-hint
                   return-object
                 >
-                  <template v-slot:selection="{data, pos}">
+                  <template v-slot:selection="{ data, pos }">
                     <v-chip
                       v-if="pos === 0"
                       v-bind="data.attrs"
@@ -104,32 +104,35 @@
                       >{{ data.item.name }}</v-chip
                     >
                     <span v-if="pos === 1" class="grey--text caption">
-                      (+{{ selected_shikigami_decks[index][index].length - 1 }} others)
+                      (+{{ selected_shikigami_decks[index][index].length - 1 }}
+                      others)
                     </span></template
                   >
                 </v-select>
               </div>
             </div>
           </v-col>
-          <v-col cols="10">
+          <v-col cols="10" class="d-flex align-center">
             <div cols="12">
               <!-- {{ selected_shikigami_decks[index][index] }} -->
             </div>
-            <v-row cols="12" class="d-flex">
-              <v-card
-                v-for="i in selected_shikigami_decks[index][index]"
-                :key="i.id"
-                width="12.4%"
-                color="#070042"
-              >
-                <div class="text-center">
-                  <!-- {{ i.name }} -->
-                </div>
-                <v-img
-                  :src="require(`@/assets/deck_of_cards/${i.url}`)"
-                  class="deck-card"
-                ></v-img
-              ></v-card>
+            <v-row cols="12" class="">
+                <v-card
+                  v-for="i in selected_shikigami_decks[index][index]"
+                  :key="i.id"
+                  width="12.4%"
+                  color="#070042"
+                  class=""
+                >
+                  <!-- <div class="text-center">
+                  {{ i.name }}
+                </div> -->
+                  <div class="">
+                    <v-img
+                      :src="require(`@/assets/deck_of_cards/${i.url}`)"
+                      class="deck-card"
+                    ></v-img></div
+                ></v-card>
             </v-row>
           </v-col>
         </v-row>