map: improve mobile layout

Signed-off-by: Varun Patil <varunpatil@ucla.edu>

package-lock.json

@@ -16,6 +16,7 @@
         "camelcase": "^7.0.1",
         "filerobot-image-editor": "^4.3.8",
         "fuse.js": "^6.6.2",
+        "hammerjs": "^2.0.8",
         "justified-layout": "^4.1.0",
         "leaflet": "^1.9.3",
         "leaflet-edgebuffer": "^1.0.6",
@@ -37,6 +38,7 @@
         "@nextcloud/browserslist-config": "^2.3.0",
         "@nextcloud/webpack-vue-config": "^5.4.0",
         "@playwright/test": "^1.32.0",
+        "@types/hammerjs": "^2.0.41",
         "@types/url-parse": "^1.4.8",
         "@types/videojs-contrib-quality-levels": "^2.0.1",
         "playwright": "^1.32.0",
@@ -2372,6 +2374,12 @@
       "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
       "peer": true
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.41",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
+      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
+      "dev": true
+    },
     "node_modules/@types/hast": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
@@ -13108,6 +13116,12 @@
       "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
       "peer": true
     },
+    "@types/hammerjs": {
+      "version": "2.0.41",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
+      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
+      "dev": true
+    },
     "@types/hast": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",

package.json

@@ -36,6 +36,7 @@
     "camelcase": "^7.0.1",
     "filerobot-image-editor": "^4.3.8",
     "fuse.js": "^6.6.2",
+    "hammerjs": "^2.0.8",
     "justified-layout": "^4.1.0",
     "leaflet": "^1.9.3",
     "leaflet-edgebuffer": "^1.0.6",
@@ -64,6 +65,7 @@
     "@nextcloud/browserslist-config": "^2.3.0",
     "@nextcloud/webpack-vue-config": "^5.4.0",
     "@playwright/test": "^1.32.0",
+    "@types/hammerjs": "^2.0.41",
     "@types/url-parse": "^1.4.8",
     "@types/videojs-contrib-quality-levels": "^2.0.1",
     "playwright": "^1.32.0",

src/components/SplitTimeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="split-container">
+  <div class="split-container" :class="headerClass">
     <div class="primary" ref="primary">
       <component :is="primary" />
     </div>
@@ -14,7 +14,15 @@
     ></div>
 
     <div class="timeline">
-      <Timeline />
+      <div class="timeline-header" ref="timelineHeader">
+        <div class="swiper"></div>
+        <div class="title">
+          {{ t("memories", "{photoCount} photos", { photoCount }) }}
+        </div>
+      </div>
+      <div class="timeline-inner">
+        <Timeline @daysLoaded="daysLoaded" />
+      </div>
     </div>
   </div>
 </template>
@@ -24,6 +32,7 @@ import { defineComponent } from "vue";
 import Timeline from "./Timeline.vue";
 const MapSplitMatter = () => import("./top-matter/MapSplitMatter.vue");
 import { emit } from "@nextcloud/event-bus";
+import Hammer from "hammerjs";
 
 export default defineComponent({
   name: "SplitTimeline",
@@ -35,6 +44,9 @@ export default defineComponent({
   data: () => ({
     pointerDown: false,
     primaryPos: 0,
+    mobileOpen: 1,
+    hammer: null as HammerManager,
+    photoCount: 0,
   }),
 
   computed: {
@@ -46,15 +58,44 @@ export default defineComponent({
           return "None";
       }
     },
+
+    headerClass() {
+      switch (this.mobileOpen) {
+        case 0:
+          return "m-zero";
+        case 1:
+          return "m-one";
+        case 2:
+          return "m-two";
+      }
+    },
+  },
+
+  mounted() {
+    // Set up hammerjs hooks
+    this.hammer = new Hammer(this.$refs.timelineHeader as HTMLElement);
+    this.hammer.get("swipe").set({
+      direction: Hammer.DIRECTION_VERTICAL,
+      threshold: 3,
+    });
+    this.hammer.on(
+      "swipeup",
+      () => (this.mobileOpen = Math.min(this.mobileOpen + 1, 2))
+    );
+    this.hammer.on(
+      "swipedown",
+      () => (this.mobileOpen = Math.max(this.mobileOpen - 1, 0))
+    );
   },
 
   beforeDestroy() {
     this.pointerUp();
+    this.hammer.destroy();
   },
 
   methods: {
     isVertical() {
-      return globalThis.windowInnerWidth <= 768;
+      return false; // for future
     },
 
     sepDown(event: PointerEvent) {
@@ -100,6 +141,10 @@ export default defineComponent({
       const newWidth = Math.max(ref - this.primaryPos, 50);
       (<HTMLDivElement>this.$refs.primary).style.flexBasis = `${newWidth}px`;
     },
+
+    daysLoaded({ count }: { count: number }) {
+      this.photoCount = count;
+    },
   },
 });
 </script>
@@ -126,6 +171,34 @@ export default defineComponent({
     flex-grow: 1;
     padding-left: 8px;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    > .timeline-header {
+      position: relative;
+      display: block;
+      height: 50px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      border-bottom: 1px solid var(--color-border-dark);
+
+      .swiper {
+        display: none;
+      }
+
+      > .title {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        font-weight: 500;
+        padding-top: 12px;
+      }
+    }
+
+    > .timeline-inner {
+      flex-grow: 1;
+      overflow: hidden;
+    }
   }
 
   > .separator {
@@ -146,25 +219,76 @@ export default defineComponent({
 }
 
 @media (max-width: 768px) {
+  /**
+   * On mobile the layout works completely differently
+   * Both components are full-height, and the separatator
+   * brings up the timeline to cover up the primary component
+   * fully when dragged up.
+   */
   .split-container {
-    flex-direction: column;
+    display: block;
 
     > div {
+      position: absolute;
       width: 100%;
-      height: unset;
+      background-color: var(--color-main-background);
     }
 
-    > .primary {
+    .primary {
-      flex-basis: 40%;
+      height: 50%;
-    }
+      will-change: height;
-
-    > .timeline {
-      padding-left: 0;
     }
 
     > .separator {
-      height: 5px;
+      display: none;
-      width: 100%;
+    }
+
+    > .timeline {
+      height: 100%;
+      padding-left: 0;
+      will-change: transform;
+      transition: transform 0.2s ease;
+      border-top-left-radius: 20px;
+      border-top-right-radius: 20px;
+
+      > .timeline-header {
+        height: 58px;
+
+        > .swiper {
+          display: block;
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%, 9px);
+          width: 22px;
+          height: 4px;
+          border-radius: 40px;
+          background-color: var(--color-text-light);
+          z-index: 1;
+          opacity: 0.75;
+          pointer-events: none;
+        }
+
+        > .title {
+          font-size: 1.4em;
+          padding-top: 22px;
+        }
+      }
+    }
+
+    &.m-zero > .timeline {
+      transform: translateY(calc(100% - 60px)); // show attribution
+    }
+    &.m-zero > .primary {
+      height: calc(100% - 60px); // show full map
+    }
+
+    &.m-one > .timeline {
+      transform: translateY(calc(50%)); // show half map
+    }
+
+    &.m-two > .timeline {
+      transform: translateY(0); // show timeline
     }
   }
 }

src/components/Timeline.vue

@@ -25,7 +25,10 @@
       <template #before>
         <!-- Show dynamic top matter, name of the view -->
         <div class="recycler-before" ref="recyclerBefore">
-          <div class="text" v-show="!$refs.topmatter.type && list.length">
+          <div
+            class="text"
+            v-show="!$refs.topmatter.type && list.length && viewName"
+          >
             {{ viewName }}
           </div>
 
@@ -852,6 +855,11 @@ export default defineComponent({
         this.processDay(Number(dayId), preloads[dayId].detail);
       }
 
+      // Notify parent components about stats
+      this.$emit("daysLoaded", {
+        count: data.reduce((acc, day) => acc + day.count, 0),
+      });
+
       // Fix view height variable
       await this.scrollerManager.reflow();
       this.scrollPositionChange();