make it work better on mobile

tjhorner · Sep 19, 2024 · 1bc7139 · 1bc7139
1 parent ea11eb5
commit 1bc7139
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 3 deletions.
diff --git a/packages/frontend/src/app.css b/packages/frontend/src/app.css
@@ -1,9 +1,15 @@
+*,
+* * {
+  box-sizing: border-box;
+}
+
 body,
 html {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
+  overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
 }

diff --git a/packages/frontend/src/lib/components/DateFilter.svelte b/packages/frontend/src/lib/components/DateFilter.svelte
@@ -32,3 +32,13 @@
   type="datetime-local"
   on:change={(e) => updateSelectedDate(e.currentTarget.value)}
 />
+
+<style>
+  input {
+    width: 100%;
+    font-size: 1rem;
+    padding: 0.1rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+  }
+</style>
diff --git a/packages/frontend/src/lib/components/SequenceViewer.svelte b/packages/frontend/src/lib/components/SequenceViewer.svelte
@@ -76,6 +76,7 @@
   <View360
     {projection}
     autoResize
+    scrollable={false}
     plugins={[new LoadingSpinner()]}
     on:viewChange={handleViewChange}
   />
@@ -94,6 +95,19 @@
     border-radius: 8px;
   }
 
+  @media (max-width: 600px) {
+    .sequence-viewer :global(canvas) {
+      width: 100%;
+      height: 300px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .date {
+      border-bottom-right-radius: 0 !important;
+    }
+  }
+
   .close {
     position: fixed;
     top: 0;

diff --git a/packages/frontend/src/lib/components/TrackExplorerMap.svelte b/packages/frontend/src/lib/components/TrackExplorerMap.svelte
@@ -25,6 +25,13 @@
       return
     }
 
+    map.setPadding({
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    })
+
     const boundingBox = bbox(selectedTrack ?? tracks)
     map.fitBounds(boundingBox as any, {
       padding: 100,

diff --git a/packages/frontend/src/lib/components/TrackSelector.svelte b/packages/frontend/src/lib/components/TrackSelector.svelte
@@ -136,7 +136,7 @@
     ]}
     layout={{ "line-cap": "round", "line-join": "round" }}
     paint={{
-      "line-width": 2,
+      "line-width": 4,
       "line-color": [
         "interpolate",
         ["linear"],

diff --git a/packages/frontend/src/lib/components/TrackViewer.svelte b/packages/frontend/src/lib/components/TrackViewer.svelte
@@ -13,6 +13,7 @@
   import bbox from "@turf/bbox"
   import HeadingMarker from "./HeadingMarker.svelte"
   import SequenceViewer from "./SequenceViewer.svelte"
+  import { onDestroy, type SvelteComponent } from "svelte"
 
   interface TrackImageProps {
     sequenceNumber: number
@@ -60,6 +61,7 @@
 
     if (!id) {
       selectedImage = undefined
+      fixPadding() // ughhhhh
       flyToTrack()
       return
     }
@@ -71,10 +73,13 @@
     hasNextImage = index < trackImages.features.length - 1
     hasPreviousImage = index > 0
 
-    $map?.flyTo({
+    $map?.easeTo({
       center: selectedImage.geometry.coordinates as [number, number],
       zoom: 16,
       duration: 500,
+      padding: {
+        bottom: window.innerHeight / 2,
+      },
     })
   }
 
@@ -102,6 +107,15 @@
     selectImage(trackImages.features[newIndex].id as number)
   }
 
+  function fixPadding() {
+    $map?.setPadding({
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    })
+  }
+
   $: track && loadImages()
 
   $: heading = parseFloat(selectedImage?.properties?.heading ?? "0") - cameraYaw
@@ -110,7 +124,7 @@
 </script>
 
 {#if selectedImage}
-  <Control position="bottom-left">
+  <Control class="image-control" position="bottom-left">
     <SequenceViewer
       imageUrl={`/api/images/${selectedImage.id}.jpg`}
       captureDate={new Date(selectedImage.properties.captureDate)}
@@ -171,3 +185,11 @@
     }}
   />
 </GeoJSON>
+
+<style>
+  @media (max-width: 600px) {
+    :global(.image-control) {
+      margin: 0 !important;
+    }
+  }
+</style>