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

Improve layout of groups

Browse Source
This commit is contained in:
Jan Bader 2022-03-14 19:10:09 +00:00
parent b176ce26ba
commit d9efa9f4a1
2 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/Currency.vue
View File

@ -1,7 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue'; import { computed } from 'vue';
const props = defineProps<{ value: number | undefined }>(); const props = defineProps<{
value: number | undefined
negativeClass?: string
positiveClass?: string
}>();
const internalValue = computed(() => Number(props.value ?? 0)); const internalValue = computed(() => Number(props.value ?? 0));
@ -11,5 +15,5 @@ const formattedValue = computed(() => internalValue.value.toLocaleString(undefin
</script> </script>
<template> <template>
<span class="text-right" :class="internalValue < 0 ? 'negative' : ''">{{ formattedValue }} €</span> <span class="text-right" :class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass">{{ formattedValue }} €</span>
</template> </template>

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

@ -95,14 +95,14 @@ function assignedChanged(e : Event, category : Category){
<span class="hidden sm:block text-right">Activity</span> <span class="hidden sm:block text-right">Activity</span>
<span class="hidden sm:block text-right">Available</span> <span class="hidden sm:block text-right">Available</span>
<template v-for="group in GroupsForMonth"> <template v-for="group in GroupsForMonth">
<a <span
class="text-lg font-bold" class="text-lg font-bold"
@click="toggleGroup(group)" @click="toggleGroup(group)"
>{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a> >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span>
<Currency :value="group.AvailableLastMonth" class="hidden lg:block" /> <Currency :value="group.AvailableLastMonth" class="hidden lg:block font-thin" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
<Currency :value="group.Assigned" class="hidden sm:block mx-2 text-right" /> <Currency :value="group.Assigned" class="hidden sm:block mx-2 text-right" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
<Currency :value="group.Activity" class="hidden sm:block" /> <Currency :value="group.Activity" class="hidden sm:block" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
<Currency :value="group.Available" /> <Currency :value="group.Available" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
<template v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)"> <template v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
<span class="whitespace-nowrap overflow-hidden">{{ category.Name }}</span> <span class="whitespace-nowrap overflow-hidden">{{ category.Name }}</span>
<Currency :value="category.AvailableLastMonth" class="hidden lg:block" /> <Currency :value="category.AvailableLastMonth" class="hidden lg:block" />