map: improve mobile layout
Signed-off-by: Varun Patil <varunpatil@ucla.edu>pull/563/head
Varun Patil
parent
9cd1058028
commit
6157a4fb36
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
|
||||
> .timeline {
|
||||
padding-left: 0;
|
||||
.primary {
|
||||
height: 50%;
|
||||
will-change: height;
|
||||
}
|
||||
|
||||
> .separator {
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue