add more page skeleton

src/locales/en.js

@@ -113,6 +113,12 @@ export default {
     'Use a backup code': 'Use a backup code',
     'Use a passcode': 'Use a passcode',
     'Sign Up': 'Sign Up',
+    'Transaction Details': 'Transaction Details',
+    'Account List': 'Account List',
+    'New Transaction': 'New Transaction',
+    'Expense': 'Expense',
+    'Income': 'Income',
+    'Transfer': 'Transfer',
     'User Profile': 'User Profile',
     'Language': 'Language',
     'Enable Animate': 'Enable Animate',

src/locales/zh_Hans.js

@@ -113,6 +113,12 @@ export default {
     'Use a backup code': '使用备用码',
     'Use a passcode': '使用验证码',
     'Sign Up': '注册',
+    'Transaction Details': '交易详情',
+    'Account List': '账户列表',
+    'New Transaction': '新交易',
+    'Expense': '支出',
+    'Income': '收入',
+    'Transfer': '转账',
     'User Profile': '用户信息',
     'Language': '语言',
     'Enable Animate': '启用动画',

src/router/mobile.js

@@ -4,6 +4,13 @@ import HomePage from '../views/mobile/Home.vue';
 import LoginPage from '../views/mobile/Login.vue';
 import SignUpPage from '../views/mobile/Signup.vue';
 
+import TransactionDetailPage from '../views/mobile/transactions/Detail.vue'
+import TransactionNewPage from '../views/mobile/transactions/New.vue'
+
+import AccountListPage from '../views/mobile/accounts/AccountList.vue'
+
+import StatisticsOverviewPage from '../views/mobile/statistics/Overview.vue'
+
 import SettingsPage from '../views/mobile/Settings.vue';
 import AboutPage from "../views/mobile/About.vue";
 import UserProfilePage from "../views/mobile/users/UserProfile.vue";
@@ -50,6 +57,26 @@ const routes = [
         component: SignUpPage,
         beforeEnter: checkNotLogin
     },
+    {
+        path: '/transaction/details',
+        component: TransactionDetailPage,
+        beforeEnter: checkLogin
+    },
+    {
+        path: '/transaction/new',
+        component: TransactionNewPage,
+        beforeEnter: checkLogin
+    },
+    {
+        path: '/account/list',
+        component: AccountListPage,
+        beforeEnter: checkLogin
+    },
+    {
+        path: '/statistic/overview',
+        component: StatisticsOverviewPage,
+        beforeEnter: checkLogin
+    },
     {
         path: '/settings',
         component: SettingsPage,

src/views/mobile/Home.vue

@@ -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-toolbar tabbar labels 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="/transaction/details" class="lab-toolbar-link-with-icon" icon-f7="square_list" :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="/account/list" class="lab-toolbar-link-with-icon" icon-f7="creditcard" :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="/transaction/new" class="lab-toolbar-icon-only" icon-f7="plus_square" icon-size="42px"></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="/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" icon-size="24px" :text="$t('Settings')"></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>

src/views/mobile/Settings.vue

@@ -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>

src/views/mobile/accounts/AccountList.vue

@@ -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>

src/views/mobile/main/Home.vue

@@ -1,5 +0,0 @@
-<template>
-    <f7-block>
-        <p>home</p>
-    </f7-block>
-</template>

src/views/mobile/statistics/Overview.vue

@@ -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>

src/views/mobile/transactions/Detail.vue

@@ -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>

src/views/mobile/transactions/New.vue

@@ -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>