From 62e5d22cb23e263131783cccbb1468506cd450d6 Mon Sep 17 00:00:00 2001 From: Victor Galan Date: Wed, 20 Jul 2022 12:22:55 +0200 Subject: [PATCH 1/4] LPS-143397 Set a variable with the change tracking height --- .../resources/publications/css/ChangeTrackingIndicator.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/modules/apps/change-tracking/change-tracking-web/src/main/resources/META-INF/resources/publications/css/ChangeTrackingIndicator.scss b/modules/apps/change-tracking/change-tracking-web/src/main/resources/META-INF/resources/publications/css/ChangeTrackingIndicator.scss index 8c7abd1af8ccad..ffb58be7e84253 100644 --- a/modules/apps/change-tracking/change-tracking-web/src/main/resources/META-INF/resources/publications/css/ChangeTrackingIndicator.scss +++ b/modules/apps/change-tracking/change-tracking-web/src/main/resources/META-INF/resources/publications/css/ChangeTrackingIndicator.scss @@ -47,6 +47,10 @@ html#{$cadmin-selector} .cadmin { } } +.change-tracking-enabled { + --change-tracking-indicator-height: 24px; +} + .publications-loading { opacity: 0.5; } From 4a1f28458eb05a763112d2dfc111241775b5f51d Mon Sep 17 00:00:00 2001 From: Victor Galan Date: Wed, 20 Jul 2022 12:29:39 +0200 Subject: [PATCH 2/4] LPS-143397 Use current variable --- .../page_editor/app/components/_Sidebar.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/_Sidebar.scss b/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/_Sidebar.scss index 8334a7458ab9d9..7655c5cad53b20 100644 --- a/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/_Sidebar.scss +++ b/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/_Sidebar.scss @@ -10,19 +10,21 @@ $zIndexContent: 0; html#{$cadmin-selector} .cadmin .page-editor__sidebar { display: flex; + /* stylelint-disable */ height: calc( 100vh - ( var(--control-menu-height) + var(--toolbar-height) + - var(--change-tracking-bar-height) + var(--change-tracking-indicator-height, 0px) ) ); position: fixed; right: 0; top: calc( var(--control-menu-height) + var(--toolbar-height) + - var(--change-tracking-bar-height) + var(--change-tracking-indicator-height, 0px) ); + /* stylelint-enable */ z-index: $sidebarZIndex; &__buttons { @@ -81,13 +83,15 @@ html#{$cadmin-selector} .cadmin .page-editor__sidebar { border-left: 1px solid $cadmin-secondary-l3; display: flex; flex-direction: column; + /* stylelint-disable */ height: calc( 100vh - ( var(--control-menu-height) + var(--toolbar-height) + - var(--change-tracking-bar-height) + var(--change-tracking-indicator-height, 0px) ) ); + /* stylelint-enable */ overflow-x: hidden; position: fixed; right: $sidebarButtonWidth; @@ -105,7 +109,6 @@ html#{$cadmin-selector} .cadmin .page-editor__sidebar { html#{$cadmin-selector} body { --toolbar-height: #{$toolbarHeight}; /* stylelint-disable */ - --change-tracking-bar-height: 0px; --control-menu-height: 0px; /* stylelint-enable */ @@ -117,10 +120,6 @@ html#{$cadmin-selector} body { } } - &.change-tracking-enabled { - --change-tracking-bar-height: #{$changeTrackingBarHeight}; - } - @include media-breakpoint-up(xl, $cadmin-grid-breakpoints) { --toolbar-height: #{$desktopToolbarHeight}; } From f4b62093613d32884925f6368fb1a337d03a96fe Mon Sep 17 00:00:00 2001 From: Victor Galan Date: Wed, 20 Jul 2022 12:30:05 +0200 Subject: [PATCH 3/4] LPS-143397 Fix top for when publications is enabled --- .../META-INF/resources/control_menu/_add_panel.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/modules/apps/product-navigation/product-navigation-control-menu-theme-contributor/src/main/resources/META-INF/resources/control_menu/_add_panel.scss b/modules/apps/product-navigation/product-navigation-control-menu-theme-contributor/src/main/resources/META-INF/resources/control_menu/_add_panel.scss index f18fd737f48e03..981399dfb8a94f 100644 --- a/modules/apps/product-navigation/product-navigation-control-menu-theme-contributor/src/main/resources/META-INF/resources/control_menu/_add_panel.scss +++ b/modules/apps/product-navigation/product-navigation-control-menu-theme-contributor/src/main/resources/META-INF/resources/control_menu/_add_panel.scss @@ -23,12 +23,18 @@ html#{$cadmin-selector} { &.lfr-admin-panel { &.sidenav-menu-slider { - top: $has-control-menu-margin-top-desktop; + /* stylelint-disable */ + top: calc( + #{$has-control-menu-margin-top-desktop} + var(--change-tracking-indicator-height, 0px) + ); z-index: $admin-panel-zindex; - @include media-breakpoint-down(sm, $cadmin-grid-breakpoints) { - top: $has-control-menu-margin-top-mobile; + @include media-breakpoint-down(xs, $cadmin-grid-breakpoints) { + top: calc( + #{$has-control-menu-margin-top-mobile} + var(--change-tracking-indicator-height, 0px) + ); } + /* stylelint-enable */ .product-menu { width: $admin-panel-width; From 43647871ec4b7a8d8f34b7ee981bde16416710bc Mon Sep 17 00:00:00 2001 From: Victor Galan Date: Wed, 20 Jul 2022 11:47:05 +0000 Subject: [PATCH 4/4] LPS-143397 Fix styles for template editor when publications is enabled --- .../ddm_template_editor/components/App.scss | 87 +++++++++++-------- 1 file changed, 51 insertions(+), 36 deletions(-) diff --git a/modules/apps/template/template-web/src/main/resources/META-INF/resources/js/ddm_template_editor/components/App.scss b/modules/apps/template/template-web/src/main/resources/META-INF/resources/js/ddm_template_editor/components/App.scss index e95a2884023b7a..4831917ebea205 100644 --- a/modules/apps/template/template-web/src/main/resources/META-INF/resources/js/ddm_template_editor/components/App.scss +++ b/modules/apps/template/template-web/src/main/resources/META-INF/resources/js/ddm_template_editor/components/App.scss @@ -4,38 +4,28 @@ @import 'PortletIcon'; @import 'PropertiesPanel'; -$controlMenuDesktopHeight: 56px; $controlMenuHeight: 48px; -$toolbarDesktopHeight: 4rem; +$desktopControlMenuHeight: 56px; +$desktopToolbarHeight: 4rem; $toolbarHeight: 6.875rem; .ddm_template_editor__App { display: flex; - height: calc(100vh - #{$toolbarHeight} - #{$controlMenuHeight}); + /* stylelint-disable */ + height: calc( + 100vh - + ( + var(--control-menu-height) + var(--toolbar-height) + + var(--change-tracking-indicator-height, 0px) + ) + ); + /* stylelint-enable */ left: 0; overflow: hidden; position: absolute; - top: $toolbarHeight; + top: var(--toolbar-height); width: 100%; - @include media-breakpoint-up(sm) { - height: calc(100vh - #{$toolbarHeight} - #{$controlMenuDesktopHeight}); - } - - @include media-breakpoint-up(lg) { - top: $toolbarDesktopHeight; - height: calc( - 100vh - #{$toolbarDesktopHeight} - #{$controlMenuDesktopHeight} - ); - } - - @include media-breakpoint-up(lg) { - top: $toolbarDesktopHeight; - height: calc( - 100vh - #{$toolbarDesktopHeight} - #{$controlMenuDesktopHeight} - ); - } - .alert:first-of-type { margin-top: 1rem; } @@ -56,16 +46,18 @@ $toolbarHeight: 6.875rem; &-sidebar { display: flex; - height: calc(100vh - #{$toolbarHeight} - #{$controlMenuHeight}); + /* stylelint-disable */ + height: calc( + 100vh - + ( + var(--control-menu-height) + var(--toolbar-height) + + var(--change-tracking-indicator-height, 0px) + ) + ); + /* stylelint-enable */ position: fixed; right: 0; - @include media-breakpoint-up(lg) { - height: calc( - 100vh - #{$toolbarDesktopHeight} - #{$controlMenuDesktopHeight} - ); - } - &-buttons { align-items: center; background-color: $light; @@ -94,7 +86,17 @@ $toolbarHeight: 6.875rem; &-content { background-color: $white; border-left: 1px solid $gray-300; - height: calc(100vh - #{$toolbarHeight} - #{$controlMenuHeight}); + + /* stylelint-disable */ + height: calc( + 100vh - + ( + var(--control-menu-height) + var(--toolbar-height) + + var(--change-tracking-indicator-height, 0px) + ) + ); + /* stylelint-enable */ + overflow-y: auto; position: fixed; right: 42px; @@ -107,12 +109,6 @@ $toolbarHeight: 6.875rem; transform: translateX(-100%); } - @include media-breakpoint-up(lg) { - height: calc( - 100vh - #{$toolbarDesktopHeight} - #{$controlMenuDesktopHeight} - ); - } - &.open { transform: translateX(0); } @@ -155,3 +151,22 @@ $toolbarHeight: 6.875rem; } } } + +body { + --toolbar-height: #{$toolbarHeight}; + /* stylelint-disable */ + --control-menu-height: 0px; + /* stylelint-enable */ + + &.has-control-menu { + --control-menu-height: #{$controlMenuHeight}; + + @include media-breakpoint-up(sm) { + --control-menu-height: #{$desktopControlMenuHeight}; + } + } + + @include media-breakpoint-up(xl) { + --toolbar-height: #{$desktopToolbarHeight}; + } +}