From 8de862c82f573baa1945dec34e845147962fc6fb Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 6 Jun 2023 00:52:35 +0800
Subject: [PATCH] optimize the style when the text is too long

---
 src/views/mobile/HomePage.vue              | 40 +++++++++++++++++-----
 src/views/mobile/transactions/ListPage.vue |  5 +++
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/views/mobile/HomePage.vue b/src/views/mobile/HomePage.vue
index 9727d504..c8a3df36 100644
--- a/src/views/mobile/HomePage.vue
+++ b/src/views/mobile/HomePage.vue
@@ -35,7 +35,7 @@
             </f7-card-header>
         </f7-card>
 
-        <f7-list strong inset dividers class="margin-top" :class="{ 'skeleton-text': loading }">
+        <f7-list strong inset dividers class="margin-top overview-transaction-list" :class="{ 'skeleton-text': loading }">
             <f7-list-item :link="'/transaction/list?dateType=' + $constants.datetime.allDateRanges.Today.type" chevron-center>
                 <template #media>
                     <f7-icon f7="calendar_today"></f7-icon>
@@ -53,7 +53,7 @@
                     </div>
                 </template>
                 <template #after>
-                    <div>
+                    <div class="overview-transaction-amount">
                         <div class="text-color-red text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ transactionOverview.today.incomeAmount }}</small>
@@ -86,7 +86,7 @@
                     </div>
                 </template>
                 <template #after>
-                    <div>
+                    <div class="overview-transaction-amount">
                         <div class="text-color-red text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ transactionOverview.thisWeek.incomeAmount }}</small>
@@ -119,7 +119,7 @@
                     </div>
                 </template>
                 <template #after>
-                    <div>
+                    <div class="overview-transaction-amount">
                         <div class="text-color-red text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ transactionOverview.thisMonth.incomeAmount }}</small>
@@ -149,7 +149,7 @@
                     </div>
                 </template>
                 <template #after>
-                    <div>
+                    <div class="overview-transaction-amount">
                         <div class="text-color-red text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ transactionOverview.thisYear.incomeAmount }}</small>
@@ -400,15 +400,37 @@ export default {
     opacity: 0.6;
 }
 
-.overview-transaction-footer {
-    padding-top: 6px;
-    font-size: 13px;
+.overview-transaction-list .item-title > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.overview-transaction-footer > span {
+.overview-transaction-list .item-after {
+    max-width: 100%;
+}
+
+.overview-transaction-list .overview-transaction-footer {
+    padding-top: 6px;
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.overview-transaction-list .overview-transaction-footer > span {
     margin-right: 4px;
 }
 
+.overview-transaction-list .overview-transaction-amount {
+    max-width: 100%;
+}
+
+.overview-transaction-list .overview-transaction-amount > div {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .tabbar.main-tabbar .link i + span.tabbar-label {
     margin-top: 2px;
 }
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index 9c2d27d3..09cb0026 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -857,6 +857,11 @@ export default {
 .list.transaction-info-list li.transaction-info .actual-item-inner {
     width: 100%;
     margin-left: 10px;
+    overflow: hidden;
+}
+
+.list.transaction-info-list li.transaction-info .actual-item-inner .item-after {
+    max-width: 100%;
 }
 
 .list.transaction-info-list li.transaction-info .transaction-date {