Merge pull request #67 from bigbite/enhancement/bbt-66-scroll-sticky-…

…container

GH Issue #66 - Scrollable Panels with Sticky Navigation Tree Items

src/editor/components/NavListItem.js

@@ -73,7 +73,11 @@ const NavListItem = ( { children, icon, label, route, hasStyles } ) => {
 				</Button>
 			</div>
 
-			{ isOpen && <div>{ children }</div> }
+			{ isOpen && (
+				<div className="themer-nav-list__item__children">
+					{ children }
+				</div>
+			) }
 		</li>
 	);
 };

src/editor/components/Preview.js

@@ -39,7 +39,7 @@ const Preview = ( { baseOptions, previewCss, previewSize } ) => {
 	};
 
 	return (
-		<ShortcutProvider>
+		<ShortcutProvider className="themer-preview__container">
 			<BlockEditorProvider
 				value={ previewBlocks?.blocks }
 				settings={ baseOptions }

src/editor/styles/base.scss

@@ -38,22 +38,28 @@
 
 .themer-more-menu .components-menu-item__button {
 	margin-bottom: 10px;
+
 	&:last-child {
 		margin-bottom: 0;
 	}
 }
 
 .themer-body {
 	display: flex;
-	background-color: #F6F7F7; 
+	background-color: #F6F7F7;
+	height: var(--themer-body-height);
+	overflow: hidden;
 }
 
 .themer-nav-container {
 	flex: 0 0 280px;
 	background-color: #fff;
 	border-right: #ccc 1px solid;
 	overflow: auto;
-	padding: 8px;
+	padding: 0;
+	height: 100%;
+	overflow: hidden;
+	overflow-y: auto;
 }
 
 .themer-content-container {
@@ -62,14 +68,15 @@
 	align-items: flex-start;
 	gap: 20px;
 	padding: 20px;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 }
 
 .themer-styles-container {
 	flex: 1 0 300px;
 	background-color: #fff;
 	border: #ccc 1px solid;
 	overflow: auto;
+
 	&::empty {
 		display: none;
 	}
@@ -93,3 +100,38 @@
 .themer-styles-heading__right {
 	margin-left: auto;
 }
+
+@media only screen and (max-width: 1570px) {
+
+	.themer-content-container {
+		flex-wrap: wrap;
+	}
+
+	.themer-content-container {
+		height: 100%;
+		overflow: hidden;
+		overflow-y: auto;
+	}
+
+}
+
+@media only screen and (min-width: 1571px) {
+
+	.themer-styles-container {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.themer-styles-container .components-navigator-screen {
+		// This is to account for the padding on the container to stop padding altering height
+		box-sizing: border-box;
+	}
+
+	.themer-content-container {
+		display: grid;
+		grid-template-columns: 300px minmax(0, 1fr);
+	}
+
+}

src/editor/styles/components/nav-list.scss

@@ -1,10 +1,19 @@
+.themer-nav-container > .themer-nav-list {
+	padding-block: 8px;
+	padding-inline-end: 0.75rem;
+}
+
 .themer-nav-list {
 	margin: 0;
+
 	--themer-nav-list-indent: 22px;
+
 	.themer-nav-list {
 		--themer-nav-list-indent: 44px;
+
 		.themer-nav-list {
 			--themer-nav-list-indent: 66px;
+
 			.themer-nav-list {
 				--themer-nav-list-indent: 88px;
 			}
@@ -14,6 +23,30 @@
 
 .themer-nav-list__item {
 	margin: 0;
+	// This gives the items clearance for button focus to stop element overlap
+	padding-block: 1px;
+}
+
+.themer-nav-list__item .themer-nav-list__item > .themer-nav-list__item__content {
+	// Offset the second level elements by the height of the list items
+	--themer-nav-list-top-indent: var(--themer-nav-list-item-height);
+}
+
+.themer-nav-list__item .themer-nav-list__item .themer-nav-list__item > .themer-nav-list__item__content {
+	// Offset the third level elements by double the height of the list items
+	--themer-nav-list-top-indent: calc(var(--themer-nav-list-item-height) * 2);
+}
+
+.themer-nav-list__item > .themer-nav-list__item__children {
+	position: relative;
+	z-index: 1;
+}
+
+.themer-nav-list__item > .themer-nav-list__item__content {
+	background-color: #fff;
+	position: sticky;
+	top: var(--themer-nav-list-top-indent);
+	z-index: 2;
 }
 
 .themer-nav-list__item__content {
@@ -30,8 +63,7 @@
 .themer-nav-list__item__content--disabled .themer-nav-list__item__button,
 .themer-nav-list__item__content--disabled .themer-nav-list__item__button:hover,
 .themer-nav-list__item__content--disabled .themer-nav-list__item__button:focus,
-.themer-nav-list__item__content--disabled
-	.themer-nav-list__item__button:active {
+.themer-nav-list__item__content--disabled .themer-nav-list__item__button:active {
 	color: rgba(0, 0, 0, 0.5);
 }
 
@@ -56,6 +88,8 @@
 }
 
 .themer-nav-list__item__toggle {
+	height: calc(var(--themer-nav-list-item-height) - 4px);
 	position: absolute;
 	left: calc(var(--themer-nav-list-indent) - 22px);
+	top: 2px;
 }

src/editor/styles/index.scss

@@ -1,3 +1,4 @@
+@import "./variables.scss";
 @import "./base.scss";
 @import "./themerPreview.scss";
 @import "./navigator.scss";

src/editor/styles/themerPreview.scss

@@ -4,23 +4,46 @@
 	flex-direction: column;
 	align-items: center;
 	height: 100%;
+	max-width: 100%;
+}
 
-	.editor-styles-wrapper {
-		min-height: 754px;
-	}
+.themer-preview-container .editor-styles-wrapper {
+	min-height: 754px;
 }
 
 .themer-preview {
 	background: #fff;
 	border: #ccc 1px solid;
-	position: sticky;
-	top: 55px;
+	max-height: var(--themer-preview-height);
+	overflow: hidden;
 }
 
 .themer-preview__toolbar {
+	background-color: #fff;
+	border-bottom: #ccc 1px solid;
 	display: flex;
+	gap: 6px;
 	justify-content: flex-end;
-	border-bottom: #ccc 1px solid;
 	padding: 10px;
-	gap: 6px;
+	position: sticky;
+	top: 0;
+}
+
+.themer-preview {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.themer-preview__toolbar {
+	flex-grow: 0;
+	flex-shrink: 0;
+}
+
+.themer-preview__container {
+	height: 100%;
+	flex-grow: 1;
+	flex-shrink: 1;
+	overflow: auto;
+	overscroll-behavior: contain;
 }

src/editor/styles/variables.scss

@@ -0,0 +1,8 @@
+:root {
+	--themer-nav-list-top-indent: 0px;
+	--themer-nav-list-item-height: 2.25rem;
+	// Browser height minus top bar height and WP bar height
+	--themer-body-height: calc(100dvh - 3.75rem - 32px);
+	// Themer body height minus 2.5rem for padding
+	--themer-preview-height: calc(var(--themer-body-height) - 2.5rem);
+}