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

[thatisrich]

Description

Completes GH Issue 66 - Due to the potential length of the element navigation tree, the element styles panel, and the visual preview panel, overflow-y: scroll has been added to the containers with the aim to add visual clarity for the authoring experience. To help with this, open elements within the navigation tree are 'attached' to the container while scroll to show where in the element tree the current scroll position is.

Change Log

• base.scss - Added some styling to allow top level elements to scroll and also giving a height to .themer-body
• nav-list.scss - Added some styling to allow container scrolling and sticky items within the element tree
• themerPreview.scss - Added some styling to allow container scrolling when required

Steps to test

• Enable the Themer plugin
• Navigate to the Styles Editor
• Expand the Blocks and Elements items in the navigation tree
• Expand further child-elements so multiple menus are open
• Scroll up and down within the element tree to see parent items 'stick' to the top of the container, whilst retaining their structure level

On a wide screen:

• Scroll up and down in the panel used to set the element's styles
• Scroll up and down in the visual preview panel

On a thinner screen:

• Scroll up and down in the main panel which will display the element styles (at the top) and also the visual preview panel (underneath)

Screenshots/Videos

A video showing the wide screen interactions can be found here

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[g-elwell]

Thanks for this @thatisrich ! It's looking good. I have left some inline comments, overall this functions well but I did notice an issue if the preview size increases beyond a certain size when you're in the larger breakpoint.

Recreation steps:

• Select site > padding
• Increase to 400px
• Notice the preview disappears and does not stack like it would on smaller screens

Demo:

Screen.Capture.on.2024-06-25.at.13-17-07.mp4

I don't think we should allow any styles to affect the overall size of the preview, this may be fixable by adding a set width to the themer-preview-container

[thatisrich]

Thanks @g-elwell!

To tackle the preview container exceeding the page when certain values are adjusted, .themer-content-container has been moved to use CSS grid after hitting the breakpoint. As the styles are still currently bleeding outside of the preview it's hard to fully test this is working as intended (especially when it comes to the margins) but it does cover off things like font size and padding.

A demo showing this can be seen here

[g-elwell]

Thanks for your efforts on this @thatisrich ! It's working great in my testing