Merge f5127f9 into f1d03b0

ambianic · Feb 5, 2021 · fb87c9f · fb87c9f
2 parents f1d03b0 + f5127f9
commit fb87c9f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/AppFrame.vue b/src/components/AppFrame.vue
@@ -4,7 +4,7 @@
     <!-- nav goes here -->
     <NavBar />
 
-    <v-content>
+    <v-main>
       <v-container
         id="container"
         class="pa-0 ma-0"
@@ -14,7 +14,7 @@
           <p>App page content goes here...</p>
         </slot>
       </v-container>
-    </v-content>
+    </v-main>
 
     <v-footer
       app

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-content class="body">
+  <v-main class="body">
     <v-container
       id="container"
       fluid
@@ -77,7 +77,7 @@
         </v-col>
       </v-row>
     </v-container>
-  </v-content>
+  </v-main>
 </template>
 
 <script>

diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
@@ -65,9 +65,9 @@
         class="pa-0 ma-0"
       >
         <infinite-loading
-          v-if="!isBottomSpinnerVisible"
           direction="top"
           @infinite="infiniteHandlerTop"
+          v-observe-visibility="topSpinnerVisibilityChanged"
         >
           <span slot="no-more">
             There are no new timeline events.
@@ -145,9 +145,9 @@
                 >
                   <v-col cols="7">
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
-                          v-on="on"
+                          v-on="tooltip"
                           fab
                           color="success lighten-2"
                           class="mx-2"
@@ -158,9 +158,9 @@
                       <span>Looks fine</span>
                     </v-tooltip>
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
-                          v-on="on"
+                          v-on="tooltip"
                           color="error lighten-2"
                           fab
                           class="mx-2"
@@ -173,32 +173,32 @@
                   </v-col>
                   <v-col cols="1">
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
                           icon
-                          v-on="on"
+                          v-on="tooltip"
                         >
                           <v-icon>mdi-heart</v-icon>
                         </v-btn>
                       </template>
                       <span>Save to Favorites</span>
                     </v-tooltip>
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
                           icon
-                          v-on="on"
+                          v-on="tooltip"
                         >
                           <v-icon>mdi-pen</v-icon>
                         </v-btn>
                       </template>
                       <span>Edit event details</span>
                     </v-tooltip>
                     <v-tooltip bottom>
-                      <template>
+                      <template #activator="{ on: tooltip }">
                         <v-btn
                           icon
-                          v-on="on"
+                          v-on="tooltip"
                         >
                           <v-icon>mdi-share-variant</v-icon>
                         </v-btn>
@@ -257,7 +257,7 @@
         </v-list-item>
         <infinite-loading
           @infinite="infiniteHandlerBottom"
-          v-observe-visibility="bottomSpinnerVisibilityChanged"
+          v-if="!isTopSpinnerVisible"
         >
           <span slot="no-more">
             There are no more timeline events.
@@ -295,7 +295,7 @@ export default {
       imageURL: {}, // map[id, fullURL] - maps unique event id to their full thumbnail URLs
       isImageLoaded: [],
       on: true,
-      isBottomSpinnerVisible: false // flags whether the timeline is in the process of loading data
+      isTopSpinnerVisible: true // flags whether the timeline is in the process of loading data
     }
   },
   created () {
@@ -353,9 +353,9 @@ export default {
       console.debug('getNextTimelinePage received data', { timelineEvents }) // eslint-disable-line no-console
       return timelineEvents
     },
-    async bottomSpinnerVisibilityChanged (isVisible, entry) {
-      this.isBottomSpinnerVisible = isVisible
-      console.debug(`bottomSpinnerVisibilityChanged: ${isVisible}`) // eslint-disable-line no-console
+    async topSpinnerVisibilityChanged (isVisible, entry) {
+      this.isTopSpinnerVisible = isVisible
+      console.debug(`topSpinnerVisibilityChanged: ${isVisible}`) // eslint-disable-line no-console
     },
     async infiniteHandlerTop ($state) {
       try {