jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Improve layout

Browse Source
This commit is contained in:
Jan Bader 2022-02-04 19:54:32 +00:00
parent 3f7f646120
commit 1d0fe60ea4
4 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/App.vue
View File

@ -37,12 +37,14 @@ export default defineComponent({
</div> </div>
</div> </div>
<div :class="$store.state.ShowMenu ? 'visible' : 'hidden'"> <div class="flex flex-col md:flex-row flex-1">
<router-view name="sidebar"></router-view> <div :class="$store.state.ShowMenu ? 'visible' : 'hidden'" class="md:w-72 flex-shrink-0 w-full">
</div> <router-view name="sidebar"></router-view>
</div>
<div> <div class="flex-1 p-6">
<router-view></router-view> <router-view></router-view>
</div>
</div> </div>
</div> </div>
</template> </template>

8
web/src/index.css
View File

@ -1,3 +1,11 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
h1 {
font-size: 200%;
}
a {
text-decoration: underline;
}

42
web/src/pages/BudgetSidebar.vue
View File

@ -7,40 +7,40 @@ export default defineComponent({
</script> </script>
<template> <template>
<h1> <span class="text-xl">
<router-link to="/dashboard">⌂</router-link> <router-link to="/dashboard">⌂</router-link>
{{$store.getters.CurrentBudget.Name}} {{$store.getters.CurrentBudget.Name}}
</h1> </span>
<ul> <div class="flex flex-col">
<li><router-link :to="'/budget/'+budgetid">Budget</router-link></li> <span class="bg-orange-200 rounded-lg m-1 p-1 px-3"><router-link :to="'/budget/'+budgetid">Budget</router-link></span>
<li>Reports (Coming Soon)</li> <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><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 On-Budget Accounts
<ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued"> <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between px-3">
<li> <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
<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>
<span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span> </div>
</li>
</ul>
</li> </li>
<li> <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
Off-Budget Accounts Off-Budget Accounts
<ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued"> <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between px-3">
<li>
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link> <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
<span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span> <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span>
</li> </div>
</ul>
</li> </li>
<li> <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
Closed Accounts Closed Accounts
</li> </li>
<!--<li> <!--<li>
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/accounts'">Edit accounts</router-link> <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/accounts'">Edit accounts</router-link>
</li>--> </li>-->
<li>+ Add Account</li> <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
<li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/settings'">Budget-Settings</router-link></li> + 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>--> <!--<li><router-link to="/admin">Admin</router-link></li>-->
</ul> </div>
</template> </template>

2
web/src/pages/Dashboard.vue
View File

@ -11,7 +11,7 @@ export default defineComponent({
<template> <template>
<h1>Budgets</h1> <h1>Budgets</h1>
<div class="flex"> <div class="grid md:grid-cols-2 gap-6">
<Card v-for="budget in $store.getters.Budgets"> <Card v-for="budget in $store.getters.Budgets">
<router-link v-bind:to="'/budget/'+budget.ID" class="contents"> <router-link v-bind:to="'/budget/'+budget.ID" class="contents">
<!--<svg class="w-24"></svg>--> <!--<svg class="w-24"></svg>-->