From 1d0fe60ea488cfb8715842bf551e3ec8b52e9820 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 4 Feb 2022 19:54:32 +0000
Subject: [PATCH] Improve layout

---
 web/src/App.vue                 | 14 ++++++-----
 web/src/index.css               | 10 +++++++-
 web/src/pages/BudgetSidebar.vue | 42 ++++++++++++++++-----------------
 web/src/pages/Dashboard.vue     |  2 +-
 4 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 9beca57..caedb97 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -37,12 +37,14 @@ export default defineComponent({
       </div>
     </div>
 
-    <div :class="$store.state.ShowMenu ? 'visible' : 'hidden'">
-      <router-view name="sidebar"></router-view>
-    </div>
-  
-    <div>
-      <router-view></router-view>
+    <div class="flex flex-col md:flex-row flex-1">
+      <div :class="$store.state.ShowMenu ? 'visible' : 'hidden'" class="md:w-72 flex-shrink-0 w-full">
+        <router-view name="sidebar"></router-view>
+      </div>
+
+      <div class="flex-1 p-6">
+        <router-view></router-view>
+      </div>
     </div>
   </div>
 </template>
diff --git a/web/src/index.css b/web/src/index.css
index bd6213e..ee11269 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+h1 {
+  font-size: 200%;
+}
+
+a {
+  text-decoration: underline;
+}
\ No newline at end of file
diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 932cf70..f645ac5 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -7,40 +7,40 @@ export default defineComponent({
 </script>
 
 <template>
-  <h1>
+  <span class="text-xl">
     <router-link to="/dashboard">⌂</router-link>
     {{$store.getters.CurrentBudget.Name}}
-  </h1>
-  <ul>
-    <li><router-link :to="'/budget/'+budgetid">Budget</router-link></li>
-    <li>Reports (Coming Soon)</li>
+  </span>
+  <div class="flex flex-col">
+    <span class="bg-orange-200 rounded-lg m-1 p-1 px-3"><router-link :to="'/budget/'+budgetid">Budget</router-link></span>
+    <li class="bg-orange-200 rounded-lg m-1 p-1 px-3">Reports (Coming Soon)</li>
     <!--<li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/all-accounts'">All Accounts</router-link></li>-->
-    <li>
+    <li class="bg-orange-200 rounded-lg m-1 p-1 px-3">
       On-Budget Accounts
-      <ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued">
-          <li>
-            <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-            <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span>
-          </li>
-      </ul>
+      <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between px-3">
+        <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
+        <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{(account.Balance.Int / 100).toLocaleString(undefined, {minimumFractionDigits: 2,})}} €</span>
+      </div>
     </li>
-    <li>
+    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       Off-Budget Accounts
-      <ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued">
-          <li>
+      <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between px-3">
             <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
             <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span>
-          </li>
-      </ul>
+      </div>
     </li>
-    <li>
+    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       Closed Accounts
     </li>
     <!--<li>
       <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/accounts'">Edit accounts</router-link>
     </li>-->
-    <li>+ Add Account</li>
-    <li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/settings'">Budget-Settings</router-link></li>
+    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
+      + Add Account
+    </li>
+    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
+      <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/settings'">Budget-Settings</router-link>
+    </li>
     <!--<li><router-link to="/admin">Admin</router-link></li>-->
-</ul>        
+  </div>        
 </template>
\ No newline at end of file
diff --git a/web/src/pages/Dashboard.vue b/web/src/pages/Dashboard.vue
index a810eb6..627cba8 100644
--- a/web/src/pages/Dashboard.vue
+++ b/web/src/pages/Dashboard.vue
@@ -11,7 +11,7 @@ export default defineComponent({
 
 <template>
     <h1>Budgets</h1>
-    <div class="flex">
+    <div class="grid md:grid-cols-2 gap-6">
         <Card v-for="budget in $store.getters.Budgets">
             <router-link v-bind:to="'/budget/'+budget.ID" class="contents">
             <!--<svg class="w-24"></svg>-->