[timeline] short task

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",
+				"title": "Kratky 30min asdk jasdbhj akhsdh askbsd abjksdk bjas",
 				"project_code": "CO-2201",
 				"master_task_color": "#f27e57"
 			},

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

@@ -14,6 +14,7 @@
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
 			:time-cell-height="70"
+			:snap-to-time="5"
 			:min-cell-width="300"
 			@ready="onReady()"
 			@view-change="weekChanged"
@@ -47,11 +48,11 @@
 			</template>
 
 			<template v-slot:event="{ event }">
-				<div class="event-content-wrapper w-100 h-100 d-flex flex-column justify-space-between">
+				<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>
-						<small v-if="(event.project_code && (event.end.getTime() - event.start.getTime() >= 7200000) && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
+						<small v-if="(event.project_code && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
 						<h3>{{ event.title }}</h3>
-						<div v-if="(event.end.getTime() - event.start.getTime() >= 7200000) || focusedEventId == event.task_id" class="d-flex align-center event-details">
+						<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>
@@ -59,7 +60,7 @@
 						</div>
 					</div>
 
-					<div class="event-footer d-flex" v-if="(event.end.getTime() - event.start.getTime() >= 3600000) || focusedEventId == event.task_id">
+					<div class="event-footer d-flex">
 						<v-btn rounded class="event-footer-button me-2" @click="this.showCompleteModal = {task: event}"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
 						<v-btn rounded class="event-footer-button me-2" @click="editTask(event.id)" :style="{opacity: 0.3}"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
 						<v-btn rounded class="event-footer-button me-2" @click="this.showDeleteModal = {task: event}"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
@@ -168,6 +169,10 @@ export default {
 			return event.name.charAt(0).toUpperCase() + event.surname.charAt(0).toUpperCase()
 		},
 
+		getEventLenght(event) {
+			return event.end.getTime() - event.start.getTime()
+		},
+
 		taskClicked(task) {
 			if (task.end.getTime() - task.start.getTime() <= 3600000) {
 				console.log("task", task)
@@ -283,12 +288,41 @@ export default {
 				padding: 20px 10px
 				text-align: left
 				background: rgba(248, 248, 248, 1)
+				min-height: 35px
+
+				&:has(.mini-event)
+					padding: 10px !important
+
+				&.vuecal__event--focus
+					z-index: 100 !important
+					min-height: 300px !important
+
+				&:not(.vuecal__event--focus)
+					.short-event
+						.project-code
+							display: none !important
+
+						h3
+							font-size: 16px !important
+
+					.mini-event
+
+						h3
+							font-size: 14px !important
+					
+						.event-initials-wrapper
+							display: none !important
+
+					.micro-event
+						.event-footer
+							display: none !important
 
 				.project-code
 					margin: 0 0 20px
 					display: block
 
 				h3
+					font-size: 18px
 					font-weight: 400
 					color: Black
 					margin: 0 0 10px
@@ -296,6 +330,9 @@ export default {
 				small
 					color: black
 
+				.event-initials-wrapper
+					margin-bottom: 20px
+
 				.event-initials
 					height: 30px
 					width: 30px
@@ -323,10 +360,6 @@ export default {
 							width: 18px
 
 				// &:hover,
-				&:focus
-					z-index: 100 !important
-					min-height: 200px !important
-
 				&.event-blocker
 					background: #B00020 !important