From 171653e9f3de8a550d4507722637a3c7d1e063d2 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 23 Jan 2023 09:05:54 +1100
Subject: Use <div> for tick labels instead of <text>

For compatibility with older devices
---
 src/components/TimeLine.vue | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

(limited to 'src/components')

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 44b5571..8f4de1c 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -39,18 +39,14 @@
 			:stroke="store.color.alt" :stroke-width="`${tick.width}px`"
 			:style="tickStyles(tick)" class="animate-fadein"
 			:class="{'max-tick': tick.bound == 'max', 'min-tick': tick.bound == 'min'}"/>
-
-		<!-- Tick labels -->
-		<template v-for="tick, idx in ticks" :key="tick.date.toInt()">
-			<text v-if="tick.major || store.showMinorTicks"
-				x="0" y="0" :text-anchor="vert ? 'start' : 'middle'" dominant-baseline="middle"
-				:fill="tick.major ? store.color.textDark : store.color.textDark2"
-				class="text-sm animate-fadein cursor-default select-none" :style="tickLabelStyles[idx]">
-				{{tickLabelTexts[idx]}}
-			</text>
-		</template>
 	</svg>
 
+	<!-- Tick labels -->
+	<div v-for="tick, idx in ticks" :key="tick.date.toInt()"
+		class="absolute top-0 left-0 text-sm animate-fadein cursor-default select-none" :style="tickLabelStyles[idx]">
+		{{tickLabelTexts[idx]}}
+	</div>
+
 	<!-- Movement fail indicators -->
 	<div class="absolute z-20" :style="failDivStyles(true)" ref="minFailRef"></div>
 	<div class="absolute z-20" :style="failDivStyles(false)" ref="maxFailRef"></div>
@@ -1507,16 +1503,18 @@ const tickLabelStyles = computed((): Record<string,string>[] => {
 	// Determine styles
 	let styles: Record<string,string>[] = [];
 	for (let i = 0; i < ticks.value.length; i++){
+		let tick = ticks.value[i];
 		let pxOffset = pxOffsets[i];
 		styles.push({
+			color: tick.major ? store.color.textDark : store.color.textDark2,
 			transform: vert.value ?
-				`translate(${mainlineOffset.value + tickLabelMargin.value}px, ${pxOffset}px)` :
-				`translate(${pxOffset}px, ${mainlineOffset.value + tickLabelMargin.value}px)`
-					+ (hasLongLabel ? 'rotate(30deg)' : ''),
+				`translate(${mainlineOffset.value + tickLabelMargin.value}px, ${pxOffset}px) translate(0, -50%)` :
+				`translate(${pxOffset}px, ${mainlineOffset.value + tickLabelMargin.value}px) `
+					+ (hasLongLabel ? 'rotate(30deg)' : 'translate(-50%, 0)'),
 			transitionProperty: skipTransition.value ? 'none' : 'transform, opacity',
 			transitionDuration: store.transitionDuration + 'ms',
 			transitionTimingFunction: 'linear',
-			display: visibilities[i] ? 'block' : 'none',
+			display: (tick.major || store.showMinorTicks) && visibilities[i] ? 'block' : 'none',
 		});
 	}
 	return styles;
-- 
cgit v1.2.3