From 615003d0fac866f3d2fe0486e140019c95cd8068 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 10 Oct 2022 14:07:07 +1100
Subject: Make TimeLine track own sizing

---
 src/App.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index cfd9084..3d63d21 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,18 +16,9 @@
 		</icon-button>
 	</div>
 	<!-- Content area -->
-	<div class="grow min-h-0 bg-stone-800 relative" ref="contentAreaRef">
+	<div class="grow min-h-0 bg-stone-800 flex" :class="{'flex-col': !vert}" ref="contentAreaRef">
 		<time-line v-for="(data, idx) in timelineData" :key="data"
-			:style="{
-				position: 'absolute',
-				top: (vert ? 0 : idx * contentHeight / timelineData.length) + 'px',
-				left: (vert ? idx * contentWidth / timelineData.length : 0) + 'px',
-				outline: 'black solid 1px',
-			}"
-			:width="vert ? contentWidth / timelineData.length : contentWidth"
-			:height="vert ? contentHeight : contentHeight / timelineData.length"
-			:vert="vert"
-			@close="onTimelineClose(idx)"/>
+			class="grow basis-full min-h-0 outline outline-1" :vert="vert" @close="onTimelineClose(idx)"/>
 	</div>
 </div>
 </template>
-- 
cgit v1.2.3