fix(style): adjust sidebar body layout

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud · Jan 26, 2025 · a59e929 · a59e929
1 parent e24e8fa
commit a59e929
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 24 deletions.
diff --git a/src/components/AppSidebar/MultiselectItem.vue b/src/components/AppSidebar/MultiselectItem.vue
@@ -111,9 +111,11 @@ export default {
 	display: flex;
 	border-bottom: 1px solid var(--color-border);
 	width: 100%;
+	padding: 0 6px;
 
 	:deep(.v-select.select) {
 		width: 100%;
+		margin: 0;
 
 		&.vs--disabled .vs {
 			&__search,
@@ -127,10 +129,10 @@ export default {
 
 		.placeholder__icon {
 			display: flex;
-			height: 44px;
-			width: 44px;
+			height: var(--default-clickable-area);
+			width: var(--default-clickable-area);
 			justify-content: center;
-			flex-basis: 44px;
+			flex-basis: var(--default-clickable-area);
 			flex-shrink: 0;
 		}
 
@@ -144,15 +146,15 @@ export default {
 
 			&__selected-options {
 				width: calc(100% - 35px);
-				height: 44px;
+				height: var(--default-clickable-area);
 				margin:  0;
 				padding: 0;
 				border: none;
 			}
 
 			&__selected {
 				width: 100%;
-				height: 44px;
+				height: var(--default-clickable-area);
 				margin:  0;
 				padding: 0;
 				border: none;
@@ -176,8 +178,8 @@ export default {
 			&__search {
 				padding-left: 44px;
 				margin: 0;
-				height: 44px !important;
-				line-height: 44px;
+				height: var(--default-clickable-area) !important;
+				line-height: var(--default-clickable-area);
 				font-weight: bold;
 				position: absolute;
 				width: 100%;

diff --git a/src/components/AppSidebar/MultiselectOption.vue b/src/components/AppSidebar/MultiselectOption.vue
@@ -76,10 +76,10 @@ export default {
 
 	&__icon {
 		display: flex;
-		height: 44px;
-		width: 44px;
+		height: var(--default-clickable-area);
+		width: var(--default-clickable-area);
 		justify-content: center;
-		flex-basis: 44px;
+		flex-basis: var(--default-clickable-area);
 		flex-shrink: 0;
 	}
 
@@ -89,6 +89,7 @@ export default {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		margin-left: 4px;
 	}
 }
 </style>
diff --git a/src/components/AppSidebar/SliderItem.vue b/src/components/AppSidebar/SliderItem.vue
@@ -117,6 +117,7 @@ export default {
 	width: 100%;
 	color: var(--color-text-lighter);
 	display: flex;
+	padding: 0 6px;
 
 	& * {
 		cursor: pointer;
@@ -125,16 +126,17 @@ export default {
 	.item {
 		&__content {
 			display: flex;
-			line-height: 44px;
+			line-height: var(--default-clickable-area);
 			min-width: 0;
 			flex-grow: 1;
+			gap: 0 4px;
 
 			.content {
 				&__icon {
 					display: flex;
-					height: 44px;
-					width: 44px;
-					min-width: 44px;
+					height: var(--default-clickable-area);
+					width: var(--default-clickable-area);
+					min-width: var(--default-clickable-area);
 					justify-content: center;
 
 					.material-design-icon__svg {
@@ -173,6 +175,7 @@ export default {
 						flex-basis: 100px;
 						border: medium none;
 						box-shadow: none;
+						margin: 0;
 						margin-left: 5px;
 					}
 				}

diff --git a/src/components/AppSidebar/TagsItem.vue b/src/components/AppSidebar/TagsItem.vue
@@ -104,27 +104,28 @@ export default {
 	border-bottom: 1px solid var(--color-border);
 	width: 100%;
 	color: var(--color-text-lighter);
+	padding: 0 6px;
 
 	.multiselect__icon {
 		display: flex;
-		height: 44px;
-		width: 44px;
+		height: var(--default-clickable-area);
+		width: var(--default-clickable-area);
 		justify-content: center;
-		flex-basis: 44px;
+		flex-basis: var(--default-clickable-area);
 		flex-shrink: 0;
 	}
 
 	:deep(.v-select.select) {
 		width: 100%;
-		margin-left: -44px;
+		margin: 0;
+		margin-left: calc(4px - var(--default-clickable-area));
 
 		.vs {
 			&__dropdown-toggle {
 				margin:  0;
 				padding: 0;
 				border: none;
-				margin-left: 44px;
-				margin-bottom: 4px;
+				margin-left: var(--default-clickable-area);
 				outline: none !important;
 			}
 

diff --git a/src/components/AppSidebar/TextItem.vue b/src/components/AppSidebar/TextItem.vue
@@ -113,6 +113,7 @@ export default {
 	width: 100%;
 	color: var(--color-text-lighter);
 	display: flex;
+	padding: 0 6px;
 
 	& * {
 		cursor: pointer;
@@ -121,16 +122,17 @@ export default {
 	.item {
 		&__content {
 			display: flex;
-			line-height: 44px;
+			line-height: var(--default-clickable-area);
 			min-width: 0;
 			flex-grow: 1;
+			gap: 0 4px;
 
 			.content {
 				&__icon {
 					display: flex;
-					height: 44px;
-					width: 44px;
-					min-width: 44px;
+					height: var(--default-clickable-area);
+					width: var(--default-clickable-area);
+					min-width: var(--default-clickable-area);
 					justify-content: center;
 
 					.material-design-icon__svg {
@@ -155,6 +157,7 @@ export default {
 
 					input {
 						flex-grow: 1;
+						margin: 0;
 					}
 				}
 			}