From 6618e3a1928440b2a7accad6053f970c316c27c8 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 19 Oct 2022 14:59:26 +1100
Subject: Add gradient to event lines

---
 src/components/TimeLine.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 01561a1..fb06e4d 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -5,6 +5,12 @@
 	@wheel.exact.prevent="onWheel" @wheel.shift.exact.prevent="onShiftWheel"
 	ref="rootRef">
 	<svg :viewBox="`0 0 ${width} ${height}`">
+		<defs>
+			<linearGradient id="eventLineGradient">
+				<stop offset="5%" stop-color="#a3691e"/>
+				<stop offset="95%" stop-color="gold"/>
+			</linearGradient>
+		</defs>
 		<!-- Tick markers -->
 		<template v-for="date, idx in ticks.dates" :key="date.toInt()">
 			<line v-if="date.equals(MIN_DATE, scale) || date.equals(MAX_DATE, scale)"
@@ -20,8 +26,9 @@
 		</template>
 		<!-- Event lines -->
 		<line v-for="id in eventLines.keys()" :key="id"
-			x1="0" y1="0" x2="1" y2="0" :stroke="store.color.altDark2" stroke-width="1px"
+			x1="0" y1="0" x2="1" y2="0.01" stroke="url('#eventLineGradient')" stroke-width="1px"
 			:style="eventLineStyles(id)" class="animate-fadein"/>
+			<!-- Note: With a fully vertical or horizontal line, nothing gets displayed -->
 		<!-- Tick labels -->
 		<text v-for="date, idx in ticks.dates" :key="date.toInt()"
 			x="0" y="0" :text-anchor="vert ? 'start' : 'middle'" dominant-baseline="middle"
@@ -33,7 +40,7 @@
 	</svg>
 	<!-- Events -->
 	<div v-for="id in idToPos.keys()" :key="id"
-		class="absolute bg-black text-white rounded-full border border-amber-400 animate-fadein text-sm text-center"
+		class="absolute bg-black text-white rounded-full border border-yellow-500 animate-fadein text-sm text-center"
 		:style="eventStyles(id)">
 		{{idToEvent.get(id)!.title}}
 	</div>
-- 
cgit v1.2.3