fix: pwa fixes recommended by lhci, closes #372

ambianic · May 20, 2020 · acbd2f3 · acbd2f3
1 parent 9394d98
commit acbd2f3
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 76 deletions.
diff --git a/public/img/icons/android-chrome-maskable-192x192.png b/public/img/icons/android-chrome-maskable-192x192.png
diff --git a/public/img/icons/android-chrome-maskable-512x512.png b/public/img/icons/android-chrome-maskable-512x512.png
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -4,10 +4,8 @@
         fluid
   >
     <v-app-bar
-      :clipped-left="$vuetify.breakpoint.lgAndUp"
       app
       color="blue darken-3"
-      dark
     >
       <v-toolbar-title
         style="width: 300px"
@@ -70,8 +68,9 @@
     <!-- drawer -->
     <v-navigation-drawer
       v-model="drawer"
-      :clipped="$vuetify.breakpoint.lgAndUp"
       app
+      mini-variant
+      expand-on-hover
     >
       <v-list dense>
         <template v-for="item in items">
@@ -161,7 +160,7 @@ export default {
   },
   data: () => ({
     dialog: false,
-    drawer: true,
+    drawer: null, // hide drawer on mobile and show on desktop
     on: true,
     newFavorites: 0,
     newAlerts: 2,

diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
@@ -13,9 +13,15 @@ if (process.env.NODE_ENV === 'production') {
         'For more details, visit https://goo.gl/AFskqB'
       )
     },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
     cached () {
       console.log('Content has been cached for offline use.')
     },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
     updated (reg) {
       store.commit(UPDATE_AVAILABLE, reg.waiting)
       console.log('New content is available; please refresh.')

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,84 +1,92 @@
 <template>
-  <v-content>
-    <v-container
-      id="container"
-      class="pa-0 ma-0"
-      fluid
-    >
-      <v-row
-        align="center"
-        justify="center"
+  <v-app>
+    <v-content>
+      <v-container
+        id="container"
+        class="pa-0 ma-0"
+        fluid
       >
-        <v-card
-          max-width="344"
-          class="mx-auto"
+        <v-row
+          align="center"
+          justify="center"
+          no-gutters
         >
-          <v-list-item
-            align="center"
-            justify="center"
+          <v-card
+            max-width="344"
+            class="mx-auto"
           >
-            <v-list-item-content>
-              <v-list-item-title class="headline">
-                Cozy at Home
-              </v-list-item-title>
-              <v-list-item-subtitle>
-                via Ambient Intelligence
-              </v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
+            <v-list-item
+              align="center"
+              justify="center"
+            >
+              <v-list-item-content>
+                <v-list-item-title class="headline">
+                  Cozy at Home
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  via Ambient Intelligence
+                </v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
 
-          <v-img
-            src="@/assets/home-screen-logo.png"
-            height="194"
-          />
+            <v-img
+              src="@/assets/home-screen-logo.png"
+            />
 
-          <v-card-text id="welcome-text">
-            Review your home timeline for notable moments.
-            Configure input sensors and camers for Ambianic to observe.
-            Share, purge or backup your data
-            - it never slips out of your control.
-          </v-card-text>
+            <v-card-text id="welcome-text">
+              Review your home timeline for notable moments.
+              Configure input sensors and camers for Ambianic to observe.
+              Share, purge or backup your data
+              - it never slips out of your control.
+            </v-card-text>
 
-          <v-card-actions>
-            <v-btn
-              rounded
-              color="pink darken-4"
-              dark
-              class="ma-2 white--text"
-              :to="'timeline'"
-              id="btn-timeline"
-            >
-              View Timeline
-              <v-icon
-                right
+            <v-card-actions>
+              <v-btn
+                rounded
+                color="pink darken-4"
+                dark
+                class="ma-2 white--text"
+                :to="'timeline'"
+                id="btn-timeline"
               >
-                mdi-history
-              </v-icon>
-            </v-btn>
-            <v-spacer />
-            <v-btn
-              id="btn-settings"
-              rounded
-              color="pink darken-4"
-              dark
-              class="ma-2 white--text"
-              :to="'settings'"
-            >
-              Settings
-              <v-icon
-                right
+                View Timeline
+                <v-icon
+                  right
+                >
+                  mdi-history
+                </v-icon>
+              </v-btn>
+              <v-spacer />
+              <v-btn
+                id="btn-settings"
+                rounded
+                color="pink darken-4"
+                dark
+                class="ma-2 white--text"
+                :to="'settings'"
               >
-                mdi-settings
-              </v-icon>
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-row>
-      <v-row class="mt-4">
-        <update-notification class="mx-auto" />
-      </v-row>
-    </v-container>
-  </v-content>
+                Settings
+                <v-icon
+                  right
+                >
+                  mdi-settings
+                </v-icon>
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-row>
+        <v-row
+          align="end"
+          justify="center"
+          no-gutters=""
+          >
+          <v-col>
+            <update-notification class="mx-auto" />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-content>
+  </v-app>
 </template>
 
 <script>