From 3d086992dc472a51822c0eaaa77736b84e7b1ef8 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 13 Aug 2023 22:52:31 +0800
Subject: [PATCH] modify style

---
 src/views/mobile/HomePage.vue            |  2 +-
 src/views/mobile/accounts/ListPage.vue   | 38 ++++++++++++++----------
 src/views/mobile/categories/ListPage.vue |  2 +-
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/views/mobile/HomePage.vue b/src/views/mobile/HomePage.vue
index f9d28d55..67d4b157 100644
--- a/src/views/mobile/HomePage.vue
+++ b/src/views/mobile/HomePage.vue
@@ -8,7 +8,7 @@
             <f7-card-header class="display-block" style="padding-top: 120px;">
                 <p class="no-margin">
                     <span class="card-header-content" v-if="loading">
-                        <span class="home-summary-month">MM</span>
+                        <span class="home-summary-month">Month</span>
                         <span>·</span>
                         <small>Expense</small>
                     </span>
diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue
index 4f0f79b1..749cd1d6 100644
--- a/src/views/mobile/accounts/ListPage.vue
+++ b/src/views/mobile/accounts/ListPage.vue
@@ -4,7 +4,7 @@
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t('Account List')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
-                <f7-link icon-f7="ellipsis" v-if="!sortable && allAccountCount" @click="showMoreActionSheet = true"></f7-link>
+                <f7-link icon-f7="ellipsis" :class="{ 'disabled': !allAccountCount }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link href="/account/add" icon-f7="plus" v-if="!sortable"></f7-link>
                 <f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
             </f7-nav-right>
@@ -38,21 +38,29 @@
             </f7-card-header>
         </f7-card>
 
-        <f7-list strong inset dividers class="account-list margin-vertical skeleton-text"
-                 :key="listIdx" v-for="listIdx in [ 1, 2, 3 ]" v-if="loading">
-            <f7-list-item group-title>
-                <small>Account Category</small>
-            </f7-list-item>
-            <f7-list-item class="nested-list-item" after="0.00 USD" link="#"
-                          :key="itemIdx" v-for="itemIdx in (listIdx === 1 ? [ 1 ] : [ 1, 2 ])">
-                <template #title>
-                    <div class="display-flex padding-top-half padding-bottom-half">
+        <div class="skeleton-text" :key="listIdx" v-for="listIdx in [ 1, 2, 3 ]" v-if="loading">
+            <f7-list strong inset dividers sortable class="list-has-group-title account-list margin-vertical">
+                <f7-list-item group-title :sortable="false">
+                    <small>
+                        <span>Account Category</span>
+                        <span style="margin-left: 10px">0.00 USD</span>
+                    </small>
+                </f7-list-item>
+                <f7-list-item class="nested-list-item" after="0.00 USD" link="#"
+                              :key="itemIdx" v-for="itemIdx in (listIdx === 1 ? [ 1 ] : [ 1, 2 ])">
+                    <template #media>
                         <f7-icon f7="app_fill"></f7-icon>
-                        <div class="nested-list-item-title">Account Name</div>
-                    </div>
-                </template>
-            </f7-list-item>
-        </f7-list>
+                    </template>
+                    <template #title>
+                        <div class="display-flex padding-top-half padding-bottom-half">
+                            <div class="nested-list-item-title">
+                                <span>Account Name</span>
+                            </div>
+                        </div>
+                    </template>
+                </f7-list-item>
+            </f7-list>
+        </div>
 
         <f7-list strong inset dividers class="margin-vertical" v-if="!loading && noAvailableAccount">
             <f7-list-item :title="$t('No available account')"></f7-list-item>
diff --git a/src/views/mobile/categories/ListPage.vue b/src/views/mobile/categories/ListPage.vue
index 1f75d4a0..6f5d0d1f 100644
--- a/src/views/mobile/categories/ListPage.vue
+++ b/src/views/mobile/categories/ListPage.vue
@@ -4,7 +4,7 @@
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t(title)"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
-                <f7-link icon-f7="ellipsis" v-if="!sortable && this.categories.length" @click="showMoreActionSheet = true"></f7-link>
+                <f7-link icon-f7="ellipsis" :class="{ 'disabled': !categories.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId" icon-f7="plus" v-if="!sortable"></f7-link>
                 <f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
             </f7-nav-right>