IntenseFinance/firefly-iii
3
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-02-25 18:45:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improve boxes

Browse Source
This commit is contained in:
James Cole 2024-03-24 14:10:07 +01:00
parent 538933691e
commit 7186f0ef60
No known key found for this signature in database
GPG Key ID: B49A324B7EAD6D80
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/assets/v2/sass/app.scss
View File

@ -26,12 +26,23 @@ $danger: #CD5029 !default;
$primary: #1E6581 !default; $primary: #1E6581 !default;
$success: #64B624 !default; $success: #64B624 !default;
.hover-footer {
overflow-x:hidden;
width:100%;
text-align:right;
white-space: nowrap;
text-overflow: ellipsis
}
.hover-footer:hover {
overflow: auto;
text-overflow: unset;
white-space: normal;
}
h3.hover-expand { h3.hover-expand {
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis text-overflow: ellipsis
} }
h3.hover-expand:hover { h3.hover-expand:hover {
container: sidebar / inline-size;
overflow-x: scroll; overflow-x: scroll;
} }

24
resources/views/v2/partials/dashboard/boxes.blade.php
View File

@ -25,14 +25,14 @@
<i class="fa-solid fa-scale-balanced"></i> <i class="fa-solid fa-scale-balanced"></i>
</span> </span>
<span class="small-box-footer hover-footer"> <div class="small-box-footer hover-footer">
<template x-for="(subtitle, index) in balanceBox.subtitles" :key="index"> <template x-for="(subtitle, index) in balanceBox.subtitles" :key="index">
<span> <span>
<span x-text="subtitle"></span><span <span x-text="subtitle"></span><span
:class="{ 'invisible': (balanceBox.amounts.length == index+1) }"> &amp; </span> :class="{ 'invisible': (balanceBox.amounts.length == index+1) }"> &amp; </span>
</span> </span>
</template> </template>
</span> </div>
</div> </div>
<!--end::Small Box Widget 1--> <!--end::Small Box Widget 1-->
</div> </div>
@ -41,6 +41,10 @@
<!--begin::Small Box Widget 2--> <!--begin::Small Box Widget 2-->
<div class="small-box text-bg-success"> <div class="small-box text-bg-success">
<div class="inner"> <div class="inner">
<template x-if="0 === billBox.unpaid.length">
<h3>&nbsp;</h3>
</template>
<template x-if="billBox.unpaid.length > 0">
<h3 class="hover-expand"> <h3 class="hover-expand">
<template x-for="(amount, index) in billBox.unpaid" :key="index"> <template x-for="(amount, index) in billBox.unpaid" :key="index">
<span> <span>
@ -48,21 +52,31 @@
:class="{ 'invisible': (billBox.unpaid.length == index+1) }">, </span> :class="{ 'invisible': (billBox.unpaid.length == index+1) }">, </span>
</span> </span>
</template> </template>
<span x-text="billBox.unpaid.length"></span>
</h3> </h3>
</template>
<template x-if="loading"> <template x-if="loading">
<p> <p>
<em class="fa-solid fa-spinner fa-spin"></em> <em class="fa-solid fa-spinner fa-spin"></em>
</p> </p>
</template> </template>
<template x-if="!loading"> <template x-if="!loading && billBox.unpaid.length > 0">
<p><a href="{{ route('bills.index') }}">{{ __('firefly.bills_to_pay') }}</a></p> <p><a href="{{ route('bills.index') }}">{{ __('firefly.bills_to_pay') }}</a></p>
</template> </template>
<template x-if="0 === billBox.unpaid.length">
<p>No subscriptions are waiting to be paid</p>
</template>
</div> </div>
<span class="small-box-icon"> <span class="small-box-icon">
<em class="fa-regular fa-calendar"></em> <em class="fa-regular fa-calendar"></em>
</span> </span>
<span class="small-box-footer"> <span class="small-box-footer">
<template x-if="0 === billBox.paid.length">
<span>&nbsp;</span>
</template>
<template x-if="billBox.paid.length > 0">
<span>
{{ __('firefly.unpaid') }}:
{{ __('firefly.paid') }}: {{ __('firefly.paid') }}:
<template x-for="(amount, index) in billBox.paid" :key="index"> <template x-for="(amount, index) in billBox.paid" :key="index">
<span> <span>
@ -70,6 +84,8 @@
:class="{ 'invisible': (billBox.paid.length == index+1) }">, </span> :class="{ 'invisible': (billBox.paid.length == index+1) }">, </span>
</span> </span>
</template> </template>
</span>
</template>
</span> </span>
</div> </div>
<!--end::Small Box Widget 2--> <!--end::Small Box Widget 2-->