mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-17 16:24:25 +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/Edit.vue
+11 -7
View File
@@ -82,7 +82,7 @@
@click="showCategorySheet = true"
v-if="transaction.type === $constants.transaction.allTransactionTypes.Expense"
>
<div slot="title">
<div slot="title" class="transaction-edit-category-title">
<span>{{ transaction.expenseCategory | primaryCategoryName(allCategories[$constants.category.allCategoryTypes.Expense]) }}</span>
<f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
<span>{{ transaction.expenseCategory | secondaryCategoryName(allCategories[$constants.category.allCategoryTypes.Expense]) }}</span>
@@ -107,7 +107,7 @@
@click="showCategorySheet = true"
v-if="transaction.type === $constants.transaction.allTransactionTypes.Income"
>
<div slot="title">
<div slot="title" class="transaction-edit-category-title">
<span>{{ transaction.incomeCategory | primaryCategoryName(allCategories[$constants.category.allCategoryTypes.Income]) }}</span>
<f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
<span>{{ transaction.incomeCategory | secondaryCategoryName(allCategories[$constants.category.allCategoryTypes.Income]) }}</span>
@@ -132,7 +132,7 @@
@click="showCategorySheet = true"
v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
>
<div slot="title">
<div slot="title" class="transaction-edit-category-title">
<span>{{ transaction.transferCategory | primaryCategoryName(allCategories[$constants.category.allCategoryTypes.Transfer]) }}</span>
<f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
<span>{{ transaction.transferCategory | secondaryCategoryName(allCategories[$constants.category.allCategoryTypes.Transfer]) }}</span>
@@ -885,20 +885,24 @@ export default {
margin-bottom: 11px;
}
.transaction-edit-time input[type="datetime-local"] {
max-width: inherit;
}
.transaction-edit-category-title,
.transaction-edit-timezone-title {
overflow: hidden;
text-overflow: ellipsis;
}
.transaction-edit-time input[type="datetime-local"] {
max-width: inherit;
}
.transaction-edit-timezone-name {
padding-left: 4px;
}
.transaction-edit-tag {
margin-right: 4px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
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;