From 0334b35041e210a7b219087d99a3924e609fb647 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 28 Jan 2022 09:42:25 +0000
Subject: [PATCH] Improve Layout of BudgetSettings

---
 web/src/pages/Settings.vue | 44 +++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index 274ec7e..2121248 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -9,8 +9,8 @@ export default {
         }
     },
     computed: {
-        hasFiles() {
-            return this.$data.transactionsFile != null && this.$data.assignmentsFile != null;
+        filesIncomplete() {
+            return this.$data.transactionsFile == null || this.$data.assignmentsFile == null;
         }
     },
     mounted() {
@@ -49,7 +49,7 @@ export default {
     <v-container>
     <h1>Danger Zone</h1>
     <v-row>
-    <v-col>
+    <v-col cols="12" md="6" xl="3">
         <v-card>
             <v-card-header>
                 <v-card-header-text>
@@ -61,12 +61,12 @@ export default {
                     </v-card-subtitle>
                 </v-card-header-text>
             </v-card-header>
-            <v-card-actions>
-                <v-btn @click="clearBudget">Clear budget</v-btn>
+            <v-card-actions class="justify-center">
+                <v-btn @click="clearBudget" color="error">Clear budget</v-btn>
             </v-card-actions>
         </v-card>
     </v-col>
-    <v-col>
+    <v-col cols="12" md="6" xl="3">
         <v-card>
             <v-card-header>
                 <v-card-header-text>
@@ -78,33 +78,33 @@ export default {
                     </v-card-subtitle>
                 </v-card-header-text>
             </v-card-header>
-            <v-card-actions>
-                <v-btn @click="cleanNegative">Fix negative</v-btn>
+            <v-card-actions class="justify-center">
+                <v-btn @click="cleanNegative" color="primary">Fix negative</v-btn>
             </v-card-actions>
         </v-card>
     </v-col>
-    <v-col>
+    <v-col cols="12" xl="6">
         <v-card>
             <v-card-header>
                 <v-card-header-text>
                     <v-card-title>
                         Import YNAB Budget
                     </v-card-title>
-                    <v-card-content>
-                        <label for="transactions_file">
-                            Transaktionen:
-                            <input type="file" @change="gotTransactions" accept="text/*" />
-                        </label>
-                        <br />
-                        <label for="assignments_file">
-                            Budget:
-                            <input type="file" @change="gotAssignments" accept="text/*" />
-                        </label>
-                    </v-card-content>
                 </v-card-header-text>
             </v-card-header>
-            <v-card-actions>
-                <button v-if="hasFiles" @click="ynabImport">Importieren</button>
+
+            <label for="transactions_file">
+                Transaktionen:
+                <input type="file" @change="gotTransactions" accept="text/*" />
+            </label>
+            <br />
+            <label for="assignments_file">
+                Budget:
+                <input type="file" @change="gotAssignments" accept="text/*" />
+            </label>
+
+            <v-card-actions class="justify-center">
+                <v-btn :disabled="filesIncomplete" @click="ynabImport" color="primary">Importieren</v-btn>
             </v-card-actions>
         </v-card>
     </v-col>