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

app/src/plugins/app/_layout/app/app.layout.vue

@@ -30,7 +30,11 @@ export default {
 	flex: 1 1 100%
 
 	#main-content
-		height: fit-content
+		overflow-y: scroll
+		height: 100%
+		max-height: 100%
+		display: flex
+		flex-direction: column
 
 .split-pane-right-side
 	width: 100vw

app/src/plugins/app@vendor/vue-cal/event.vue

@@ -279,7 +279,6 @@ export default {
 					width = width - (parentNotSameOverlaps.length * (10 / sameOverlapsLength))
 					left = left + (5 * parentNotSameOverlaps.length - ((10 * parentNotSameOverlaps.length / sameOverlapsLength) * (this.eventPosition - parentNotSameOverlaps.length)))
 				}
-				zIdnex = 10
 			}
 
 			if (this.vuecal.minEventWidth && width < this.vuecal.minEventWidth) {

app/src/plugins/app@vendor/vue-cal/index.vue

@@ -32,7 +32,7 @@
 							</slot>
 						</template>
 					</all-day-bar>
-					<div class="vuecal__bg" :class="{ vuecal__flex: !hasTimeColumn }" column="column">
+					<div class="vuecal__bg" :class="{ vuecal__flex: !hasTimeColumn }" column="column" ref="vuecal_scroll">
 						<div class="vuecal__flex" row="row" grow="grow">
 							<div class="vuecal__time-column" v-if="hasTimeColumn">
 								<div class="vuecal__all-day-text" v-if="showAllDayEvents &amp;&amp; cellOrSplitMinWidth &amp;&amp; !(isDayView &amp;&amp; !minSplitWidth)" :style="{ height: allDayBar.height }">
@@ -50,7 +50,7 @@
 								</div>
 							</div>
 							<div class="vuecal__flex vuecal__cells vuecal__scrollable-body" :class="`${view.id}-view`" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :column="!!cellOrSplitMinWidth">
-								<weekdays-headings v-if="cellOrSplitMinWidth &amp;&amp; isWeekView" :transition-direction="transitionDirection" :week-days="weekDays" :switch-to-narrower-view="switchToNarrowerView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''" :unscheduledTime="unscheduledTime">
+								<weekdays-headings v-if="cellOrSplitMinWidth &amp;&amp; isWeekView" :transition-direction="transitionDirection" :week-days="weekDays" :switch-to-narrower-view="switchToNarrowerView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''" :unscheduledTime="unscheduledTime" ref="vuecal_weekday_heading">
 									<template #weekday-heading="{ heading, view }" v-if="$slots['weekday-heading']">
 										<slot name="weekday-heading" :heading="heading" :view="view"></slot>
 									</template>
@@ -73,7 +73,7 @@
 									</template>
 								</all-day-bar>
 
-								<div class="vuecal__flex" :ref="el =&gt; cellsEl = el" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''">
+								<div class="vuecal__flex vuecal__cells-body" :ref="el =&gt; cellsEl = el" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''">
 									<!-- TU -->
 									<vuecal-cell v-for="(cell, i) in viewCells" :key="i" :options="$props" :edit-events="editEvents" :data="cell" :cell-width="hideWeekdays.length &amp;&amp; (isWeekView || isMonthView) &amp;&amp; cellWidth" :min-timestamp="minTimestamp" :max-timestamp="maxTimestamp" :cell-splits="hasSplits &amp;&amp; daySplits || []">
 										<template #cell-content="{ events, split, selectCell }">
@@ -186,6 +186,7 @@ export default {
 
 	props: {
 		activeView: { type: String, default: 'week' },
+		scrollToHour: { type: Number, default: 0 }, // In minutes.
 		// Only used if there are daySplits with minSplitWidth, to add the same height top spacer on time column.
 		allDayBarHeight: { type: [String, Number], default: '25px' },
 		cellClickHold: { type: Boolean, default: true },
@@ -554,6 +555,9 @@ export default {
 						  }
 						: {})
 				}
+
+				this.$refs['vuecal_scroll'].scrollTop = this.scrollToHour * this.timeCellHeight
+
 				this.$emit('view-change', params)
 			}
 		},
@@ -1302,6 +1306,13 @@ export default {
 				: {})
 		}
 
+		this.$refs['vuecal_scroll'].addEventListener('scroll', () => {
+			this.$refs['vuecal_weekday_heading'].onTimelineScroll(this.$refs['vuecal_scroll'].scrollTop)
+		})
+
+		this.viewportTimelineOffset = this.$refs['vuecal_scroll'].getBoundingClientRect().top
+		this.$refs['vuecal_scroll'].scrollTop = this.scrollToHour * this.timeCellHeight
+
 		this.$emit('ready', params)
 		this.ready = true
 	},

app/src/plugins/app@vendor/vue-cal/weekdays-headings.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 //- weekdays-headings are on week view only.
-.vuecal__flex.vuecal__weekdays-headings
+.vuecal__flex.vuecal__weekdays-headings(
+  ref="vuecal_weekday_heading")
   template(v-for="(heading, i) in headings" :key="i")
     .vuecal__flex.vuecal__heading(
       v-if="!heading.hide"
@@ -31,7 +32,8 @@ export default {
     transitionDirection: { type: String, default: 'right' },
     weekDays: { type: Array, default: () => [] },
     switchToNarrowerView: { type: Function, default: () => {} },
-    unscheduledTime: { type: Array, default: [] }
+    unscheduledTime: { type: Array, default: [] },
+    // viewPortOffset: { type: Number, default: 0 },
   },
 
   methods: {
@@ -48,7 +50,10 @@ export default {
       name: heading.name,
       initials: heading.initials,
       ...(heading.today ? { today: heading.today } : {})
-    })
+    }),
+    onTimelineScroll(viewPortOffset) {
+      this.$refs['vuecal_weekday_heading'].style.top = `${viewPortOffset}px`
+    }
   },
 
   computed: {

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>