Skip to content

Commit

Permalink
adjusted styling, removed javascript for fixed position
Browse files Browse the repository at this point in the history
  • Loading branch information
[email protected] committed Nov 5, 2024
1 parent b3abf67 commit 0770bf6
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 53 deletions.
37 changes: 10 additions & 27 deletions src/welcome/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand All @@ -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>
</>
)
Expand Down
60 changes: 37 additions & 23 deletions src/welcome/admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions src/welcome/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. -->
Expand Down
2 changes: 1 addition & 1 deletion src/welcome/notification.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down

0 comments on commit 0770bf6

Please sign in to comment.