More timeline styling

src/routes/timeline/_item.svelte

@@ -23,6 +23,8 @@
   $: attachedNext = next !== null && next.start.diff(event.end, 'hour') < 1;
   $: attachedPrev = prev !== null && event.start.diff(prev.end, 'hour') < 1;
   $: prevEnded = prev !== null && now.isAfter(prev.end);
+  $: shouldShowHourStart = diffStart <= 86400000 || event.duration > 8 || !prevNearby;
+  $: shouldShowHourEnd = diffEnd <= 86400000 || event.duration > 8 || !prevNearby;
 </script>
 
 <div
@@ -35,7 +37,9 @@
    top: {marginTop +
     i * (eventHeight + eventMargin)}px; height: {eventHeight}px; padding-right: 10px; 
         {prevNearby &&
-  !started && (attachedPrev || prevEnded) && prevNearby
+  !started &&
+  (attachedPrev || prevEnded) &&
+  prevNearby
     ? 'padding-left: 35px;'
     : 'padding-left: 10px;'}
     --image: url(/images/events/{event.image}); --pos: {event.pos}; --color: {event.color}; 
@@ -49,16 +53,34 @@
   </span>
   <!-- Ending timer-->
   {#if started && !ended && !event.startOnly && !attachedNext}
-    <div class="absolute pl-3" style="top: 6px; right: {nextNearby ? '-55px' : '-120px'}; width: 120px;">
+    <div
+      class="absolute pl-3"
+      style="top: 6px; right: {nextNearby ? '-55px' : '-120px'}; width: {shouldShowHourEnd ? '120px' : '40px'};"
+    >
       <span class="text-sm rounded-xl text-black font-semibold bg-white bg-opacity-75 px-1">
-        {`${diffEnd > 86400000 ? `${Math.trunc(dayjs.duration(diffEnd).asDays())}d` : ''} ${dayjs.duration(diffEnd).format('HH:mm:ss')}`}
+        {diffEnd > 86400000
+          ? `${Math.trunc(dayjs.duration(diffEnd).asDays())}d ${
+              shouldShowHourEnd ? dayjs.duration(diffEnd).format('HH:mm:ss') : ''
+            }`
+          : dayjs.duration(diffEnd).format('HH:mm:ss')}
       </span>
     </div>
-  <!-- Starting timer-->
-  {:else if  (prevNearby && !attachedPrev ? prevEnded : true) && !started && !ended}
-    <div class="absolute pr-3 text-right" style="top: 6px; left: {prevNearby ? '-80px' : '-120px'}; width: 120px;">
+    <!-- Starting timer-->
+  {:else if (prevNearby && !attachedPrev ? prevEnded : true) && !started && !ended}
+    <div
+      class="absolute pr-3 text-right"
+      style="top: 6px; left: {prevNearby
+        ? shouldShowHourStart
+          ? '-80px'
+          : '-18px'
+        : '-120px'}; width: {shouldShowHourStart ? '120px' : '40px'};"
+    >
       <span class="text-sm rounded-xl text-black font-semibold bg-white bg-opacity-75 px-1">
-        {`${diffStart > 86400000 ? `${Math.trunc(dayjs.duration(diffStart).asDays())}d` : ''} ${dayjs.duration(diffStart).format('HH:mm:ss')}`}
+        {diffStart > 86400000
+          ? `${Math.trunc(dayjs.duration(diffStart).asDays())}d ${
+              shouldShowHourStart ? dayjs.duration(diffStart).format('HH:mm:ss') : ''
+            }`
+          : dayjs.duration(diffStart).format('HH:mm:ss')}
       </span>
     </div>
   {/if}

src/routes/timeline/index.svelte

@@ -150,6 +150,8 @@
     loading = false;
     await tick();
 
+    if (timelineContainer === undefined) return;
+
     if (timelineContainer.offsetWidth < 500) {
       dayWidth = 40;
       await tick();