From 2e457dc39f7bb129d983cafa3253c8aa2b2f8c5d Mon Sep 17 00:00:00 2001
From: romankko2 <romokravarik@gmail.com>
Date: Fri, 23 Jun 2023 21:22:23 +0200
Subject: [PATCH] [responsive] feedback

---
 app/src/plugins/app/_theme/global.sass        |  7 +-
 .../tm@dashboard/_components/z-timeline.vue   |  2 +-
 .../projects/_components/a-project-filter.vue | 71 ++++++++++---------
 .../tasks/_components/a-tasks-filter.vue      | 11 +--
 .../teams/_components/a-team-filter.vue       | 13 +++-
 .../blocker/z-delete-blocker-modal.vue        |  2 +-
 .../z-delete-master-task-modal.vue            |  2 +-
 .../tm@modal/task-cell/z-show-menu-modal.vue  |  4 +-
 .../tm@modal/task/z-complete-task-modal.vue   |  2 +-
 .../tm@modal/task/z-delete-task-modal.vue     |  2 +-
 .../tm@modal/team/z-delete-team-modal.vue     |  4 +-
 .../_components/z-tasks-search.vue            |  8 ++-
 12 files changed, 75 insertions(+), 53 deletions(-)

diff --git a/app/src/plugins/app/_theme/global.sass b/app/src/plugins/app/_theme/global.sass
index 13abf77..288b5b0 100644
--- a/app/src/plugins/app/_theme/global.sass
+++ b/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
\ No newline at end of file
+		height: 40px !important
+
+@media (max-width: 534px)
+	.mobile-view
+		flex-direction: column
+		gap: 20px
\ No newline at end of file
diff --git a/app/src/plugins/tm@dashboard/_components/z-timeline.vue b/app/src/plugins/tm@dashboard/_components/z-timeline.vue
index e8c306f..ca8b43b 100644
--- a/app/src/plugins/tm@dashboard/_components/z-timeline.vue
+++ b/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
diff --git a/app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue b/app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue
index 5829e07..1c52ac4 100644
--- a/app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue
+++ b/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%
-  margin: 0
-  border-bottom: 1px solid rgba(33, 33, 33, 0.08)
-  gap: 25px
-  flex-wrap: wrap
-  position: sticky
-  top: 0
-  z-index: 9999
-  background: white
+	max-width: 100%
+	margin: 0
+	border-bottom: 1px solid rgba(33, 33, 33, 0.08)
+	gap: 20px
+	flex-wrap: wrap
+	position: sticky
+	top: 0
+	z-index: 9999
+	background: white
 
 .subheader-input
-  max-width: 250px !important
-  min-width: 250px
+	max-width: 250px !important
+	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)
-    display: none
-  &:deep(.v-selection-control)
-    height: 35px
-  &.disabled
-    pointer-events: none !important
+	&:deep(.v-input__details)
+		display: none
+	&:deep(.v-selection-control)
+		height: 35px
+	&.disabled
+		pointer-events: none !important
 
-  @media (max-width: 600px)
-  .subheader
-    gap: 15px
-    padding: 20px !important
+	@media (max-width: 600px)
+		.subheader
+			gap: 15px
+			padding: 20px !important
 
-  .subheader-input
-    max-width: 100% !important
-    min-width: 100%
-
-// TODO: ↑
+	.subheader-input
+		max-width: 100% !important
+		min-width: 100%
 
 .subheader-input.switch
-  max-width: 100px !important
-  min-width: 100px !important
+	max-width: 100px !important
+	min-width: 100px !important
 .subheader-input
-  &:deep(.v-selection-control--dirty .v-switch__track)
-    background: rgba(187, 134, 252, 0.38) !important
+	&:deep(.v-selection-control--dirty .v-switch__track)
+		background: rgba(187, 134, 252, 0.38) !important
 .switch-label
-  font-size: 12px
-  color: rgba(0, 0, 0, 0.6)
+	font-size: 12px
+	color: rgba(0, 0, 0, 0.6)
 </style>
diff --git a/app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue b/app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue
index c21c01b..04ebed1 100644
--- a/app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue
+++ b/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
-	width: 60px
+	height: 50px
+	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
-			--v-input-control-height: 60px !important
-			--v-input-padding-top: 19px !important		
+			height: 50px !important
+			--v-input-control-height: 50px !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
diff --git a/app/src/plugins/tm@dashboard/teams/_components/a-team-filter.vue b/app/src/plugins/tm@dashboard/teams/_components/a-team-filter.vue
index 79ade3b..c21d18c 100644
--- a/app/src/plugins/tm@dashboard/teams/_components/a-team-filter.vue
+++ b/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
-	width: 56px
+	height: 50px
+	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>
\ No newline at end of file
diff --git a/app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue b/app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue
index 18a6e02..132520f 100644
--- a/app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue
+++ b/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>
diff --git a/app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue
index 45703ee..083555c 100644
--- a/app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue
+++ b/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>
diff --git a/app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue b/app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue
index f261253..148cb7d 100644
--- a/app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue
+++ b/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>
\ No newline at end of file
diff --git a/app/src/plugins/tm@modal/task/z-complete-task-modal.vue b/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
index fdef47f..968bd03 100644
--- a/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
+++ b/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>
diff --git a/app/src/plugins/tm@modal/task/z-delete-task-modal.vue b/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
index 3a74599..6fa04d9 100644
--- a/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
+++ b/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>
diff --git a/app/src/plugins/tm@modal/team/z-delete-team-modal.vue b/app/src/plugins/tm@modal/team/z-delete-team-modal.vue
index 74ee582..f53cb90 100644
--- a/app/src/plugins/tm@modal/team/z-delete-team-modal.vue
+++ b/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>
\ No newline at end of file
diff --git a/app/src/plugins/tm@overview/_components/z-tasks-search.vue b/app/src/plugins/tm@overview/_components/z-tasks-search.vue
index ee2a806..854fd36 100644
--- a/app/src/plugins/tm@overview/_components/z-tasks-search.vue
+++ b/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>
\ No newline at end of file