fix(style): adjust layout to new clickable area

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud · Jan 24, 2025 · 212ec51 · 212ec51
1 parent d6a93ea
commit 212ec51
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 30 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -142,16 +142,6 @@ export default {
  */
 $breakpoint-mobile: 1024px;
 
-// Adjust app-navigation-toggle position
-.app-navigation-toggle-wrapper {
-	top: 18px !important;
-	right: -15px !important;
-
-	@media only screen and (max-width: $breakpoint-mobile) {
-		right: 0 !important;
-	}
-}
-
 // Hack for https://github.com/nextcloud/nextcloud-vue/issues/1384
 body {
 	min-height: 100%;

diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
@@ -186,26 +186,26 @@ export default {
 $breakpoint-mobile: 1024px;
 
 .header {
-	padding: 12px 15px 12px 59px;
+	padding: calc(2* var(--default-grid-baseline));
+	padding-left: calc(4 * var(--default-grid-baseline) + var(--default-clickable-area)); // leave space for the app-nav-toggle
 	position: sticky;
-	top: 0;
 	background-color: var(--color-background-dark);
 	z-index: 1000;
 	display: flex;
 
 	@media only screen and (max-width: $breakpoint-mobile) {
 		padding-right: 0;
-		padding-left: 44px;
+		padding-left: calc(2 * var(--default-grid-baseline) + var(--default-clickable-area));
 	}
 
 	&__input {
 		position: relative;
-		width: calc(100% - 88px);
-	}
+		width: 100%;
+		margin-right: calc(2 * var(--default-grid-baseline));
 
-	.sortorder,
-	.filter {
-		margin-top: 6px;
+		.input-field {
+			margin-block-start: 0 !important;
+		}
 	}
 
 	.filter {

diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
@@ -769,7 +769,8 @@ $breakpoint-mobile: 1024px;
 
 			&__main-wrapper,
 			&__input {
-				height: 44px !important;
+				// prevent text jump on hover
+				--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px)) !important;
 			}
 
 			&__input {
@@ -828,7 +829,7 @@ $breakpoint-mobile: 1024px;
 		flex-direction: row;
 		flex-wrap: nowrap;
 		align-items: center;
-		height: 44px;
+		height: var(--default-clickable-area);
 		position: relative;
 		background-color: var(--color-main-background);
 		border-top: 1px solid var(--color-border);
@@ -860,11 +861,10 @@ $breakpoint-mobile: 1024px;
 				.summary {
 					cursor: text;
 					display: inline-flex;
-					padding: 10px 10px 10px 0;
 					overflow: hidden;
 
 					span {
-						line-height: 24px;
+						line-height: var(--default-clickable-area);
 						overflow: hidden;
 						text-overflow: ellipsis;
 
@@ -1028,10 +1028,10 @@ $breakpoint-mobile: 1024px;
 	}
 
 	&__subtasks {
-		margin-left: 44px;
+		margin-left: var(--default-clickable-area);
 
 		@media only screen and (max-width: $breakpoint-mobile) {
-			margin-left: 14px;
+			margin-left: calc(0.5 * var(--default-clickable-area));
 		}
 	}
 }

diff --git a/src/components/TaskCheckbox.vue b/src/components/TaskCheckbox.vue
@@ -110,8 +110,8 @@ $blue_due: #4271a6; // due dates and low importance
 
 .task-checkbox {
 	display: flex;
-	height: 44px;
-	width: 44px;
+	height: var(--default-clickable-area);
+	width: var(--default-clickable-area);
 	justify-content: center;
 	flex-shrink: 0;
 
@@ -128,9 +128,9 @@ $blue_due: #4271a6; // due dates and low importance
 		+ label {
 			display: flex;
 			align-items: center;
-			height: 44px;
-			width: 44px;
-			padding: 11px;
+			height: var(--default-clickable-area);
+			width: var(--default-clickable-area);
+			justify-content: center;
 
 			.material-design-icon {
 				cursor: pointer;

diff --git a/src/views/AppContent/task-list.scss b/src/views/AppContent/task-list.scss
@@ -8,7 +8,7 @@ $breakpoint-mobile: 1024px;
 
 .app-content .task-list {
 	width: 100%;
-	padding: 0 15px;
+	padding: 0 calc(2 * var(--default-grid-baseline));
 
 	@media only screen and (max-width: $breakpoint-mobile) {
 		padding: 0;