[task overview] styl

app/src/plugins/app/_config/main.ts

@@ -30,7 +30,7 @@ import '@/plugins/app/_theme/index.sass'
 import 'vue-loading-overlay/dist/vue-loading.css'
 
 // vue cal
-// import VueCal from '@/plugins/app@vendor/vue-cal/index'
+import VueCal from '@/plugins/app@vendor/vue-cal/index'
 
 loadFonts()
 
@@ -97,7 +97,7 @@ createApp(App)
 	.use(vuetify)
 	.use(wToast)
 	.use(i18n, options)
-	// .use(VueCal)
+	.use(VueCal)
 	.use(loader, {
 		color: '#6200EE'
 	})

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

@@ -25,6 +25,9 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.main-content
+	overflow-y: scroll
+
 .split-pane-right-side
 	width: 100vw
 	max-width: 100vw

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

@@ -371,6 +371,8 @@ export default class EventUtils {
       longestStreak = Math.max(this.getOverlapsStreak(item, _cellOverlaps), longestStreak)
     }
 
+    // console.log([_cellOverlaps, longestStreak])
+
     return [_cellOverlaps, longestStreak]
   }
 

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

@@ -45,8 +45,7 @@ export default {
 	max-width: 100%
 	margin: 0
 	border-bottom: 1px solid rgba(33, 33, 33, 0.08)
-	border-top: 1px solid rgba(33, 33, 33, 0.08)
+	gap: 25px
-	gap: 30px
 	flex-wrap: wrap
 
 .subheader-icon-button
@@ -68,7 +67,7 @@ export default {
 
 .subheader-input
 	max-width: 250px !important
-	min-width: 180px
+	min-width: 250px
 
 	&:deep(.v-input__details)
 		display: none
@@ -78,5 +77,25 @@ export default {
 
 
 .date-wrapper
-	flex: 0 1 402px
+	flex: 0 1 385px
+
+@media (max-width: 1316px)
+	.date-wrapper
+		order: 3
+
+@media (max-width: 600px)
+	.subheader-input
+		max-width: 100% !important
+		min-width: 100%
+
+	.date-wrapper
+		flex-wrap: wrap
+		gap: 10px
+		flex: 1 1 100%
+
+		.subheader-icon-button
+			order: 3
+			margin: 0
+			flex: 1 1 calc( 50% - 5px )
+
 </style>

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

@@ -59,40 +59,40 @@ export default {
 		return {
 			events: [
 				{
-					start: '2022-11-21 8:00',
+					start: '2022-11-28 8:00',
-					end: '2022-11-21 13:30',
+					end: '2022-11-28 13:30',
 					title: 'Running Marathon',
 					content: '<i class="icon material-icons">directions_run</i>',
 					class: 'red',
 					id: 1
 				},
 				{
-					start: '2022-11-21 9:00',
+					start: '2022-11-28 9:00',
-					end: '2022-11-21 11:00',
+					end: '2022-11-28 11:00',
 					title: 'Drink water!',
 					content: '<i class="icon material-icons">local_drink</i>',
 					class: 'green',
 					id: 2
 				},
 				{
-					start: '2022-11-21 10:00',
+					start: '2022-11-28 10:00',
-					end: '2022-11-21 12:00',
+					end: '2022-11-28 12:00',
 					title: 'Trip to India',
 					content: '<i class="icon material-icons">flight</i>',
 					class: 'blue',
 					id: 3
 				},
 				{
-					start: '2022-11-21 13:30',
+					start: '2022-11-28 13:30',
-					end: '2022-11-21 16:00',
+					end: '2022-11-28 16:00',
 					title: 'Trip to India',
 					content: '<i class="icon material-icons">flight</i>',
 					class: 'blue',
 					id: 3
 				},
 				{
-					start: '2022-11-22 11:00',
+					start: '2022-11-29 11:00',
-					end: '2022-11-22 13:00',
+					end: '2022-11-29 13:00',
 					title: 'Trip to India',
 					content: '<i class="icon material-icons">flight</i>',
 					class: 'yellow',
@@ -143,6 +143,7 @@ export default {
 
 	.vuecal
 		transform: scale(1)
+		box-shadow: none !important
 
 	::v-deep
 
@@ -172,6 +173,10 @@ export default {
 		.vuecal__cell:before
 			border: none
 
+		.vuecal__cells.week-view
+			border-left: 1px solid rgba(0, 0, 0, .1)
+			padding-left: 20px
+
 		.vuecal__time-column
 			width: 150px
 			box-shadow: none !important
@@ -182,6 +187,13 @@ export default {
 				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
 
@@ -189,7 +201,8 @@ export default {
 			padding: 10px 10px 10px 0px 
 
 		.vuecal__cell--today
-			background-color: rgba(0, 0, 0, .02) !important
+			// background-color: rgba(0, 0, 0, .02) !important
+			background-color: white
 
 		.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
 		.vuecal__cell--current:not(.vuecal__cell--today)