[timeline] refactor

app/public/mock/v1/overview/tasks.GET.json

@@ -51,7 +51,7 @@
 				"task_id": 2,
 				"starts_at": "2022-12-12T08:30:00+00:00",
 				"ends_at": "2022-12-12T09:00:00+00:00",
-				"title": "Kratky 30min asdk jasdbhj akhsdh askbsd abjksdk bjas",
+				"title": "Kratky 30min Lorem ipsum dolor sit amet, consectetur adipiscing e",
 				"project_code": "CO-2201",
 				"master_task_color": "#f27e57"
 			},

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

@@ -2,6 +2,7 @@
 .vuecal__event(
   :class="eventClasses"
   :style="eventStyles"
+  :eventId="`event-id-${event.id}`"
   tabindex="0"
   @focus="focusEvent"
   @keypress.enter.stop="onEnterKeypress"

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

@@ -13,8 +13,8 @@
 			:unscheduledTime="calData.unscheduled_times"
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
-			:time-cell-height="70"
+			:time-cell-height="100"
-			:snap-to-time="5"
+			:snap-to-time="15"
 			:min-cell-width="300"
 			@ready="onReady()"
 			@view-change="weekChanged"
@@ -48,15 +48,15 @@
 			</template>
 
 			<template v-slot:event="{ event }">
-				<div class="event-wrapper w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 12600000, 'mini-event' : getEventLenght(event) <= 7200000, 'micro-event' : getEventLenght(event) <= 3600000}">
+				<div class="event-wrapper w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}">
-					<div>
+					<div class="event-content">
 						<small v-if="(event.project_code && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
 						<h3>{{ event.title }}</h3>
 						<div class="d-flex align-center event-details event-initials-wrapper">
 							<div class="event-initials d-flex justify-center align-center">
 								<small>{{ getUserInitials(event) }}</small>
 							</div>
-							<small>{{ event.start.toLocaleDateString('sk-SK') }}</small>
+							<small class="event-initials-date">{{ event.start.toLocaleDateString('sk-SK') }}</small>
 						</div>
 					</div>
 
@@ -206,20 +206,34 @@ export default {
 				&::-webkit-scrollbar
 					display: none
 
-			.vuecal__body
+				&.week-view
-				-ms-overflow-style: none
+				border-left: 1px solid rgba(0, 0, 0, .1)
-				scrollbar-width: none
+				padding-left: 20px
-				&::-webkit-scrollbar
-					display: none
 
-			.vuecal__now-line
+			.vuecal__flex
-				display: none !important
+				flex-wrap: nowrap !important
 
-			.weekday-label
-				justify-content: start !important
-				font-size: 24px
-				font-weight: 700
 
+			// TIME COLUMN
+			.vuecal__time-column
+				width: 150px
+				box-shadow: none !important
+
+				.time-column-line
+					width: 40px
+					height: 0
+					border: 1px solid rgba(33, 33, 33, 0.08)
+					margin-left: 10px
+
+			@media (max-width: 450px)
+				.vuecal__time-column
+					width: 70px
+
+					.time-column-line
+						width: 10px
+
+
+			// HEADING 
 			.vuecal__weekdays-headings,
 			.vuecal__cell:before
 				border: none
@@ -229,6 +243,11 @@ export default {
 				min-height: 100%
 				padding-right: 20px
 
+				.weekday-label
+					justify-content: start !important
+					font-size: 24px
+					font-weight: 700
+
 				.unscheduled-time
 					background: rgba(0, 0, 0, 0.04)
 					border-radius: 24px
@@ -251,53 +270,46 @@ export default {
 							color: white
 
 
-			.vuecal__cells.week-view
+			// BODY
-				border-left: 1px solid rgba(0, 0, 0, .1)
+			.vuecal__body
-				padding-left: 20px
+				-ms-overflow-style: none
+				scrollbar-width: none
+				&::-webkit-scrollbar
+					display: none
 
-			.vuecal__time-column
+				.vuecal__now-line
-				width: 150px
+					display: none !important
-				box-shadow: none !important
-
-				.time-column-line
-					width: 40px
-					height: 0
-					border: 1px solid rgba(33, 33, 33, 0.08)
-					margin-left: 10px
-
-			@media (max-width: 450px)
-				.vuecal__time-column
-					width: 70px
-
-					.time-column-line
-						width: 10px
-
-			.vuecal__flex
-				flex-wrap: nowrap !important
 
 				.vuecal__cell
 					padding: 10px 20px 10px 0px
 
 				.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
 				.vuecal__cell--current:not(.vuecal__cell--today),
-			.vuecal__cell--today
+				.vuecal__cell--today,
+				.vuecal__cell--highlighted,
+				.vuecal__cell--selected
 					background-color: white
 
+				// EVENT
 				.vuecal__event
 					border-radius: 16px
 					padding: 20px 10px
 					text-align: left
 					background: rgba(248, 248, 248, 1)
-				min-height: 35px
+					min-height: 40px
-
+					transition: min-height .4s, height .4s, box-shadow .4s
-				&:has(.mini-event)
-					padding: 10px !important
 
 					&.vuecal__event--focus
 						z-index: 100 !important
-					min-height: 300px !important
+						min-height: 250px !important
 
 					&:not(.vuecal__event--focus)
+						&:has(.short-event)
+							padding: 10px !important
+
+						&:has(.micro-event)
+							padding: 5px 10px !important
+
 						.short-event
 							.project-code
 								display: none !important
@@ -306,17 +318,47 @@ export default {
 								font-size: 16px !important
 
 						.mini-event
+							.event-content
+								display: flex
+								align-items: center
+								flex-wrap: nowrap
+								justify-content: space-between
+								width: 100%
+
+							.event-initials-wrapper
+								margin-bottom: 0
+								.event-initials
+									margin-right: 0 
 
 							h3
 								font-size: 14px !important
+								text-overflow: ellipsis
+								width: calc( 100% - 35px )
+								white-space: nowrap
+								overflow: hidden
+								margin: 0
 							
-						.event-initials-wrapper
+							.event-initials-date
 								display: none !important
 
 						.micro-event
+
 							.event-footer
 								display: none !important
 
+					&.event-blocker
+						background: #B00020 !important
+
+						h3,
+						.event-details *
+							color: white !important
+
+						.event-details .event-initials
+							border: 1px solid white
+
+						.event-footer
+							border-top: 1px solid rgba(255, 255, 255, 0.19)
+
 					.project-code
 						margin: 0 0 20px
 						display: block
@@ -326,6 +368,7 @@ export default {
 						font-weight: 400
 						color: Black
 						margin: 0 0 10px
+						max-height: 100%
 
 					small
 						color: black
@@ -358,18 +401,4 @@ export default {
 
 							img
 								width: 18px
-
-				// &:hover,
-				&.event-blocker
-					background: #B00020 !important
-
-					h3,
-					.event-details *
-						color: white !important
-
-					.event-details .event-initials
-						border: 1px solid white
-
-					.event-footer
-						border-top: 1px solid rgba(255, 255, 255, 0.19)
 </style>