[responsive] feedback

app/src/plugins/app/_theme/global.sass

@@ -103,4 +103,9 @@ input[type="time"]::-webkit-calendar-picker-indicator
 
 .v-row.subheader
 	.v-input
-		height: 40px !important
+		height: 40px !important
+
+@media (max-width: 534px)
+	.mobile-view
+		flex-direction: column
+		gap: 20px

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

@@ -380,7 +380,7 @@ export default {
 						margin-left: 12px
 
 						h1
-							font-size: 16.5px
+							font-size: 14px
 
 						p
 							font-weight: 400

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

@@ -86,49 +86,52 @@ export default {
 	}
 }
 </script>
+
 <style lang="sass" scoped>
-// Kravarik: TODO zjednotit styly ikon v globalnom sass subore
-// TODO: ↓
 .subheader
-  max-width: 100%
+	max-width: 100%
-  margin: 0
+	margin: 0
-  border-bottom: 1px solid rgba(33, 33, 33, 0.08)
+	border-bottom: 1px solid rgba(33, 33, 33, 0.08)
-  gap: 25px
+	gap: 20px
-  flex-wrap: wrap
+	flex-wrap: wrap
-  position: sticky
+	position: sticky
-  top: 0
+	top: 0
-  z-index: 9999
+	z-index: 9999
-  background: white
+	background: white
 
 .subheader-input
-  max-width: 250px !important
+	max-width: 250px !important
-  min-width: 250px
+	min-width: 250px
+	
+	&:deep(.v-input__control)
+		.v-field
+			height: 50px !important
+			--v-input-control-height: 50px !important
+			--v-input-padding-top: 15px !important	
 
-  &:deep(.v-input__details)
+	&:deep(.v-input__details)
-    display: none
+		display: none
-  &:deep(.v-selection-control)
+	&:deep(.v-selection-control)
-    height: 35px
+		height: 35px
-  &.disabled
+	&.disabled
-    pointer-events: none !important
+		pointer-events: none !important
 
-  @media (max-width: 600px)
+	@media (max-width: 600px)
-  .subheader
+		.subheader
-    gap: 15px
+			gap: 15px
-    padding: 20px !important
+			padding: 20px !important
 
-  .subheader-input
+	.subheader-input
-    max-width: 100% !important
+		max-width: 100% !important
-    min-width: 100%
+		min-width: 100%
-
-// TODO: ↑
 
 .subheader-input.switch
-  max-width: 100px !important
+	max-width: 100px !important
-  min-width: 100px !important
+	min-width: 100px !important
 .subheader-input
-  &:deep(.v-selection-control--dirty .v-switch__track)
+	&:deep(.v-selection-control--dirty .v-switch__track)
-    background: rgba(187, 134, 252, 0.38) !important
+		background: rgba(187, 134, 252, 0.38) !important
 .switch-label
-  font-size: 12px
+	font-size: 12px
-  color: rgba(0, 0, 0, 0.6)
+	color: rgba(0, 0, 0, 0.6)
 </style>

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

@@ -108,8 +108,8 @@ export default {
 
 .subheader-icon-button
 	border: 1px solid #ABABAB
-	height: 60px
+	height: 50px
-	width: 60px
+	width: 50px
 	min-width: auto !important
 	padding: 0
 	margin: 0
@@ -134,9 +134,9 @@ export default {
 
 	&:deep(.v-input__control)
 		.v-field
-			height: 60px !important
+			height: 50px !important
-			--v-input-control-height: 60px !important
+			--v-input-control-height: 50px !important
-			--v-input-padding-top: 19px !important		
+			--v-input-padding-top: 15px !important		
 
 	&:deep(.v-input__details)
 		display: none
@@ -156,6 +156,7 @@ export default {
 	.subheader-input
 		max-width: 100% !important
 		min-width: 100%
+		margin: 0 10px 10px 0
 
 	.date-wrapper
 		flex-wrap: wrap

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

@@ -121,8 +121,8 @@ export default {
 
 .subheader-icon-button
 	border: 1px solid #ABABAB
-	height: 56px
+	height: 50px
-	width: 56px
+	width: 50px
 	min-width: auto !important
 	padding: 0
 	margin: 0
@@ -139,6 +139,13 @@ export default {
 .subheader-input
 	max-width: 250px !important
 	min-width: 250px
+	height: 50px !important
+
+	&:deep(.v-input__control)
+		.v-field
+			height: 50px !important
+			--v-input-control-height: 50px !important
+			--v-input-padding-top: 15px !important		
 
 	&:deep(.v-input__details)
 		display: none
@@ -159,6 +166,7 @@ export default {
 	.subheader-input
 		max-width: 100% !important
 		min-width: 100%
+		margin: 0 10px 10px 0
 
 	.date-wrapper
 		flex-wrap: wrap
@@ -170,5 +178,4 @@ export default {
 			margin: 0
 			flex: 1 1 calc( 50% - 5px )
 			height: 40px
-
 </style>

app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue

@@ -11,7 +11,7 @@
 					class="mb-15"
 				></v-icon>
 			</div>
-			<v-card-actions class="mt-10 d-flex justify-start align-center">
+			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half" variant="flat" @click="deleteBlocker()">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>

app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue

@@ -11,7 +11,7 @@
 					class="mb-15"
 				></v-icon>
 			</div>
-			<v-card-actions class="mt-10 d-flex justify-start align-center">
+			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half" variant="flat" @click="deleteMasterTask()">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>

app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue

@@ -6,7 +6,7 @@
 				<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
 			</div>
 
-			<v-card-actions class="mt-10 d-flex justify-start align-center">
+			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half outline" @click.stop="createTask()"
 					>TASK</v-btn
 				>
@@ -59,4 +59,4 @@ export default {
 		},
 	},
 }
-</script>
+</script>

app/src/plugins/tm@modal/task/z-complete-task-modal.vue

@@ -9,7 +9,7 @@
 					size="large"
 				></v-icon>
 			</div>
-			<v-card-actions class="mt-10 d-flex justify-start align-center">
+			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half" variant="flat" @click="complete()">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="visible = false">ZRUŠIŤ</v-btn>
 			</v-card-actions>

app/src/plugins/tm@modal/task/z-delete-task-modal.vue

@@ -11,7 +11,7 @@
 					class="mb-15"
 				></v-icon>
 			</div>
-			<v-card-actions class="mt-10 d-flex justify-start align-center">
+			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half" variant="flat" @click="deleteTask()">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>

app/src/plugins/tm@modal/team/z-delete-team-modal.vue

@@ -8,7 +8,7 @@
 				<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
 			</div>
 
-			<v-card-actions class="mt-10 d-flex justify-start align-center">
+			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half" variant="flat" @click="deleteTeam()">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>
@@ -49,4 +49,4 @@ export default {
 		}
 	}
 }
-</script>
+</script>

app/src/plugins/tm@overview/_components/z-tasks-search.vue

@@ -72,6 +72,12 @@ export default {
 	min-width: 250px
 	height: 56px
 
+	&:deep(.v-input__control)
+		.v-field
+			height: 50px !important
+			--v-input-control-height: 50px !important
+			--v-input-padding-top: 15px !important	
+
 	&:deep(.v-input__details)
 		display: none
 
@@ -82,8 +88,8 @@ export default {
 	.subheader
 		gap: 15px
 		padding: 20px !important
-
 	.subheader-input
 		max-width: 100% !important
 		min-width: 100%
+		margin-bottom: 15px
 </style>