From 0db6d6c67abd6e892636b63b40976cdf9ce9ac9a Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Thu, 27 Jan 2022 21:37:04 +0000
Subject: [PATCH] Organize settings in cards

---
 web/src/pages/Settings.vue | 80 +++++++++++++++++++++++++++++---------
 1 file changed, 62 insertions(+), 18 deletions(-)

diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index cbcd344..774e689 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -46,25 +46,69 @@ export default {
 </script>
 
 <template>
+    <v-container>
     <h1>Danger Zone</h1>
+    <v-row>
+    <v-col>
+        <v-card max-width="380">
+            <v-card-header>
+                <v-card-header-text>
+                    <v-card-title>
+                        Clear Budget
+                    </v-card-title>
+                    <v-card-subtitle>
+                        This removes transactions and assignments to start from scratch. Accounts and categories are kept. Not undoable!
+                    </v-card-subtitle>
+                </v-card-header-text>
+            </v-card-header>
+            <v-card-actions>
+                <v-btn @click="clearBudget">Clear budget</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-col>
+    <v-col max-width="380">
+        <v-card max-width="380">
+            <v-card-header>
+                <v-card-header-text>
+                    <v-card-title>
+                        Fix all historic negative category-balances
+                    </v-card-title>
+                    <v-card-subtitle>
+                        This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.
+                    </v-card-subtitle>
+                </v-card-header-text>
+            </v-card-header>
+            <v-card-actions>
+                <v-btn @click="cleanNegative">Fix negative</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-col>
+    <v-col max-width="380">
+        <v-card max-width="380">
+            <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>
+                        <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>
+            </v-card-actions>
+        </v-card>
+    </v-col>
+</v-row>
     <v-card>
-        <v-btn @click="clearBudget">Clear budget</v-btn>
-        <p>This removes transactions and assignments to start from scratch. Accounts and categories are kept. Not undoable!</p>
-    </v-card>
-    <v-card>
-        <v-btn @click="cleanNegative">Fix all historic negative category-balances</v-btn>
-        <p>This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.</p>
-    </v-card>
-    <v-card>
-        <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>
-        <button v-if="hasFiles" @click="ynabImport">Importieren</button>
     </v-card>
+</v-container>
 </template>
\ No newline at end of file