From 7c47b3253ef80af2f07ae31754409c0795938528 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 7 Mar 2021 21:56:23 +0800
Subject: [PATCH] modify skeleton style

---
 src/views/mobile/transactions/List.vue | 127 +++++++++++++++++++++++++
 1 file changed, 127 insertions(+)

diff --git a/src/views/mobile/transactions/List.vue b/src/views/mobile/transactions/List.vue
index a26fd024..cdeb5d4d 100644
--- a/src/views/mobile/transactions/List.vue
+++ b/src/views/mobile/transactions/List.vue
@@ -39,6 +39,133 @@
             </f7-link>
         </f7-toolbar>
 
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-header>
+                <div class="full-line">
+                    <small class="card-header-content">YYYY-MM</small>
+                    <small class="transaction-amount-statistics">
+                        <span>0.00 USD</span>
+                        <span>0.00 USD</span>
+                    </small>
+                    <f7-icon class="card-chevron-icon float-right" f7="chevron_up"></f7-icon>
+                </div>
+            </f7-card-header>
+            <f7-card-content class="no-safe-areas" :padding="false">
+                <f7-list media-list>
+                    <f7-list-item class="transaction-info" link="#" chevron-center>
+                        <div slot="media" class="display-flex no-padding-horizontal">
+                            <div class="display-flex flex-direction-column transaction-date">
+                                <span class="transaction-day full-line flex-direction-column">DD</span>
+                                <span class="transaction-day-of-week full-line flex-direction-column">Sun</span>
+                            </div>
+                            <div class="transaction-icon display-flex align-items-center">
+                                <f7-icon slot="media" f7="app_fill"></f7-icon>
+                            </div>
+                        </div>
+                        <div slot="title" class="no-padding">
+                            <span>Category</span>
+                        </div>
+                        <div slot="footer" class="no-padding-horizontal transaction-footer">
+                            <span>HH:mm</span>
+                            <span>·</span>
+                            <span>Source Account</span>
+                        </div>
+                        <div slot="after" class="no-padding transaction-amount">
+                            <span>0.00 USD</span>
+                        </div>
+                    </f7-list-item>
+                    <f7-list-item class="transaction-info" link="#" chevron-center>
+                        <div slot="media" class="display-flex no-padding-horizontal">
+                            <div class="display-flex flex-direction-column transaction-date">
+                                <span class="transaction-day full-line flex-direction-column">DD</span>
+                                <span class="transaction-day-of-week full-line flex-direction-column">Sun</span>
+                            </div>
+                            <div class="transaction-icon display-flex align-items-center">
+                                <f7-icon slot="media" f7="app_fill"></f7-icon>
+                            </div>
+                        </div>
+                        <div slot="title" class="no-padding">
+                            <span>Category 2</span>
+                        </div>
+                        <div slot="footer" class="no-padding-horizontal transaction-footer">
+                            <span>HH:mm</span>
+                            <span>·</span>
+                            <span>Source Account</span>
+                        </div>
+                        <div slot="after" class="no-padding transaction-amount">
+                            <span>0.00 USD</span>
+                        </div>
+                    </f7-list-item>
+                    <f7-list-item class="transaction-info" link="#" chevron-center>
+                        <div slot="media" class="display-flex no-padding-horizontal">
+                            <div class="display-flex flex-direction-column transaction-date">
+                                <span class="transaction-day full-line flex-direction-column">DD</span>
+                                <span class="transaction-day-of-week full-line flex-direction-column">Sun</span>
+                            </div>
+                            <div class="transaction-icon display-flex align-items-center">
+                                <f7-icon slot="media" f7="app_fill"></f7-icon>
+                            </div>
+                        </div>
+                        <div slot="title" class="no-padding">
+                            <span>Category 3</span>
+                        </div>
+                        <div slot="footer" class="no-padding-horizontal transaction-footer">
+                            <span>HH:mm</span>
+                            <span>·</span>
+                            <span>Source Account</span>
+                        </div>
+                        <div slot="after" class="no-padding transaction-amount">
+                            <span>0.00 USD</span>
+                        </div>
+                    </f7-list-item>
+                    <f7-list-item class="transaction-info" link="#" chevron-center>
+                        <div slot="media" class="display-flex no-padding-horizontal">
+                            <div class="display-flex flex-direction-column transaction-date">
+                                <span class="transaction-day full-line flex-direction-column">DD</span>
+                                <span class="transaction-day-of-week full-line flex-direction-column">Sun</span>
+                            </div>
+                            <div class="transaction-icon display-flex align-items-center">
+                                <f7-icon slot="media" f7="app_fill"></f7-icon>
+                            </div>
+                        </div>
+                        <div slot="title" class="no-padding">
+                            <span>Category 4</span>
+                        </div>
+                        <div slot="footer" class="no-padding-horizontal transaction-footer">
+                            <span>HH:mm</span>
+                            <span>·</span>
+                            <span>Source Account</span>
+                        </div>
+                        <div slot="after" class="no-padding transaction-amount">
+                            <span>0.00 USD</span>
+                        </div>
+                    </f7-list-item>
+                    <f7-list-item class="transaction-info" link="#" chevron-center>
+                        <div slot="media" class="display-flex no-padding-horizontal">
+                            <div class="display-flex flex-direction-column transaction-date">
+                                <span class="transaction-day full-line flex-direction-column">DD</span>
+                                <span class="transaction-day-of-week full-line flex-direction-column">Sun</span>
+                            </div>
+                            <div class="transaction-icon display-flex align-items-center">
+                                <f7-icon slot="media" f7="app_fill"></f7-icon>
+                            </div>
+                        </div>
+                        <div slot="title" class="no-padding">
+                            <span>Category 5</span>
+                        </div>
+                        <div slot="footer" class="no-padding-horizontal transaction-footer">
+                            <span>HH:mm</span>
+                            <span>·</span>
+                            <span>Source Account</span>
+                        </div>
+                        <div slot="after" class="no-padding transaction-amount">
+                            <span>0.00 USD</span>
+                        </div>
+                    </f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
                 <div class="full-line">