add more page skeleton

This commit is contained in:
MaysWind
2020-11-06 00:54:56 +08:00
parent 73b94aa42a
commit c83931fda9
10 changed files with 107 additions and 15 deletions
+9 -9
View File
@@ -1,19 +1,19 @@
<template>
<f7-page name="home">
<f7-page>
<f7-navbar>
<f7-nav-title :title="$t('global.app.title')"></f7-nav-title>
</f7-navbar>
<f7-list media-list class="skeleton-text">
<f7-list-item title="Placehodler"></f7-list-item>
<f7-list-item title="Placeholder"></f7-list-item>
</f7-list>
<f7-toolbar tabbar bottom>
<f7-link href="/details" class="lab-toolbar-link-with-icon" icon-f7="square_list" icon-size="24px" :text="$t('Details')"></f7-link>
<f7-link href="/accounts" class="lab-toolbar-link-with-icon" icon-f7="creditcard" icon-size="24px" :text="$t('Accounts')"></f7-link>
<f7-link href="/new" class="lab-toolbar-icon-only" icon-f7="plus_square" icon-size="36px"></f7-link>
<f7-link href="/statistics" class="lab-toolbar-link-with-icon" icon-f7="chart_pie" icon-size="24px" :text="$t('Statistics')"></f7-link>
<f7-link href="/settings" class="lab-toolbar-link-with-icon" icon-f7="gear_alt" icon-size="24px" :text="$t('Settings')"></f7-link>
<f7-toolbar tabbar labels bottom>
<f7-link href="/transaction/details" class="lab-toolbar-link-with-icon" icon-f7="square_list" :text="$t('Details')"></f7-link>
<f7-link href="/account/list" class="lab-toolbar-link-with-icon" icon-f7="creditcard" :text="$t('Accounts')"></f7-link>
<f7-link href="/transaction/new" class="lab-toolbar-icon-only" icon-f7="plus_square" icon-size="42px"></f7-link>
<f7-link href="/statistic/overview" class="lab-toolbar-link-with-icon" icon-f7="chart_pie" :text="$t('Statistics')"></f7-link>
<f7-link href="/settings" class="lab-toolbar-link-with-icon" icon-f7="gear_alt" :text="$t('Settings')"></f7-link>
</f7-toolbar>
</f7-page>
</template>
@@ -30,7 +30,7 @@ export default {}
}
.lab-toolbar-icon-only i {
margin-top: 8px;
margin-top: 7px;
margin-left: 0;
}
</style>
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<f7-page name="settings">
<f7-page>
<f7-navbar :title="$t('Settings')" :back-link="$t('Back')"></f7-navbar>
<f7-block-title>{{ userNickName }}</f7-block-title>
<f7-list>
@@ -0,0 +1,9 @@
<template>
<f7-page>
<f7-navbar :title="$t('Account List')" :back-link="$t('Back')"></f7-navbar>
<f7-list media-list class="skeleton-text">
<f7-list-item title="Placeholder"></f7-list-item>
</f7-list>
</f7-page>
</template>
-5
View File
@@ -1,5 +0,0 @@
<template>
<f7-block>
<p>home</p>
</f7-block>
</template>
+9
View File
@@ -0,0 +1,9 @@
<template>
<f7-page>
<f7-navbar :title="$t('Statistics')" :back-link="$t('Back')"></f7-navbar>
<f7-list media-list class="skeleton-text">
<f7-list-item title="Placeholder"></f7-list-item>
</f7-list>
</f7-page>
</template>
+9
View File
@@ -0,0 +1,9 @@
<template>
<f7-page>
<f7-navbar :title="$t('Transaction Details')" :back-link="$t('Back')"></f7-navbar>
<f7-list media-list class="skeleton-text">
<f7-list-item title="Placeholder"></f7-list-item>
</f7-list>
</f7-page>
</template>
+31
View File
@@ -0,0 +1,31 @@
<template>
<f7-page>
<f7-navbar :title="$t('New Transaction')" :back-link="$t('Back')">
<f7-subnavbar>
<f7-segmented raised>
<f7-button tab-link="#expense" :text="$t('Expense')" tab-link-active></f7-button>
<f7-button tab-link="#income" :text="$t('Income')"></f7-button>
<f7-button tab-link="#transfer" :text="$t('Transfer')"></f7-button>
</f7-segmented>
</f7-subnavbar>
</f7-navbar>
<f7-tabs>
<f7-tab id="expense" tab-active class="page-content">
<f7-list media-list class="skeleton-text">
<f7-list-item title="Placeholder"></f7-list-item>
</f7-list>
</f7-tab>
<f7-tab id="income" class="page-content">
<f7-list media-list class="skeleton-text">
<f7-list-item title="Placeholder"></f7-list-item>
</f7-list>
</f7-tab>
<f7-tab id="transfer" class="page-content">
<f7-list media-list class="skeleton-text">
<f7-list-item title="Placeholder"></f7-list-item>
</f7-list>
</f7-tab>
</f7-tabs>
</f7-page>
</template>