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

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

@ -26,7 +26,13 @@
const id = $builderStore.selectedComponentId
const parent = document.getElementsByClassName(id)?.[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) {
// Batch reads to minimize reflow
const deviceBounds = device.getBoundingClientRect()