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

Use grid instead of table

Browse Source
This commit is contained in:
Jan Bader 2022-03-01 08:36:03 +00:00
parent 18149eef8b
commit 6dd8a3791f
1 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/pages/Budgeting.vue
View File

@ -79,31 +79,24 @@ function getGroupState(group : {Name : string, Expand: boolean}) : boolean {
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
>Next Month</router-link>
</div>
<table class="container col-lg-12" id="content">
<tr>
<th>Category</th>
<th class="hidden md:block">Leftover</th>
<th>Assigned</th>
<th>Activity</th>
<th>Available</th>
</tr>
<tbody v-for="group in GroupsForMonth">
<tr><td><a class="text-lg font-bold" colspan="4" @click="toggleGroup(group)">{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a></td></tr>
<tr v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
<td>{{ category.Name }}</td>
<td class="text-right hidden md:block">
<div class="container col-lg-12 grid grid-cols-4 md:grid-cols-5" id="content">
<span>Category</span>
<span class="hidden md:block">Leftover</span>
<span>Assigned</span>
<span>Activity</span>
<span>Available</span>
<template v-for="group in GroupsForMonth">
<a
class="text-lg font-bold col-span-4 md:col-span-5"
@click="toggleGroup(group)"
>{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a>
<template v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
<span>{{ category.Name }}</span>
<Currency :value="category.AvailableLastMonth" />
</td>
<td class="text-right">
<Currency :value="category.Assigned" />
</td>
<td class="text-right">
<Currency :value="category.Activity" />
</td>
<td class="text-right">
<Currency :value="category.Available" />
</td>
</tr>
</tbody>
</table>
</template>
</template>
</div>
</template>