✨ (header) back button if app installed

package-lock.json

@@ -1021,15 +1021,6 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
-    "@pwabuilder/pwainstall": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/@pwabuilder/pwainstall/-/pwainstall-0.9.4.tgz",
-      "integrity": "sha512-yJLS4AVMmmvENLlqnaB3d4s+j7MD0k9cmWr9kJuXCBer6b2yVLfDqUlyZjYijJNPxKd6tbbeN9JrecZ8WxKsbg==",
-      "requires": {
-        "infinite-carousel-wc": "^0.4.1",
-        "lit-element": "^2.2.1"
-      }
-    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -7515,11 +7506,6 @@
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
       "dev": true
     },
-    "infinite-carousel-wc": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/infinite-carousel-wc/-/infinite-carousel-wc-0.4.1.tgz",
-      "integrity": "sha512-d0U/zdPXZxMzIFEtMHlQ4iGGwe3BchOi4y5RC3ZMjVW7oXdSOdE0CChTtEBcnjgHvovQXcld31kTFMsMv3emcQ=="
-    },
     "infinity-x": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/infinity-x/-/infinity-x-1.0.2.tgz",
@@ -9499,19 +9485,6 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
-    "lit-element": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.2.1.tgz",
-      "integrity": "sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==",
-      "requires": {
-        "lit-html": "^1.0.0"
-      }
-    },
-    "lit-html": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.1.2.tgz",
-      "integrity": "sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA=="
-    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",

package.json

@@ -12,7 +12,6 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.7",
-    "@pwabuilder/pwainstall": "^0.9.4",
     "@xkeshi/vue-qrcode": "^1.0.0",
     "axios": "^0.19.0",
     "bulma": "^0.7.5",

src/App.vue

@@ -20,6 +20,17 @@
             </div>
           </online-view>
         </router-link>
+        <app-installed class="navbar-item">
+          <template v-slot:app-installed>
+            <a href="#" @click="back">
+              <img
+                class="back-icon"
+                src="./assets/icons/baseline_arrow_back_white_48dp.png"
+                alt="back"
+              />
+            </a>
+          </template>
+        </app-installed>
         <span class="vaquant-title" :class="{ visible: shadow }">{{
           title
         }}</span>
@@ -73,13 +84,15 @@ import { Action, Getter } from 'vuex-class'
 import IUser from '@/models/IUser'
 import { COFFEE_LINK } from '@/utils/constants'
 import OnlineView from '@/components/OnlineView.vue'
+import AppInstalled from '@/components/AppInstalled.vue'
 
 @Component({
   directives: {
     ClickOutside
   },
   components: {
-    'online-view': OnlineView
+    'online-view': OnlineView,
+    'app-installed': AppInstalled
   }
 })
 export default class App extends Vue {
@@ -114,6 +127,10 @@ export default class App extends Vue {
   public hideMenu(): void {
     this.menuOpen = false
   }
+
+  public back(): void {
+    window.history.back()
+  }
 }
 </script>
 

src/components/AppInstalled.vue

@@ -0,0 +1,21 @@
+<template>
+  <span>
+    <slot v-if="isInstalled" name="app-installed"></slot>
+    <slot v-else name="app-not-installed"></slot>
+  </span>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class AppInstalled extends Vue {
+  private isInstalled: boolean = false
+
+  private mounted() {
+    this.isInstalled =
+      window.matchMedia &&
+      window.matchMedia('(display-mode: standalone)').matches
+  }
+}
+</script>

src/styles/index.scss

@@ -81,6 +81,10 @@ img {
   width: 50px;
 }
 
+.back-icon {
+  vertical-align: middle;
+}
+
 .breadcrumb {
   font-size: 16pt;
   text-align: center;

src/views/accounts/AccountItem.vue

@@ -476,7 +476,6 @@ export default class AccountItem extends BaseAccount {
     color: var(--primary-font-color);
   }
   .account-title {
-    margin: 10px 0;
     span,
     a {
       padding: 0 10px;