Update timeline

src/data/timeline.js

@@ -14,11 +14,20 @@ export const eventsData = [
       pos: '0% 23%',
       start: '2021-03-17 11:00:00',
       end: '2021-03-24 04:00:00',
-      startOnly: true,
       color: '#79D2EB',
       zoom: '120%',
+      startOnly: true,
     },
   ],
+  {
+    name: 'Pre-Install 1.4',
+    pos: '80% 40%',
+    image: 'update.jpg',
+    start: '2021-03-15 11:00:00',
+    end: '2021-03-19 11:00:00',
+    color: '#F9E7CC',
+    startOnly: true,
+  },
   {
     name: 'Moment of Bloom - Hu Tao Banner',
     pos: '50% 20%',

src/routes/timeline/index.svelte

@@ -177,7 +177,9 @@
       return;
     }
 
-    event.currentTarget.scrollLeft += event.deltaY;
+    const delta = Math.abs(event.deltaY);
+    const dir = event.deltaY > 0 ? 1 : -1;
+    event.currentTarget.scrollLeft += Math.max(delta, 100) * dir;
   }
 
   $: todayOffset = Math.abs(firstDay.diff(today, 'day', true));
@@ -202,7 +204,7 @@
     <div class="px-4 md:px-8 text-white select-none">
       <Checkbox bind:checked={showAsLocalTime}>Show as local time</Checkbox>
     </div>
-    <div class="w-full overflow-x-auto px-4 md:px-8" bind:this={timelineContainer} on:mousewheel={transformScroll}>
+    <div class="w-full overflow-x-auto px-4 md:px-8" bind:this={timelineContainer} on:wheel={transformScroll}>
       <div
         style={`padding-top: 50px; width: min-content; padding-right: ${2 * padding * dayWidth}px; height: ${
           marginTop + events.length * (eventHeight + eventMargin)