From 0872ab704b10a18e578354b9394babfe40c2c225 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Sun, 18 Aug 2024 21:57:23 +0200 Subject: [PATCH 1/4] fix(NcModal): use --header-height instead of const Signed-off-by: Grigorii K. Shartsev --- src/assets/variables.scss | 1 - src/components/NcModal/NcModal.vue | 18 +++++++++--------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/assets/variables.scss b/src/assets/variables.scss index 4792fcf459..7f1fdd079c 100644 --- 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/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index 6bc86ad519..f2bb3de754 100644 --- 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; @@ -1018,7 +1018,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 { @@ -1047,7 +1047,7 @@ export default { width: 100%; height: calc(100% - var(--header-height)); position: absolute; - top: $header-height; + top: var(--header-height); border-radius: 0; } } @@ -1060,7 +1060,7 @@ export default { max-height: initial; height: calc(100% - var(--header-height)); position: absolute; - top: $header-height; + top: var(--header-height); border-radius: 0; } } From 2c13ea80079aab7a662ba8d287aef184291f7173 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Sun, 18 Aug 2024 21:57:42 +0200 Subject: [PATCH 2/4] fix(NcContent): use --header-height instead of const Signed-off-by: Grigorii K. Shartsev From 5708b9d18203fe8d82c0c8c07a14304dc05f2ef2 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Sun, 18 Aug 2024 21:58:02 +0200 Subject: [PATCH 3/4] fix(NcHeaderMenu): use --header-height instead of const Signed-off-by: Grigorii K. Shartsev --- src/components/NcHeaderMenu/NcHeaderMenu.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue index 1e4fc7fc11..13aa9736e4 100644 --- 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; } From d60422b282b5f698a95c659e4e7ab1aff850ad1f Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Mon, 19 Aug 2024 19:12:29 +0200 Subject: [PATCH 4/4] fix: Remove double calc Signed-off-by: Ferdinand Thiessen --- src/components/NcModal/NcModal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index f2bb3de754..b7e6e8d3aa 100644 --- a/src/components/NcModal/NcModal.vue +++ b/src/components/NcModal/NcModal.vue @@ -923,7 +923,7 @@ export default { } &:deep() .action-item { - margin: calc(calc(var(--header-height) - var(--default-clickable-area)) / 2); + margin: calc((var(--header-height) - var(--default-clickable-area)) / 2); &--single { box-sizing: border-box;