From c363088b83c9c48abcf37aff3ac59420cbcc7498 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 21 Jan 2023 20:32:15 +1100
Subject: Add Baseline horizontal fade-div

---
 src/components/BaseLine.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index f8227dc..7dd5253 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -5,8 +5,7 @@
 	<div v-for="p in periods" :key="p.label" class="relative" :style="periodStyles(p)">
 		<div :style="labelStyles">{{p.label}}</div>
 		<!-- Fade-out div for overflowing text -->
-		<div v-if="props.vert" class="absolute bottom-0 w-full h-6"
-			style="background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1))"></div>
+		<div :style="fadeDivStyles"></div>
 	</div>
 	<!-- Timeline 'spans' -->
 	<TransitionGroup name="fade" v-if="mounted">
@@ -147,4 +146,15 @@ function spanStyles(stateIdx: number){
 		borderColor: store.color.bgDark2,
 	};
 }
+
+const fadeDivStyles = computed((): Record<string, string> => ({
+	position: 'absolute',
+	bottom: '0',
+	right: '0',
+	width: props.vert ? '100%' : '24px',
+	height: props.vert ? '24px' : '100%',
+	backgroundImage: props.vert
+		? 'linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1))'
+		: 'linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1))',
+}));
 </script>
-- 
cgit v1.2.3