From 9534b7fdc22f76b7d9d1af9d36337e636b23d95e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Kalu=C5=BEa?= <kaluza.filip16@gmail.com>
Date: Fri, 20 Oct 2023 17:01:49 +0200
Subject: [PATCH] [timeline] line time indicators

---
 app/src/plugins/app@vendor/vue-cal/styles.scss    |  9 +++++++--
 .../tm@dashboard/_components/z-timeline.vue       | 15 +++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/src/plugins/app@vendor/vue-cal/styles.scss b/app/src/plugins/app@vendor/vue-cal/styles.scss
index 6fd866f..aeccfc2 100644
--- a/app/src/plugins/app@vendor/vue-cal/styles.scss
+++ b/app/src/plugins/app@vendor/vue-cal/styles.scss
@@ -178,8 +178,8 @@ $splits-headers-height: 1.5em;
     .vuecal__time-cell {
       color: #999;
       text-align: right;
-      padding-right: 2px;
       font-size: 0.9em;
+      background: white;
     }
 
     .vuecal__time-cell-line:before {
@@ -187,7 +187,12 @@ $splits-headers-height: 1.5em;
       position: absolute;
       left: 0;
       right: 0;
-      border-top: 1px solid rgba(196, 196, 196, 0.3);
+      border-top: 1px solid #F5F5F5;
+      z-index: -1;
+    }
+    
+    .vuecal__time-cell-line.hour:before {
+      border-top: 1px solid #e0e0e0;
     }
   }
 
diff --git a/app/src/plugins/tm@dashboard/_components/z-timeline.vue b/app/src/plugins/tm@dashboard/_components/z-timeline.vue
index b15c63d..9f21c42 100644
--- a/app/src/plugins/tm@dashboard/_components/z-timeline.vue
+++ b/app/src/plugins/tm@dashboard/_components/z-timeline.vue
@@ -51,9 +51,16 @@
 			</template>
 
 			<template v-slot:time-cell="{ hours, minutes }">
-				<span class="d-flex align-center justify-center">
-					<p>{{hours}}:{{String(minutes).padStart(2, '0')}}</p>
-					<div class="time-column-line"></div>
+				<span class="d-flex justify-center">
+					<span class="d-flex justify-center">
+						<p style="margin-top: -9px">{{hours}}:{{String(minutes).padStart(2, '0')}}</p>
+						<div class="time-column-line"></div>
+						<span class="vuecal__time-cell-line hour"></span>
+					</span>
+
+					<span class="vuecal__time-cell-line" style="margin-top: 25px"></span>
+					<span class="vuecal__time-cell-line" style="margin-top: 50px"></span>
+					<span class="vuecal__time-cell-line" style="margin-top: 75px"></span>
 				</span>
 			</template>
 
@@ -511,7 +518,7 @@ export default {
 				.vuecal__cell--today,
 				.vuecal__cell--highlighted,
 				.vuecal__cell--selected
-					background-color: white
+					// background-color: white
 					border-radius: 16px
 
 				.vuecal__cell-split--weekend