[timeline] sticky header, scroll to hour....

app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue

@@ -74,11 +74,7 @@ export default {
 	border-bottom: 1px solid rgba(33, 33, 33, 0.08)
 	gap: 25px
 	flex-wrap: wrap
-	position: sticky
-	top: 0
-	z-index: 9999
-	background: white
-
+	flex: 0 0 auto
 
 .subheader-icon-button
 	border: 1px solid #ABABAB
@@ -100,6 +96,7 @@ export default {
 .subheader-input
 	max-width: 250px !important
 	min-width: 250px
+	height: 56px
 
 	&:deep(.v-input__details)
 		display: none
@@ -107,11 +104,7 @@ export default {
 	&.disabled
 		pointer-events: none !important
 
-
-.date-wrapper
-	flex: 0 1 385px
-
-@media (max-width: 1316px)
+@media (max-width: 1312px)
 	.date-wrapper
 		order: 3
 

app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue

@@ -11,8 +11,9 @@
 			:unscheduledTime="calData.unscheduled_times"
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
-			:time-cell-height="100"
-			:snap-to-time="15"
+			:time-cell-height="timeCellHeight"
+			:snap-to-time="8 * 60"
+			:scroll-to-hour="calConfig.scrollHour"
 			:min-cell-width="300"
 			@ready="onReady()"
 			@view-change="weekChanged"
@@ -94,7 +95,7 @@ export default {
 			type: Object,
 			required: true,
 			default() {
-				return {startHour: 8, endHour: 16, date: new Date()}
+				return {date: new Date(), scrollHour: 7}
 			}
 		}
 	},
@@ -112,12 +113,13 @@ export default {
 			},
 			focusedEventId: null,
 			showCompleteModal: null,
-			showDeleteModal: null
+			showDeleteModal: null,
+			timeCellHeight: 100,
 		}
 	},
 
 	mounted() {
-		this._scrollToDefaultTime()
+		this._scrollToDefaultTime()	
 	},
 
 	methods: {
@@ -137,7 +139,7 @@ export default {
 
 		onReady() {
 			this.scrollToYesterday()
-			this.correctTimecolumnMargin()
+			this.correctMargins()
 		},
 
 		scrollToYesterday() {
@@ -148,9 +150,10 @@ export default {
 			scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
 		},
 
-		correctTimecolumnMargin() {
+		correctMargins() {
 			const heightOfDayHeader = document.getElementsByClassName('vuecal__heading')[0].clientHeight
 			document.getElementsByClassName('vuecal__time-column')[0].style.marginTop = `${heightOfDayHeader}px`
+			document.getElementsByClassName('vuecal__cells-body')[0].style.marginTop = `${heightOfDayHeader}px`
 		},
 
 		getHeadingDate(value) {
@@ -211,7 +214,8 @@ export default {
 
 	.calendar-wrapper
 		width: 100%
-		padding-top: 50px
+		height: 100%
+		// padding-top: 50px
 
 		&:deep()
 			.vuecal__cells
@@ -252,6 +256,16 @@ export default {
 			.vuecal__cell:before
 				border: none
 
+			.vuecal__scrollable-body
+				position: relative
+
+			.vuecal__weekdays-headings
+				position: absolute
+				top: 0
+				left: 20px
+				z-index: 999
+				background: white
+
 			.vuecal__heading
 				height: fit-content
 				min-height: 100%

app/src/plugins/tm@dashboard/tasks/tasks.vue

@@ -35,8 +35,7 @@ export default {
 			dataLoaded: false,
 			config: {
 				date: new Date(),
-				startHour: 8,
-				endHour: 16,
+				scrollHour: 7,
 			}
 		}
 	},
@@ -70,9 +69,7 @@ export default {
 				time.surname = this.timelineData.surname
 			})
 
-			// format working hours
-			this.config.startHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
-			this.config.endHour = Number(this.timelineData.work_hours_to.split(':')[0]) + 1
+			this.config.scrollHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
 		},
 
 		triggerToast(message) {
@@ -102,5 +99,10 @@ export default {
 .w-loadable
 	text-align: center
 	padding-top: 20px
-	height: 100%
+	height: calc( 100% - 121px )
+
+@media (max-width: 1312px)
+	.w-loadable
+		height: calc( 100% - 202px )
+
 </style>

app/src/plugins/tm@dashboard/teams/_components/a-team-filter.vue

@@ -80,6 +80,7 @@ export default {
 	border-bottom: 1px solid rgba(33, 33, 33, 0.08)
 	gap: 25px
 	flex-wrap: wrap
+	flex: 0 0 auto
 
 .subheader-icon-button
 	border: 1px solid #ABABAB
@@ -109,10 +110,7 @@ export default {
 		pointer-events: none !important
 
 
-.date-wrapper
-	flex: 0 1 385px
-
-@media (max-width: 1316px)
+@media (max-width: 1312px)
 	.date-wrapper
 		order: 3
 

app/src/plugins/tm@dashboard/teams/teams.vue

@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<A-team-filter @dayChanged="getDayData" />
+
 		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
 			<Z-timeline />
 		</W-loadable>
@@ -38,5 +39,9 @@ export default {
 .w-loadable
 	text-align: center
 	padding-top: 20px
-	height: 100%
+	height: calc( 100% - 121px )
+
+@media (max-width: 1312px)
+	.w-loadable
+		height: calc( 100% - 202px )
 </style>