Merge pull request #5973 from nextcloud-libraries/fix/--header-height

fix: use `--header-height` instead of `50px` constant
nextcloud-libraries · Aug 19, 2024 · f6ca078 · f6ca078
2 parents ea3b8be + 57fdcc1
commit f6ca078
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 13 deletions.
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
@@ -27,7 +27,6 @@ $action-background-hover: rgba(127, 127, 127, .25);
 
 // various structure data used in the 
 // `AppNavigation` component
-$header-height: 50px;
 $navigation-width: 300px;
 
 // mobile breakpoint

diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
@@ -218,7 +218,7 @@ export default {
 .content {
 	box-sizing: border-box;
 	margin: var(--body-container-margin);
-	margin-top: 50px;
+	margin-top: var(--header-height);
 	display: flex;
 	width: calc(100% - var(--body-container-margin) * 2);
 	border-radius: var(--body-container-radius);

diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -358,7 +358,7 @@ $externalMargin: 8px;
 	&__wrapper {
 		position: fixed;
 		z-index: 2000;
-		top: 50px;
+		top: var(--header-height);
 		inset-inline-end: 0;
 		box-sizing: border-box;
 		margin: 0 $externalMargin;
@@ -388,7 +388,7 @@ $externalMargin: 8px;
 		width: 350px;
 		max-width: calc(100vw - 2 * $externalMargin);
 		min-height: calc(var(--default-clickable-area) * 1.5);
-		max-height: calc(100vh - 50px * 2);
+		max-height: calc(100vh - var(--header-height) * 2);
 		:deep(.empty-content) {
 			margin: 12vh 10px;
 		}

diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
@@ -853,7 +853,7 @@ export default {
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	height: $header-height;
+	height: var(--header-height);
 	overflow: hidden;
 	transition: opacity 250ms, visibility 250ms;
 
@@ -889,14 +889,14 @@ export default {
 			align-items: center;
 			justify-content: center;
 			box-sizing: border-box;
-			margin: calc(calc($header-height - var(--default-clickable-area)) / 2);
+			margin: calc(calc(var(--header-height) - var(--default-clickable-area)) / 2);
 			padding: 0;
 		}
 
 		.play-pause-icons {
 			position: relative;
-			width: $header-height;
-			height: $header-height;
+			width: var(--header-height);
+			height: var(--header-height);
 			margin: 0;
 			padding: 0;
 			cursor: pointer;
@@ -916,14 +916,14 @@ export default {
 				box-sizing: border-box;
 				width: var(--default-clickable-area);
 				height: var(--default-clickable-area);
-				margin: calc(calc($header-height - var(--default-clickable-area)) / 2);
+				margin: calc(calc(var(--header-height) - var(--default-clickable-area)) / 2);
 				cursor: pointer;
 				opacity: $opacity_normal;
 			}
 		}
 
 		&:deep() .action-item {
-			margin: calc(calc($header-height - var(--default-clickable-area)) / 2);
+			margin: calc(calc(var(--header-height) - var(--default-clickable-area)) / 2);
 
 			&--single {
 				box-sizing: border-box;
@@ -1014,7 +1014,7 @@ export default {
 
 	// We allow 90% max-height, but we need to ensure the header does not overlap the modal
 	// as the modal is centered, we need the space on top and bottom
-	$max-modal-height: min(90%, calc(100% - 2 * $header-height));
+	$max-modal-height: min(90%, calc(100% - 2 * var(--header-height)));
 
 	// Sizing
 	&--small {
@@ -1043,7 +1043,7 @@ export default {
 			width: 100%;
 			height: calc(100% - var(--header-height));
 			position: absolute;
-			top: $header-height;
+			top: var(--header-height);
 			border-radius: 0;
 		}
 	}
@@ -1056,7 +1056,7 @@ export default {
 			max-height: initial;
 			height: calc(100% - var(--header-height));
 			position: absolute;
-			top: $header-height;
+			top: var(--header-height);
 			border-radius: 0;
 		}
 	}