LPS-143397 Fix styles for template editor when publications is enabled

victorg1991 · Jul 20, 2022 · 4364787 · 4364787
1 parent f4b6209
commit 4364787
Showing 1 changed file with 51 additions and 36 deletions.
diff --git a/...late-web/src/main/resources/META-INF/resources/js/ddm_template_editor/components/App.scss b/...late-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};
+	}
+}