Improve UI/UX

Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
Knut Ahlers 2024-01-21 00:51:47 +01:00
parent e333048c85
commit a7345611f9
Signed by: luzifer
SSH key fingerprint: SHA256:/xtE5lCgiRDQr8SLxHMS92ZBlACmATUmF1crK16Ks4E
3 changed files with 80 additions and 53 deletions

View file

@ -2,15 +2,20 @@
<div> <div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col d-flex align-items-center"> <div class="col d-flex fs-3 align-items-center text-semibold">
{{ accountIdToName[accountId] }}
</div>
<div class="col d-flex align-items-center justify-content-end">
<range-selector <range-selector
v-model="timeRange" v-model="timeRange"
/> />
</div> </div>
<div class="col d-flex text-center flex-column"> </div>
<span class="fs-3 mb-2 text-semibold">{{ accountIdToName[accountId] }}</span>
<div class="d-flex align-items-center mx-auto"> <div class="row mt-3">
<div class="d-inline-flex text-center flex-column mx-4"> <div class="col d-flex align-items-center">
<div class="d-flex align-items-start">
<div class="d-inline-flex text-center flex-column me-4">
{{ formatNumber(account.balance - balanceUncleared) }} {{ formatNumber(account.balance - balanceUncleared) }}
<span class="form-text mt-0"> <span class="form-text mt-0">
<i class="fas fa-fw fa-copyright mr-1 text-success" /> <i class="fas fa-fw fa-copyright mr-1 text-success" />
@ -26,7 +31,7 @@
</span> </span>
</div> </div>
= =
<div class="d-inline-flex text-center flex-column mx-4"> <div class="d-inline-flex text-center flex-column ms-4">
{{ formatNumber(account.balance) }} {{ formatNumber(account.balance) }}
<span class="form-text mt-0">Working Balance</span> <span class="form-text mt-0">Working Balance</span>
</div> </div>
@ -58,7 +63,7 @@
@click="editSelected" @click="editSelected"
> >
<i class="fas fa-fw fa-pencil mr-1" /> <i class="fas fa-fw fa-pencil mr-1" />
Edit Edit Transaction
</button> </button>
<button <button
type="button" type="button"
@ -95,6 +100,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<div class="col"> <div class="col">
<table class="table table-striped small"> <table class="table table-striped small">

View file

@ -18,52 +18,14 @@
--> -->
<hr> <hr>
<ul class="list-unstyled lh-lg ps-0"> <ul class="list-unstyled lh-lg ps-0">
<li class="mb-1 fw-semibold"> <acc-list
<div class="d-flex align-items-center"> :accounts="budgetAccounts"
<i class="fas fa-fw fa-credit-card me-1" /> Budget header="Budget"
<span :class="{'ms-auto': true, 'text-danger': budgetSum < 0}"> />
{{ formatNumber(budgetSum) }} <acc-list
</span> :accounts="trackingAccounts"
</div> header="Tracking"
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ps-3 small"> />
<li>
<router-link
v-for="acc in budgetAccounts"
:key="acc.id"
class="d-flex align-items-center text-white text-decoration-none"
:to="{ name: 'account-transactions', params: { accountId: acc.id }}"
>
{{ acc.name }}
<span :class="{'ms-auto': true, 'text-danger': acc.balance < 0}">
{{ formatNumber(acc.balance) }}
</span>
</router-link>
</li>
</ul>
</li>
<li class="mb-1 fw-semibold">
<div class="d-flex align-items-center">
<i class="fas fa-fw fa-coins me-1" /> Tracking
<span :class="{'ms-auto': true, 'text-danger': trackingSum < 0}">
{{ formatNumber(trackingSum) }}
</span>
</div>
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ps-3 small">
<li>
<router-link
v-for="acc in trackingAccounts"
:key="acc.id"
class="d-flex align-items-center text-white text-decoration-none"
:to="{ name: 'account-transactions', params: { accountId: acc.id }}"
>
{{ acc.name }}
<span :class="{'ms-auto': true, 'text-danger': acc.balance < 0}">
{{ formatNumber(acc.balance) }}
</span>
</router-link>
</li>
</ul>
</li>
</ul> </ul>
<button <button
class="btn btn-sm w-100" class="btn btn-sm w-100"
@ -169,10 +131,14 @@
/* eslint-disable sort-imports */ /* eslint-disable sort-imports */
import { Modal } from 'bootstrap' import { Modal } from 'bootstrap'
import accList from './accountsSidebarAccList.vue'
import { formatNumber } from '../helpers' import { formatNumber } from '../helpers'
import { unallocatedMoneyAcc } from '../constants' import { unallocatedMoneyAcc } from '../constants'
export default { export default {
components: { accList },
computed: { computed: {
budgetAccounts() { budgetAccounts() {
const accs = (this.accounts || []).filter(acc => acc.type === 'budget') const accs = (this.accounts || []).filter(acc => acc.type === 'budget')

View file

@ -0,0 +1,55 @@
<template>
<li class="mb-1 fw-semibold">
<div class="d-flex align-items-center">
<i class="fas fa-fw fa-credit-card me-1" /> {{ header }}
<span :class="{'ms-auto': true, 'text-danger': sum < 0}">
{{ formatNumber(sum) }}
</span>
</div>
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ps-3 small">
<li>
<router-link
v-for="acc in accounts"
:key="acc.id"
class="d-flex align-items-center text-white text-decoration-none"
:to="{ name: 'account-transactions', params: { accountId: acc.id }}"
>
{{ acc.name }}
<span :class="{'ms-auto': true, 'text-danger': acc.balance < 0}">
{{ formatNumber(acc.balance) }}
</span>
</router-link>
</li>
</ul>
</li>
</template>
<script>
import { formatNumber } from '../helpers'
export default {
computed: {
sum() {
return this.accounts.reduce((sum, acc) => sum + acc.balance, 0)
},
},
methods: {
formatNumber,
},
name: 'AccountingAppAccountSidebarAccountList',
props: {
accounts: {
required: true,
type: Array,
},
header: {
required: true,
type: String,
},
},
}
</script>