adjust skeleton style

This commit is contained in:
MaysWind
2020-12-20 18:22:58 +08:00
parent 7f26e3b43c
commit 831af3e053
3 changed files with 67 additions and 15 deletions
+9 -4
View File
@@ -60,10 +60,15 @@
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-input inline-label label="Account Name" placeholder="Your account name"></f7-list-input>
<f7-list-item title="Account Icon" after="Icon"></f7-list-item>
<f7-list-item title="Account Color" after="Color"></f7-list-item>
<f7-list-item title="Currency" after="Currency"></f7-list-item>
<f7-list-item title="Account Balance" after="Balance"></f7-list-item>
<f7-list-item title="Account Icon" link="#">
<f7-icon f7="app_fill"></f7-icon>
</f7-list-item>
<f7-list-item title="Account Color" link="#">
<f7-icon f7="app_fill"></f7-icon>
</f7-list-item>
<f7-list-item title="Currency" after="Currency" link="#"></f7-list-item>
<f7-list-item title="Account Balance" after="Balance" link="#"></f7-list-item>
<f7-list-item title="Visible" after="Visible"></f7-list-item>
<f7-list-input type="textarea" placeholder="Your account description (optional)"></f7-list-input>
</f7-list>
</f7-card-content>
+49 -8
View File
@@ -33,30 +33,71 @@
</f7-card>
<f7-card class="skeleton-text" v-if="loading">
<f7-card-header>Account Category</f7-card-header>
<f7-card-header>
<small style="opacity: 0.6;">Account Category</small>
</f7-card-header>
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
<f7-block slot="title" class="no-padding">
<div class="display-flex padding-top-half padding-bottom-half">
<f7-icon slot="media" f7="app_fill"></f7-icon>
<div class="nested-list-item-title">Account Name</div>
</div>
</f7-block>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
<f7-card class="skeleton-text" v-if="loading">
<f7-card-header>Account Category 2</f7-card-header>
<f7-card-header>
<small style="opacity: 0.6;">Account Category 2</small>
</f7-card-header>
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
<f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
<f7-block slot="title" class="no-padding">
<div class="display-flex padding-top-half padding-bottom-half">
<f7-icon slot="media" f7="app_fill"></f7-icon>
<div class="nested-list-item-title">Account Name</div>
</div>
</f7-block>
</f7-list-item>
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
<f7-block slot="title" class="no-padding">
<div class="display-flex padding-top-half padding-bottom-half">
<f7-icon slot="media" f7="app_fill"></f7-icon>
<div class="nested-list-item-title">Account Name 2</div>
</div>
</f7-block>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
<f7-card class="skeleton-text" v-if="loading">
<f7-card-header>Account Category 3</f7-card-header>
<f7-card-header>
<small style="opacity: 0.6;">Account Category 3</small>
</f7-card-header>
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
<f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
<f7-block slot="title" class="no-padding">
<div class="display-flex padding-top-half padding-bottom-half">
<f7-icon slot="media" f7="app_fill"></f7-icon>
<div class="nested-list-item-title">Account Name</div>
</div>
</f7-block>
</f7-list-item>
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
<f7-block slot="title" class="no-padding">
<div class="display-flex padding-top-half padding-bottom-half">
<f7-icon slot="media" f7="app_fill"></f7-icon>
<div class="nested-list-item-title">Account Name 2</div>
</div>
</f7-block>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
+9 -3
View File
@@ -13,9 +13,15 @@
<f7-card class="skeleton-text" v-if="loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-item title="Category Name"></f7-list-item>
<f7-list-item title="Category Name 2"></f7-list-item>
<f7-list-item title="Category Name 3"></f7-list-item>
<f7-list-item title="Category Name">
<f7-icon slot="media" f7="app_fill"></f7-icon>
</f7-list-item>
<f7-list-item title="Category Name 2">
<f7-icon slot="media" f7="app_fill"></f7-icon>
</f7-list-item>
<f7-list-item title="Category Name 3">
<f7-icon slot="media" f7="app_fill"></f7-icon>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>