mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 15:37:33 +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/statistics/Transaction.vue
+12 -5
View File
@@ -57,7 +57,7 @@
{{ query.chartDataType | totalAmountName(allChartDataTypes) | localized }}
</text>
<text class="statistics-pie-chart-total-amount-value" v-if="statisticsData.items && statisticsData.items.length">
{{ statisticsData.totalAmount | currency(defaultCurrency) }}
{{ statisticsData.totalAmount | currency(defaultCurrency) | textLimit(16) }}
</text>
<text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!statisticsData.items || !statisticsData.items.length">
{{ $t('No data') }}
@@ -76,7 +76,7 @@
</div>
</div>
<div slot="title">
<div slot="title" class="statistics-list-item-text">
<span>Category Name 1</span>
<small class="statistics-percent">33.33</small>
</div>
@@ -98,7 +98,7 @@
</div>
</div>
<div slot="title">
<div slot="title" class="statistics-list-item-text">
<span>Category Name 2</span>
<small class="statistics-percent">33.33</small>
</div>
@@ -120,7 +120,7 @@
</div>
</div>
<div slot="title">
<div slot="title" class="statistics-list-item-text">
<span>Category Name 3</span>
<small class="statistics-percent">33.33</small>
</div>
@@ -166,7 +166,7 @@
</div>
</div>
<div slot="title">
<div slot="title" class="statistics-list-item-text">
<span>{{ item.name }}</span>
<small class="statistics-percent" v-if="item.percent >= 0">{{ item.percent | percent(2, '&lt;0.01') }}</small>
</div>
@@ -906,6 +906,13 @@ export default {
.statistics-list-item-overview-amount {
margin-top: 2px;
font-size: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
}
.statistics-list-item-text {
overflow: hidden;
text-overflow: ellipsis;
}
.statistics-list-item .item-content {
src/views/mobile/tags/List.vue
+11 -4
View File
@@ -17,7 +17,7 @@
<f7-block slot="title" class="no-padding">
<div class="display-flex">
<f7-icon slot="media" f7="number"></f7-icon>
<div class="list-item-valign-middle padding-left-half">Tag Name</div>
<div class="transaction-tag-list-item-content list-item-valign-middle padding-left-half">Tag Name</div>
</div>
</f7-block>
</f7-list-item>
@@ -25,7 +25,7 @@
<f7-block slot="title" class="no-padding">
<div class="display-flex">
<f7-icon slot="media" f7="number"></f7-icon>
<div class="list-item-valign-middle padding-left-half">Tag Name 2</div>
<div class="transaction-tag-list-item-content list-item-valign-middle padding-left-half">Tag Name 2</div>
</div>
</f7-block>
</f7-list-item>
@@ -33,7 +33,7 @@
<f7-block slot="title" class="no-padding">
<div class="display-flex">
<f7-icon slot="media" f7="number"></f7-icon>
<div class="list-item-valign-middle padding-left-half">Tag Name 3</div>
<div class="transaction-tag-list-item-content list-item-valign-middle padding-left-half">Tag Name 3</div>
</div>
</f7-block>
</f7-list-item>
@@ -61,7 +61,7 @@
</f7-badge>
</f7-icon>
<div class="list-item-valign-middle padding-left-half"
<div class="transaction-tag-list-item-content list-item-valign-middle padding-left-half"
v-if="editingTag.id !== tag.id">
{{ tag.name }}
</div>
@@ -410,3 +410,10 @@ export default {
}
}
</script>
<style>
.transaction-tag-list-item-content {
overflow: hidden;
text-overflow: ellipsis;
}
</style>
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;