MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Stop preview jumping when scrolling to components, and improve scrolling behaviour

This commit is contained in:
Andrew Kingston 2023-08-22 18:55:36 +01:00
parent d0414812cf
commit a83e987dcd
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/Component.svelte
View File

@ -475,7 +475,7 @@
node.style.scrollMargin = "100px" node.style.scrollMargin = "100px"
node.scrollIntoView({ node.scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "start", block: "nearest",
inline: "start", inline: "start",
}) })
} }

14
packages/client/src/components/app/Layout.svelte
View File

@ -73,18 +73,20 @@
) )
$: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open
// Scroll navigation into view if selected // Scroll navigation into view if selected.
// Memoize into a primitive to avoid spamming this whenever builder store
// changes.
$: selected =
$builderStore.inBuilder &&
$builderStore.selectedComponentId === "navigation"
$: { $: {
if ( if (selected) {
$builderStore.inBuilder &&
$builderStore.selectedComponentId === "navigation"
) {
const node = document.getElementsByClassName("nav-wrapper")?.[0] const node = document.getElementsByClassName("nav-wrapper")?.[0]
if (node) { if (node) {
node.style.scrollMargin = "100px" node.style.scrollMargin = "100px"
node.scrollIntoView({ node.scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "start", block: "nearest",
inline: "start", inline: "start",
}) })
} }