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

Rename client app wrapper divs for clarity

This commit is contained in:
Andrew Kingston 2021-09-08 10:28:19 +01:00
parent 5d305bb8e7
commit a1615055c3
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/client/src/components/ClientApp.svelte
View File

@ -93,9 +93,9 @@
{/if} {/if}
{/key} {/key}
<!-- Device boundary --> <!-- Clip boundary for selection indicators -->
<div <div
id="device-root" id="clip-root"
class:preview={$builderStore.inBuilder} class:preview={$builderStore.inBuilder}
class:tablet-preview={$builderStore.previewDevice === "tablet"} class:tablet-preview={$builderStore.previewDevice === "tablet"}
class:mobile-preview={$builderStore.previewDevice === "mobile"} class:mobile-preview={$builderStore.previewDevice === "mobile"}
@ -144,7 +144,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#device-root { #clip-root {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
width: 100%; width: 100%;
@ -188,14 +188,14 @@
/* Preview styles */ /* Preview styles */
/* The additional 6px of size is to account for 4px padding and 2px border */ /* The additional 6px of size is to account for 4px padding and 2px border */
#device-root.preview { #clip-root.preview {
padding: 2px; padding: 2px;
} }
#device-root.tablet-preview { #clip-root.tablet-preview {
width: calc(1024px + 6px); width: calc(1024px + 6px);
height: calc(768px + 6px); height: calc(768px + 6px);
} }
#device-root.mobile-preview { #clip-root.mobile-preview {
width: calc(390px + 6px); width: calc(390px + 6px);
height: calc(844px + 6px); height: calc(844px + 6px);
} }

8
packages/client/src/components/preview/SettingsBar.svelte
View File

@ -26,7 +26,13 @@
const id = $builderStore.selectedComponentId const id = $builderStore.selectedComponentId
const parent = document.getElementsByClassName(id)?.[0] const parent = document.getElementsByClassName(id)?.[0]
const element = parent?.childNodes?.[0] const element = parent?.childNodes?.[0]
const device = document.getElementById("device-root")
// The settings bar is higher in the dom tree than the selection indicators
// as we want to be able to render the settings bar wider than the screen,
// or outside the screen.
// Therefore we use the clip root rather than the app root to determine
// its position.
const device = document.getElementById("clip-root")
if (element && self) { if (element && self) {
// Batch reads to minimize reflow // Batch reads to minimize reflow
const deviceBounds = device.getBoundingClientRect() const deviceBounds = device.getBoundingClientRect()