From a911be98d2137be5ea7f17d1df73a2215dfb7c75 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 16 Jan 2023 01:32:33 +1100
Subject: Add fading for overflowing baseline labels

---
 src/components/BaseLine.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index 6d31287..f3a9e93 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -1,8 +1,10 @@
 <template>
 <div class="flex relative" :class="{'flex-col': vert}"
 	:style="{color: store.color.text}" ref="rootRef">
-	<div v-for="p in periods" :key="p.label" :style="periodStyles(p)">
+	<div v-for="p in periods" :key="p.label" class="relative" :style="periodStyles(p)">
 		<div :style="labelStyles">{{p.label}}</div>
+		<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>
 	<TransitionGroup name="fade" v-if="mounted">
 		<div v-for="(state, idx) in timelines" :key="state.id" class="absolute" :style="spanStyles(idx)"></div>
-- 
cgit v1.2.3