[timeline] line time indicators

This commit is contained in:
Filip Kaluža committed 2023-10-20 17:01:49 +02:00
1 parent fa7ce51630
commit 9534b7fdc2
2 files changed
+18 -6

No files matched your search

@@ -178,8 +178,8 @@ $splits-headers-height: 1.5em;
.vuecal__time-cell { .vuecal__time-cell {
color: #999; color: #999;
text-align: right; text-align: right;
padding-right: 2px;
font-size: 0.9em; font-size: 0.9em;
background: white;
} }
.vuecal__time-cell-line:before { .vuecal__time-cell-line:before {
@@ -187,7 +187,12 @@ $splits-headers-height: 1.5em;
position: absolute; position: absolute;
left: 0; left: 0;
right: 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;
} }
} }
@@ -51,9 +51,16 @@
</template> </template>
<template v-slot:time-cell="{ hours, minutes }"> <template v-slot:time-cell="{ hours, minutes }">
<span class="d-flex align-center justify-center"> <span class="d-flex justify-center">
<p>{{hours}}:{{String(minutes).padStart(2, '0')}}</p> <span class="d-flex justify-center">
<div class="time-column-line"></div> <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> </span>
</template> </template>
@@ -511,7 +518,7 @@ export default {
.vuecal__cell--today, .vuecal__cell--today,
.vuecal__cell--highlighted, .vuecal__cell--highlighted,
.vuecal__cell--selected .vuecal__cell--selected
background-color: white // background-color: white
border-radius: 16px border-radius: 16px
.vuecal__cell-split--weekend .vuecal__cell-split--weekend