adjusted styling, removed javascript for fixed position

Author: [email protected]

src/welcome/admin.js

@@ -11,7 +11,7 @@ import SVGSectionIcon from './images/settings-icon-section.svg'
  */
 import { __ } from '@wordpress/i18n'
 import {
-	useEffect, useState, useCallback, useRef, useMemo, lazy, Suspense,
+	useEffect, useState, useCallback, useMemo, lazy, Suspense,
 } from '@wordpress/element'
 import domReady from '@wordpress/dom-ready'
 import { Spinner, CheckboxControl } from '@wordpress/components'
@@ -337,28 +337,9 @@ const Sidenav = ( {
 		},
 	], [] )
 
-	const sidenavRef = useRef( null )
-
-	useEffect( () => {
-		const handleScroll = () => {
-			const header = document.querySelector( '.s-header-settings' )
-
-			if ( header ) {
-				// If the header is scrolled out of view, make the sidebar fixed
-				if ( header.getBoundingClientRect().bottom <= 32 ) {
-					sidenavRef.current.classList.add( 's-sidenav-fixed' )
-				} else {
-					sidenavRef.current.classList.remove( 's-sidenav-fixed' )
-				}
-			}
-		}
-		window.addEventListener( 'scroll', handleScroll )
-		return () => window.removeEventListener( 'scroll', handleScroll )
-	}, [] )
-
 	return (
 		<>
-			<nav className="s-sidenav" ref={ sidenavRef }>
+			<nav className="s-sidenav">
 				<div>
 					{ tabList.map( ( {
 						id,
@@ -384,13 +365,15 @@ const Sidenav = ( {
 						</button>
 						)
 					} ) }
+					<div className="s-save-changes-wrapper">
+						<button
+							className="s-save-changes"
+							onClick={ handleSettingsSave }
+						>
+							{ isSaving ? <Spinner /> : __( 'Save Changes', i18n ) }
+						</button>
+					</div>
 				</div>
-				<button
-					className="s-save-changes"
-					onClick={ handleSettingsSave }
-				>
-					{ isSaving ? <Spinner /> : __( 'Save Changes', i18n ) }
-				</button>
 			</nav>
 		</>
 	)

src/welcome/admin.scss

@@ -398,7 +398,6 @@ body.toplevel_page_stk-custom-fields {
 		margin-bottom: 30px;
 		transition: all 0.3s ease;
 		position: relative;
-		min-height: 70vh;
 		&.s-box-spaced {
 			padding-left: 4vw;
 			padding-right: 4vw;
@@ -476,9 +475,6 @@ body.toplevel_page_stk-custom-fields {
 			display: flex;
 			flex-direction: column;
 		}
-		&.s-body-container-with-sidenav {
-			margin-left: 250px;
-		}
 		p,
 		li {
 			line-height: 1.6;
@@ -496,16 +492,27 @@ body.toplevel_page_stk-custom-fields {
 			margin-bottom: 0 !important;
 		}
 	}
+	#settings-content {
+		position: relative;
+		display: grid;
+		grid-template-columns: 250px 1fr;
+	}
 	.s-sidenav {
 		min-height: 90vh;
 		width: 250px;
 		left: 0;
-		position: absolute;
 		background-color: #fff;
-		padding-top: 20px;
+		padding-top: 40px;
 		display: flex;
 		flex-direction: column;
 		justify-content: flex-start;
+		> * {
+			position: sticky;
+			height: 100vh;
+			display: flex;
+			flex-direction: column;
+			top: 50px;
+		}
 		.s-sidenav-item {
 			color: #444;
 			font-size: 14px;
@@ -526,13 +533,14 @@ body.toplevel_page_stk-custom-fields {
 				font-weight: 600;
 				color: var(--stk-welcome-primary) !important;
 				transition: color 0.3s ease;
+				background: #f1f1f1;
 				&::after {
 					content: "";
 					position: absolute;
 					right: 0;
 					top: 0;
 					bottom: 0;
-					width: 2px;
+					width: 4px;
 					background-color: var(--stk-welcome-primary);
 					transition: width 0.3s ease;
 				}
@@ -541,10 +549,20 @@ body.toplevel_page_stk-custom-fields {
 				font-weight: bold;
 			}
 		}
+		.s-save-changes-wrapper {
+			bottom: 0;
+			padding: 20px;
+			flex: 1 0 auto;
+			display: flex;
+			flex-direction: column;
+			justify-content: end;
+		}
 		// This is a button, render this in the bottom of the side bar
 		// The side bar is a flex container, so this will be at the bottom.
 		.s-save-changes {
 			background: linear-gradient(135deg, #b300be, #f00069);
+			width: 100%;
+			margin: 0;
 			transition: all 0.1s ease-in-out;
 			text-decoration: none;
 			border: none;
@@ -556,22 +574,14 @@ body.toplevel_page_stk-custom-fields {
 			cursor: pointer;
 			box-sizing: border-box !important;
 			display: inline-block;
-			margin: 20px 20px 0;
+			position: sticky;
+			bottom: 20px;
 			&:hover {
 				opacity: 0.85;
 				box-shadow: none !important;
 			}
 		}
 	}
-	.s-sidenav-fixed {
-		position: fixed;
-		height: 100%;
-		top: 32px;
-		left: 160px;
-		.s-save-changes {
-			margin: 120px 20px 0;
-		}
-	}
 	.s-search-setting {
 		display: flex;
 		justify-content: end;
@@ -680,11 +690,19 @@ body.toplevel_page_stk-custom-fields {
 		}
 	}
 	.stackable_notice_wrapper {
-		outline: 2px solid #f00069;
-		margin-bottom: 30px;
+		// outline: 2px solid #f00069;
+		margin: 0;
+		padding: 20px;
+		background: #e9ebee;
 	}
 	.stackable_notice {
 		margin-bottom: 35px;
+		> *:last-child {
+			margin-bottom: 0;
+		}
+	}
+	#editor-settings {
+		margin-bottom: 0;
 	}
 	.s-settings-header {
 		text-align: right;
@@ -879,10 +897,6 @@ body.toplevel_page_stk-custom-fields {
 	.s-body-container {
 		grid-template-columns: 1fr !important;
 	}
-	// Matched the width of wordpress admin menu
-	.s-sidenav-fixed {
-		left: 36px !important;
-	}
 }
 
 // Save spinner for the additional options.

src/welcome/index.php

@@ -185,11 +185,11 @@ public function stackable_settings_content() {
 					<div class="s-rest-settings-notice"></div>
 					<div class="s-save-settings-notice"></div>
 				</section>
+				<?php stackable_welcome_notification() ?>
 				<section class="s-body-container s-body-container-with-sidenav">
 					<div class="s-body" id="settings-body">
-						<?php stackable_welcome_notification() ?>
 						<?php do_action( 'stackable_settings_page' ) ?>
-						
+
 						<div class="s-content" id="settings-content"></div>
 						<?php do_action( 'stackable_settings_page_mid' ); ?>
 						<!-- We put all the other options here. -->

src/welcome/notification.php

@@ -135,7 +135,7 @@ function() {
                 ?>
                 <div class="stackable_notice">
                     <?php echo wp_kses_post( $notification['message'] ) ?>
-                    <p><button class="button" data-id="<?php echo esc_attr( $notification['id'] ) ?>" onclick="stackable_dismiss(this); event.preventDefault();"><?php _e( 'Don\'t show me this anymore', STACKABLE_I18N ) ?></button></p>
+                    <p><button class="button button-primary" data-id="<?php echo esc_attr( $notification['id'] ) ?>" onclick="stackable_dismiss(this); event.preventDefault();"><?php _e( 'Don\'t show me this anymore', STACKABLE_I18N ) ?></button></p>
                 </div>
                 <?php
             }