mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-19 17:24:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

optimize display style when text is too long

Browse Source
This commit is contained in:
MaysWind
2021-03-14 21:47:43 +08:00
parent ca32c7b5de
commit 1de2cfa06d
9 changed files with 94 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/transactions/List.vue
+20 -9
View File
@@ -62,7 +62,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -84,7 +84,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 2</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -106,7 +106,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 3</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -128,7 +128,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 4</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -150,7 +150,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 5</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -189,7 +189,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -211,7 +211,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 2</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -233,7 +233,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 3</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -305,7 +305,7 @@
</f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span v-if="transaction.type === $constants.transaction.allTransactionTypes.ModifyBalance">
{{ $t('Modify Balance') }}
</span>
@@ -989,12 +989,18 @@ export default {
.transaction-amount {
color: var(--f7-list-item-after-text-color);
overflow: hidden;
text-overflow: ellipsis;
}
.transaction-info .item-inner:after {
background-color: transparent;
}
.transaction-info .item-after {
max-width: 70%;
}
.transaction-info .transaction-icon:after {
content: '';
position: absolute;
@@ -1010,6 +1016,11 @@ export default {
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
.transaction-category-name {
overflow: hidden;
text-overflow: ellipsis;
}
.date-popover-menu .popover-inner, .category-popover-menu .popover-inner, .account-popover-menu .popover-inner {
max-height: 400px;
overflow-Y: auto;