fix: use app-frame component in root app

ambianic · May 6, 2020 · 6f390cd · 6f390cd
1 parent 419b18c
commit 6f390cd
Show file tree

Hide file tree

Showing 10 changed files with 870 additions and 886 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,12 +1,24 @@
 <!-- App.vue -->
 <template>
-  <router-view />
+  <v-lazy>
+    <amb-app-frame v-if="$route.name !== 'home'">
+      <keep-alive>
+        <router-view />
+      </keep-alive>
+    </amb-app-frame>
+
+    <v-app v-else>
+      <router-view />
+    </v-app>
+  </v-lazy>
 </template>
 
 <script>
+import AmbAppFrame from './components/AppFrame.vue'
 export default {
   name: 'App',
   components: {
+    AmbAppFrame
   }
 }
 </script>
diff --git a/src/views/About.vue b/src/views/About.vue
@@ -1,81 +1,77 @@
 <template>
-  <app-frame>
-    <v-row
-      align="center"
-      justify="center"
-      align-content="space-around"
-    >
-      <template>
-        <v-card
-          max-width="344"
+  <v-row
+    align="center"
+    justify="center"
+    align-content="space-around"
+  >
+    <template>
+      <v-card
+        max-width="344"
+      >
+        <v-layout
+          column
+          wrap
+          align-center
         >
-          <v-layout
-            column
-            wrap
-            align-center
-          >
-            <amb-list-item
-              title="Cozy at Home"
-              subtitle="via Ambient Intelligence"
-            />
-          </v-layout>
-
-          <v-img
-            max-width="300"
-            class="mx-auto"
-            src="@/assets/home-screen-logo.png"
+          <amb-list-item
+            title="Cozy at Home"
+            subtitle="via Ambient Intelligence"
           />
+        </v-layout>
+
+        <v-img
+          max-width="300"
+          class="mx-auto"
+          src="@/assets/home-screen-logo.png"
+        />
 
-          <v-card-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>
+          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-layout
-            column
-            wrap
-            align-center
+        <v-layout
+          column
+          wrap
+          align-center
+        >
+          <v-flex>
+            <amb-list-item
+              :title="version"
+              icon-name="alpha-v-circle-outline"
+              subtitle="Release Version"
+            />
+          </v-flex>
+        </v-layout>
+        <v-card-actions>
+          <v-btn
+            text
+            color="info"
+            :to="'timeline'"
+          >
+            View Timeline
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            text
+            color="info"
+            :to="'settings'"
           >
-            <v-flex>
-              <amb-list-item
-                :title="version"
-                icon-name="alpha-v-circle-outline"
-                subtitle="Release Version"
-              />
-            </v-flex>
-          </v-layout>
-          <v-card-actions>
-            <v-btn
-              text
-              color="info"
-              :to="'timeline'"
-            >
-              View Timeline
-            </v-btn>
-            <v-spacer />
-            <v-btn
-              text
-              color="info"
-              :to="'settings'"
-            >
-              Settings
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </template>
-    </v-row>
-  </app-frame>
+            Settings
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-row>
 </template>
 <script>
 import AmbListItem from '@/components/shared/ListItem.vue'
-import AppFrame from '@/components/AppFrame.vue'
 import { mapState } from 'vuex'
 
 export default {
   components: {
-    AppFrame,
     AmbListItem
   },
   computed: {