From 983c48626541c8ead4fcdbfafea6a99347974fe5 Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Mon, 6 Feb 2023 15:50:58 +0100 Subject: [PATCH 1/4] Css-fix: tabNav + breadcrumb --- core/src/App.svelte | 38 +++++++++++++++++++++------------ core/src/styles/_variables.scss | 3 +-- 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/core/src/App.svelte b/core/src/App.svelte index 86a51f0a07..9d8c46459a 100644 --- a/core/src/App.svelte +++ b/core/src/App.svelte @@ -2056,6 +2056,7 @@ --luigi__multi-app-dropdown--width: 60vw; --luigi__breadcrumb--height: 2.75rem; --luigi__shellbar--height: 2.75rem; + --luigi__horizontal-nav--height: 2.75rem; } :global(html) { @@ -2073,27 +2074,28 @@ } :global(.fioriScrollbars) { - scrollbar-color: var(--sapScrollBar_FaceColor) var(--sapScrollBar_TrackColor); + scrollbar-color: var(--sapScrollBar_FaceColor) + var(--sapScrollBar_TrackColor); & :global(::-webkit-scrollbar:horizontal) { - height: var(--sapScrollBar_Dimension); + height: var(--sapScrollBar_Dimension); } & :global(::-webkit-scrollbar:vertical) { - width: var(--sapScrollBar_Dimension); + width: var(--sapScrollBar_Dimension); } & :global(::-webkit-scrollbar) { - background-color: var(--sapScrollBar_TrackColor); + background-color: var(--sapScrollBar_TrackColor); } & :global(::-webkit-scrollbar-thumb) { - background-color: var(--sapScrollBar_FaceColor); + background-color: var(--sapScrollBar_FaceColor); } & :global(::-webkit-scrollbar-thumb:hover) { - background-color: var(--sapScrollBar_Hover_FaceColor); + background-color: var(--sapScrollBar_Hover_FaceColor); } & :global(::-webkit-scrollbar-corner) { - background-color: var(--sapScrollBar_TrackColor); + background-color: var(--sapScrollBar_TrackColor); } & :global(::-webkit-scrollbar-thumb) { - border-radius: var(--sapElement_BorderCornerRadius); + border-radius: var(--sapElement_BorderCornerRadius); } } @@ -2134,6 +2136,18 @@ top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height)); } + :global(.lui-breadcrumb #tabsContainer) { + top: calc( + var(--luigi__shellbar--height) + var(--luigi__breadcrumb--height) + ); + } + :global(.lui-breadcrumb .iframeContainer.iframeContainerTabNav) { + top: calc( + var(--luigi__shellbar--height) + var(--luigi__breadcrumb--height) + + var(--luigi__horizontal-nav--height) + ); + border: 1px solid red; + } .iframeContainer, .spinnerContainer { position: absolute; @@ -2173,16 +2187,12 @@ height: 100%; } - :global(.lui-breadcrumb) .iframeContainerTabNav { + .iframeContainerTabNav { top: calc( - #{$topNavHeight} + #{$topNavHeightTab} + var(--luigi__breadcrumb--height) + var(--luigi__shellbar--height) + var(--luigi__horizontal-nav--height) ); } - .iframeContainerTabNav { - top: calc(#{$topNavHeight} + #{$topNavHeightTab}); - } - .iframeContainer:focus { outline: none; } diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss index c4ee3e0d67..59c6158896 100644 --- a/core/src/styles/_variables.scss +++ b/core/src/styles/_variables.scss @@ -2,8 +2,7 @@ $mobileMinWidth: 375px; $desktopMinWidth: 600px; $desktopMaxWidth: 900px; $topNavHeight: var(--luigi__shellbar--height); -$topNavHeightTab: 2.75rem; $leftNavWidthCollapsed: 2.75rem; $zindex-dialog-box: 1000; $globalNavWidth: 69px; -$navHeaderHeight: 3.25rem; +$navHeaderHeight: 3.25rem; \ No newline at end of file From fa15f80016a80b422ce2dd10540e820b4aeadf47 Mon Sep 17 00:00:00 2001 From: Johannes Doberer Date: Wed, 8 Feb 2023 17:50:31 +0100 Subject: [PATCH 2/4] Update core/src/App.svelte Co-authored-by: Ndricim Rrapi --- core/src/App.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/core/src/App.svelte b/core/src/App.svelte index 9d8c46459a..78647a0e9b 100644 --- a/core/src/App.svelte +++ b/core/src/App.svelte @@ -2146,7 +2146,6 @@ var(--luigi__shellbar--height) + var(--luigi__breadcrumb--height) + var(--luigi__horizontal-nav--height) ); - border: 1px solid red; } .iframeContainer, .spinnerContainer { From d168c62e6a6ad692f0a32d7a17c620ee72f62429 Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Fri, 10 Feb 2023 12:51:34 +0100 Subject: [PATCH 3/4] docs --- docs/luigi-ux-features.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/luigi-ux-features.md b/docs/luigi-ux-features.md index bccad7f0f9..5f969f5a7f 100644 --- a/docs/luigi-ux-features.md +++ b/docs/luigi-ux-features.md @@ -62,6 +62,12 @@ You can quickly adjust the Luigi application to improve user experience on mobil --luigi__multi-app-dropdown--width: yourCustomMultiAppDropdownWidth; } ``` +* It should have the same value as the height of the horizontal navigation. This variable is used to calculate the `top` value of the main iframe container when `tabNav` and `breadcrumbs` are configured. The default value is `--luigi__horizontal-nav--height: 2.75rem`. +```html +:root{ + --luigi__horizontal-nav--height: yourCustomHorizontalNavHight +} +``` * Set the [**header.responsiveShellbarPaddings**](general-settings.md#headerresponsiveshellbarpaddings) parameter to `true` to make the Shellbar responsive for different screen sizes. From f4697492d5eac11b1ba720ad77383854da385d65 Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Fri, 10 Feb 2023 13:41:02 +0100 Subject: [PATCH 4/4] remove docu --- docs/luigi-ux-features.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/docs/luigi-ux-features.md b/docs/luigi-ux-features.md index 5f969f5a7f..bccad7f0f9 100644 --- a/docs/luigi-ux-features.md +++ b/docs/luigi-ux-features.md @@ -62,12 +62,6 @@ You can quickly adjust the Luigi application to improve user experience on mobil --luigi__multi-app-dropdown--width: yourCustomMultiAppDropdownWidth; } ``` -* It should have the same value as the height of the horizontal navigation. This variable is used to calculate the `top` value of the main iframe container when `tabNav` and `breadcrumbs` are configured. The default value is `--luigi__horizontal-nav--height: 2.75rem`. -```html -:root{ - --luigi__horizontal-nav--height: yourCustomHorizontalNavHight -} -``` * Set the [**header.responsiveShellbarPaddings**](general-settings.md#headerresponsiveshellbarpaddings) parameter to `true` to make the Shellbar responsive for different screen sizes.