Add sort column to account overview. and some css fixes

This commit is contained in:
James Cole
2024-03-24 13:24:48 +01:00
parent 46c49ddbd8
commit 538933691e
5 changed files with 55 additions and 37 deletions

View File

@@ -26,8 +26,13 @@ $danger: #CD5029 !default;
$primary: #1E6581 !default;
$success: #64B624 !default;
.balance-box {
h3.hover-expand {
overflow-x: hidden;
text-overflow: ellipsis
}
h3.hover-expand:hover {
container: sidebar / inline-size;
overflow-x: scroll;
}
.form-control {

View File

@@ -78,7 +78,11 @@
<em x-show="sortingColumn === 'balance' && sortDirection === 'asc'" class="fa-solid fa-arrow-down-wide-short"></em>
<em x-show="sortingColumn === 'balance' && sortDirection === 'desc'" class="fa-solid fa-arrow-up-wide-short"></em>
</td>
<td>Last activity</td>
<td>
<a href="#" x-on:click.prevent="sort('last_activity')">Last activity</a>
<em x-show="sortingColumn === 'last_activity' && sortDirection === 'asc'" class="fa-solid fa-arrow-down-wide-short"></em>
<em x-show="sortingColumn === 'last_activity' && sortDirection === 'desc'" class="fa-solid fa-arrow-up-wide-short"></em>
</td>
<td>Balance difference</td>
<td>&nbsp;</td>
</tr>
@@ -126,7 +130,7 @@
<td>
<!-- IBAN and no account nr -->
<template x-if="'' === account.account_number && '' !== account.iban">
<span x-text="account.iban + 'A'"></span>
<span x-text="account.iban"></span>
</template>
<!-- no IBAN and account nr -->
<template x-if="'' !== account.account_number && '' === account.iban">

View File

@@ -1,10 +1,8 @@
<div class="row" x-data="boxes">
<!--begin::Col-->
<div class="row mb-2" x-data="boxes">
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
<!--begin::Small Box Widget 1-->
<div class="small-box text-bg-primary">
<div class="inner balance-box">
<h3>
<div class="inner balance-box">
<h3 class="hover-expand">
<template x-for="(amount, index) in balanceBox.amounts" :key="index">
<span>
<span x-text="amount"></span><span
@@ -27,7 +25,7 @@
<i class="fa-solid fa-scale-balanced"></i>
</span>
<span class="small-box-footer">
<span class="small-box-footer hover-footer">
<template x-for="(subtitle, index) in balanceBox.subtitles" :key="index">
<span>
<span x-text="subtitle"></span><span
@@ -39,11 +37,11 @@
<!--end::Small Box Widget 1-->
</div>
<!--end::Col-->
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12" style="flex-grow: 1;">
<!--begin::Small Box Widget 2-->
<div class="small-box text-bg-success">
<div class="inner">
<h3>
<h3 class="hover-expand">
<template x-for="(amount, index) in billBox.unpaid" :key="index">
<span>
<span x-text="amount"></span><span
@@ -77,11 +75,11 @@
<!--end::Small Box Widget 2-->
</div>
<!--end::Col-->
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12" style="flex-grow: 1;">
<!--begin::Small Box Widget 3-->
<div class="small-box text-bg-warning">
<div class="inner">
<h3>
<h3 class="hover-expand">
<template x-for="(amount, index) in leftBox.left" :key="index">
<span>
<span x-text="amount"></span><span
@@ -115,11 +113,11 @@
<!--end::Small Box Widget 3-->
</div>
<!--end::Col-->
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12" style="flex-grow: 1;">
<!--begin::Small Box Widget 4-->
<div class="small-box text-bg-danger">
<div class="inner">
<h3>
<h3 class="hover-expand">
<template x-for="(amount, index) in netBox.net" :key="index">
<span>
<span x-text="amount"></span><span