From 56abab8390a50b026433793befc67587c08d5a21 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 25 Jan 2023 18:41:15 +1100
Subject: Tweak styling

Highlight current timeline when there are multiple
Make 'From Wikipedia' info-modal label grayer
make horizontal tick labels closer to mainline
---
 src/App.vue                  | 2 +-
 src/components/InfoModal.vue | 2 +-
 src/components/TimeLine.vue  | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 186bf40..f807836 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -370,7 +370,7 @@ function onEventDisplay(
 	timelineTimeouts.set(timelineId, window.setTimeout(async () => {
 		timelineTimeouts.delete(timelineId);
 		handleOnEventDisplay(timelineId, eventIds, firstDate, lastDate, scaleIdx);
-	}, 100));
+	}, 150));
 }
 
 // ========== For info modal ==========
diff --git a/src/components/InfoModal.vue b/src/components/InfoModal.vue
index 237934d..54b386d 100644
--- a/src/components/InfoModal.vue
+++ b/src/components/InfoModal.vue
@@ -81,7 +81,7 @@
 			<!-- Description -->
 			<div v-if="eventInfo.desc != null">{{eventInfo.desc}}</div>
 			<div v-else class="text-center text-stone-500 text-sm">(No description found)</div>
-			<div v-if="event.id > 0" class="text-sm text-right">
+			<div v-if="event.id > 0" class="text-sm text-stone-600 text-right mt-1">
 				From <a :href="'https://en.wikipedia.org/?curid=' + eventInfo.wikiId" target="_blank">Wikipedia</a>
 				(via <a :href="'https://www.wikidata.org/wiki/Q' + event.id" target="_blank">Wikidata</a>)
 				<external-link-icon class="inline-block w-3 h-3 ml-1"/>
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 18ae107..e767074 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -2,7 +2,8 @@
 <div class="relative overflow-hidden z-0" ref="rootRef"
 	@pointerdown="onPointerDown" @pointermove="onPointerMove" @pointerup="onPointerUp"
 	@pointercancel="onPointerUp" @pointerout="onPointerUp" @pointerleave="onPointerUp"
-	@wheel.exact="onWheel" @wheel.shift.exact="onShiftWheel">
+	@wheel.exact="onWheel" @wheel.shift.exact="onShiftWheel"
+	:style="{backgroundColor: !current && closeable ? 'rgba(0,0,0,0.3)' : store.color.bg}">
 
 	<!-- Event density indicators -->
 	<template v-if="store.showEventCounts">
@@ -229,7 +230,7 @@ function initScale(){
 
 // ========== Tick data ==========
 
-const tickLabelMargin = computed(() => vert.value ? 20 : 30); // Distance from label to mainline
+const tickLabelMargin = computed(() => vert.value ? 20 : 18); // Distance from label to mainline
 const tickLabelSpan = computed( // Leftover breadth in half-mainline-area for tick label
 	() => store.mainlineBreadth - store.largeTickLen / 2 - tickLabelMargin.value);
 
-- 
cgit v1.2.3