Add dynamic top matter

src/App.vue

@@ -51,20 +51,6 @@
     </NcContent>
 </template>
 
-<style scoped>
-.outer {
-    padding: 0 0 0 44px;
-    height: 100%;
-    width: 100%;
-}
-
-@media (max-width: 768px) {
-    .outer {
-        padding-left: 5px;
-    }
-}
-</style>
-
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator';
 import {
@@ -121,6 +107,18 @@ export default class App extends Mixins(GlobalMixin, UserConfig) {
 }
 </script>
 
+<style scoped lang="scss">
+.outer {
+    padding: 0 0 0 44px;
+    height: 100%;
+    width: 100%;
+}
+
+@media (max-width: 768px) {
+    .outer { padding: 0px; }
+}
+</style>
+
 <style lang="scss">
 body {
     overflow: hidden;

src/components/Timeline.vue

@@ -27,15 +27,19 @@
             key-field="id"
             size-field="size"
             type-field="type"
-            v-slot="{ item }"
             @update="scrollChange"
             @resize="handleResizeWithDelay"
         >
+            <template #before>
+                <!-- Show dynamic top matter, name of the view -->
+                <div class="recycler-before" ref="recyclerbefore" v-if="!topMatterType && list.length > 0">
+                    {{ getViewName() }}
+                </div>
+            </template>
+
+            <template v-slot="{ item }">
                 <div v-if="item.type === 0" class="head-row"
-                :class="{
+                    :class="{ 'selected': item.selected}"
-                    'first': item.id === 1 && !topMatterType,
-                    'selected': item.selected,
-                }"
                 >
                     <CheckCircle :size="18" class="select" @click="selectHead(item)" />
 
@@ -69,6 +73,7 @@
                                 @clickImg="clickPhoto" />
                     </div>
                 </div>
+            </template>
         </RecycleScroller>
 
         <!-- Timeline scroller -->
@@ -370,19 +375,27 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
 
     /** Create top matter */
     setTopMatter() {
+        this.topMatterType = (() => {
             switch (this.$route.name) {
-            case 'folders':
+                case 'folders': return TopMatterType.FOLDER;
-                this.topMatterType = TopMatterType.FOLDER;
+                case 'tags': return this.$route.params.name ? TopMatterType.TAG : TopMatterType.NONE;
-                break;
+                case 'people': return this.$route.params.name ? TopMatterType.FACE : TopMatterType.NONE;
-            case 'tags':
+                default: return TopMatterType.NONE;
-                this.topMatterType = this.$route.params.name ? TopMatterType.TAG : TopMatterType.NONE;
+            }
-                break;
+        })();
-            case 'people':
+    }
-                this.topMatterType = this.$route.params.name ? TopMatterType.FACE : TopMatterType.NONE;
+
-                break;
+    /** Get view name for dynamic top matter */
-            default:
+    getViewName() {
-                this.topMatterType = TopMatterType.NONE;
+        switch (this.$route.name) {
-                break;
+            case 'timeline': return 'Your Photos';
+            case 'favorites': return 'Favorites';
+            case 'people': return 'People';
+            case 'videos': return 'Videos';
+            case 'archive': return 'Archive';
+            case 'thisday': return 'On this day';
+            case 'tags': return 'Tags';
+            default: return '';
         }
     }
 
@@ -425,7 +438,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
 
         // Mobile devices
         if (window.innerWidth <= 768) {
-            width -= 4;
             this.isMobile = true;
         } else {
             width -= 40;
@@ -768,9 +780,13 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
         const recycler: any = this.$refs.recycler;
         this.viewHeight = recycler.$refs.wrapper.clientHeight;
 
+        // Static extra height at top
+        const rb = this.$refs.recyclerbefore as Element;
+        const extraHeight = rb?.clientHeight || 0;
+
         // Compute timeline tick positions
         for (const tick of this.timelineTicks) {
-            tick.topC = (tick.topS + tick.top * this.rowHeight) * this.timelineHeight / this.viewHeight;
+            tick.topC = (extraHeight + tick.topS + tick.top * this.rowHeight) * this.timelineHeight / this.viewHeight;
         }
 
         // Do another pass to figure out which timeline points are visible
@@ -1421,13 +1437,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     font-size: 0.9em;
     font-weight: 600;
 
-    @include phone {
-        &.first {
-            padding-left: 38px;
-            padding-top: 12px;
-        }
-    }
-
     > .select {
         position: absolute;
         left: 5px; top: 50%;
@@ -1580,11 +1589,15 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     }
 }
 
-/** Static top matter */
+/** Static and dynamic top matter */
 .top-matter {
     padding-top: 4px;
-    @include phone {
+    @include phone { padding-left: 40px; }
-        padding-left: 38px;
+}
-    }
+.recycler-before {
+    font-size: 1.2em;
+    padding-top: 13px;
+    padding-left: 8px;
+    @include phone { padding-left: 48px; }
 }
 </style>