From 6a21aa07c0bd6f601206cc12e659ebd6319364b6 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 18 Dec 2022 22:24:00 +1100
Subject: Make BaseLine spans more visible

Increase min-length to 3px, add margin around BaseLine
Fix non-visibility on startup
---
 src/components/BaseLine.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'src/components/BaseLine.vue')

diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index 0187b20..8730d90 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="flex relative" :class="{'flex-col': vert}"
-	:style="{color: store.color.text, backgroundColor: store.color.bgDark}" ref="rootRef">
+	:style="{color: store.color.text}" ref="rootRef">
 	<div v-for="p in periods" :key="p.label" :style="periodStyles(p)">
 		<div :style="labelStyles">{{p.label}}</div>
 	</div>
@@ -67,8 +67,10 @@ onMounted(() => resizeObserver.observe(rootRef.value as HTMLElement));
 // Styles
 function periodStyles(period: Period){
 	return {
+		backgroundColor: store.color.bgDark2,
 		outline: '1px solid gray',
 		flexGrow: period.len,
+		overflow: 'hidden',
 	};
 }
 const labelStyles = computed((): Record<string, string> => ({
@@ -96,7 +98,10 @@ function spanStyles(state: TimelineState){
 	let lenFrac = (end.year - start.year) / (MAX_DATE.year - MIN_DATE.year);
 	let startPx = Math.max(0, availLen * startFrac); // Prevent negatives due to end-padding
 	let lenPx = Math.min(availLen - startPx, availLen * lenFrac);
-	lenPx = Math.max(1, lenPx); // Prevent zero length
+	if (lenPx < 3){ // Prevent zero length
+		lenPx = 3;
+		startPx -= Math.max(0, startPx + lenPx - availLen);
+	}
 	//
 	if (props.vert){
 		styles = {
@@ -118,7 +123,7 @@ function spanStyles(state: TimelineState){
 		transition: skipTransition.value ? 'none' : 'all 300ms ease-out',
 		color: 'black',
 		backgroundColor: store.color.alt,
-		opacity: 0.3,
+		opacity: 0.4,
 	};
 }
 </script>
-- 
cgit v1.2.3