add about page

src/Mobile.vue

@@ -31,4 +31,8 @@ body {
     -moz-user-select: none;
     user-select: none;
 }
+
+.work-break-all {
+    word-break: break-all;
+}
 </style>

src/locales/en.js

@@ -61,8 +61,10 @@ export default {
     },
     'OK': 'OK',
     'Cancel': 'Cancel',
+    'Close': 'Close',
     'Update': 'Update',
     'Done': 'Done',
+    'Version': 'Version',
     'User': 'User',
     'Application': 'Application',
     'Home': 'Home',
@@ -123,4 +125,7 @@ export default {
     'Log Out': 'Log Out',
     'Are you sure you want to log out?': 'Are you sure you want to log out?',
     'Unable to logout': 'Unable to logout',
+    'About': 'About',
+    'Official Website': 'Official Website',
+    'License': 'License',
 };

src/locales/zh_Hans.js

@@ -61,8 +61,10 @@ export default {
     },
     'OK': '确定',
     'Cancel': '取消',
+    'Close': '关闭',
     'Update': '更新',
     'Done': '完成',
+    'Version': '版本',
     'User': '用户',
     'Application': '应用',
     'Home': '首页',
@@ -123,4 +125,7 @@ export default {
     'Log Out': '退出登录',
     'Are you sure you want to log out?': '您确定是否要退出登录？',
     'Unable to logout': '无法退出登录',
+    'About': '关于',
+    'Official Website': '官方网站',
+    'License': '许可协议',
 };

src/mobile-main.js

@@ -118,6 +118,9 @@ new Vue({
         window.addEventListener('popstate', () => {
             if (document.querySelectorAll('.modal-in').length > 0) {
                 app.dialog.close();
+                app.sheet.close();
+                app.popup.close();
+                return false;
             }
         }, false);
 
@@ -125,6 +128,9 @@ new Vue({
             if (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27 || event.which === 27) {
                 if (document.querySelectorAll('.modal-in').length > 0) {
                     app.dialog.close();
+                    app.sheet.close();
+                    app.popup.close();
+                    return false;
                 }
             }
         }, false);

src/router/mobile.js

@@ -6,6 +6,7 @@ import MainPageHomeTab from '../views/mobile/main/Home.vue';
 import LoginPage from '../views/mobile/Login.vue';
 import SignUpPage from '../views/mobile/Signup.vue';
 import SettingsPage from '../views/mobile/Settings.vue';
+import AboutPage from "../views/mobile/About.vue";
 import UserProfilePage from "../views/mobile/users/UserProfile.vue";
 import SessionListPage from "../views/mobile/users/SessionList.vue";
 
@@ -62,6 +63,11 @@ const routes = [
         component: SettingsPage,
         beforeEnter: checkLogin
     },
+    {
+        path: '/about',
+        component: AboutPage,
+        beforeEnter: checkLogin
+    },
     {
         path: '/user/profile',
         component: UserProfilePage,

src/views/mobile/About.vue

@@ -0,0 +1,128 @@
+<template>
+    <f7-page>
+        <f7-navbar :title="$t('About')" :back-link="$t('Back')"></f7-navbar>
+
+        <f7-list>
+            <f7-list-item :title="$t('Version')" :after="version"></f7-list-item>
+            <f7-list-item external :title="$t('Official Website')" after="https://github.com/mayswind/lab"
+                          link="https://github.com/mayswind/lab" target="_blank"></f7-list-item>
+            <f7-list-item :title="$t('License')" link="#" popup-open=".license-popup"></f7-list-item>
+        </f7-list>
+
+        <f7-popup class="license-popup" swipe-to-close>
+            <f7-page>
+                <f7-navbar :title="$t('License')">
+                    <f7-nav-right>
+                        <f7-link popup-close :text="$t('Close')"></f7-link>
+                    </f7-nav-right>
+                </f7-navbar>
+                <f7-block>
+                    <p><p>MIT License</p>
+                    <p></p>
+                    <p>Copyright (c) 2020 MaysWind (i@mayswind.net)</p>
+                    <p></p>
+                    <p>Permission is hereby granted, free of charge, to any person obtaining a copy
+                        of this software and associated documentation files (the "Software"), to deal
+                        in the Software without restriction, including without limitation the rights
+                        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+                        copies of the Software, and to permit persons to whom the Software is
+                        furnished to do so, subject to the following conditions:</p>
+                    <p></p>
+                    <p>The above copyright notice and this permission notice shall be included in all
+                        copies or substantial portions of the Software.</p>
+                    <p></p>
+                    <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+                        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+                        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+                        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+                        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+                        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+                        SOFTWARE.</p>
+                    <p></p>
+                    <hr/>
+                    <p>
+                        <span>lab also contains additional third party software.</span><br/>
+                        <span>All the third party software included or linked is redistributed under the terms and conditions of their original licenses.</span>
+                    </p>
+                    <p></p>
+                    <p>
+                        <strong>vue</strong><br/>
+                        <span>Copyright (c) 2013-present, Yuxi (Evan) You</span><br/>
+                        <span class="work-break-all">https://github.com/vuejs/vue</span><br/>
+                        <span class="work-break-all">License: https://github.com/vuejs/vue/blob/dev/LICENSE</span>
+                    </p>
+                    <p>
+                        <strong>vue-i18n</strong><br/>
+                        <span>Copyright (c) 2016 kazuya kawaguchi</span><br/>
+                        <span class="work-break-all">https://github.com/kazupon/vue-i18n</span><br/>
+                        <span class="work-break-all">License: https://github.com/kazupon/vue-i18n/blob/v8.x/LICENSE</span>
+                    </p>
+                    <p>
+                        <strong>vue-i18n-filter</strong><br/>
+                        <span>Copyright (c) 2018 +v</span><br/>
+                        <span class="work-break-all">https://github.com/chiaweilee/vue-i18n-filter</span><br/>
+                        <span class="work-break-all">License: https://github.com/chiaweilee/vue-i18n-filter/blob/master/LICENSE</span>
+                    </p>
+                    <p>
+                        <strong>vue-moment</strong><br/>
+                        <span>Copyright (c) 2017 Brock Petrie</span><br/>
+                        <span class="work-break-all">https://github.com/brockpetrie/vue-moment</span><br/>
+                        <span class="work-break-all">License: https://github.com/brockpetrie/vue-moment/blob/master/LICENSE</span>
+                    </p>
+                    <p>
+                        <strong>core-js</strong><br/>
+                        <span>Copyright (c) 2014-2020 Denis Pushkarev</span><br/>
+                        <span class="work-break-all">https://github.com/zloirock/core-js</span><br/>
+                        <span class="work-break-all">License: https://github.com/zloirock/core-js/blob/master/LICENSE</span>
+                    </p>
+                    <p>
+                        <strong>Framework7</strong><br/>
+                        <span>Copyright (c) 2014 Vladimir Kharlampidi</span><br/>
+                        <span class="work-break-all">https://framework7.io/</span><br/>
+                        <span class="work-break-all">License: https://github.com/framework7io/framework7/blob/master/LICENSE</span>
+                    </p>
+                    <p>
+                        <strong>Framework7-vue</strong><br/>
+                        <span>Copyright (c) 2014 Vladimir Kharlampidi</span><br/>
+                        <span class="work-break-all">https://framework7.io/vue/</span><br/>
+                        <span class="work-break-all">License: https://github.com/framework7io/framework7/blob/master/LICENSE</span>
+                    </p>
+                    <p>
+                        <strong>Framework7-icons</strong><br/>
+                        <span>Copyright (c) 2016 Vladimir Kharlampidi</span><br/>
+                        <span class="work-break-all">https://framework7.io/icons/</span><br/>
+                        <span class="work-break-all">License: https://github.com/framework7io/framework7-icons</span>
+                    </p>
+                    <p>
+                        <strong>axios</strong><br/>
+                        <span>Copyright (c) 2014-present Matt Zabriskie</span><br/>
+                        <span class="work-break-all">https://github.com/axios/axios</span><br/>
+                        <span class="work-break-all">License: https://github.com/axios/axios/blob/master/LICENSE</span>
+                    </p>
+                    <p>
+                        <strong>Moment.js</strong><br/>
+                        <span>Copyright (c) JS Foundation and other contributors</span><br/>
+                        <span class="work-break-all">https://momentjs.com</span><br/>
+                        <span class="work-break-all">License: https://github.com/moment/moment/blob/develop/LICENSE</span>
+                    </p>
+                    <p>
+                        <strong>js-cookie</strong><br/>
+                        <span>Copyright (c) 2018 Copyright 2018 Klaus Hartl, Fagner Brack, GitHub Contributors</span><br/>
+                        <span class="work-break-all">https://github.com/js-cookie/js-cookie</span><br/>
+                        <span class="work-break-all">License: https://github.com/js-cookie/js-cookie/blob/master/LICENSE</span>
+                    </p>
+                </f7-block>
+            </f7-page>
+        </f7-popup>
+    </f7-page>
+</template>
+
+<script>
+export default {
+    computed: {
+        version() {
+            return this.$version();
+        }
+    }
+}
+</script>

src/views/mobile/Settings.vue

@@ -19,6 +19,7 @@
                             :value="locale">{{ lang.displayName }}</option>
                 </select>
             </f7-list-item>
+            <f7-list-item :title="$t('About')" link="/about"></f7-list-item>
         </f7-list>
     </f7-page>
 </template>