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

Improve client preview styles to work with increase client padding

This commit is contained in:
Andrew Kingston 2024-07-31 15:34:15 +01:00
parent de9b80e23d
commit 8540f4020b
No known key found for this signature in database
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View File

@ -275,6 +275,7 @@
src="/app/preview" src="/app/preview"
class:hidden={loading || error} class:hidden={loading || error}
/> />
<div class="underlay" />
<div <div
class="add-component" class="add-component"
class:active={isAddingComponent} class:active={isAddingComponent}
@ -295,11 +296,10 @@
<style> <style>
.loading { .loading {
position: absolute; position: absolute;
container-type: inline-size; width: calc(100% - 12px);
width: 100%; height: calc(100% - 12px);
height: 100%; left: 6px;
border: 2px solid transparent; top: 6px;
box-sizing: border-box;
} }
.loading.tablet { .loading.tablet {
@ -318,7 +318,6 @@
display: grid; display: grid;
place-items: center; place-items: center;
position: relative; position: relative;
overflow: hidden;
margin: auto; margin: auto;
height: 100%; height: 100%;
} }
@ -363,6 +362,17 @@
height: 100%; height: 100%;
} }
.underlay {
position: absolute;
background: var(--spectrum-global-color-gray-200);
z-index: -1;
--offset: 2px;
width: calc(100% - 12px + 2 * var(--offset));
height: calc(100% - 12px + 2 * var(--offset));
left: calc(6px - var(--offset));
top: calc(6px - var(--offset));
}
.add-component { .add-component {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;

1
packages/frontend-core/src/components/ClientAppSkeleton.svelte
View File

@ -58,7 +58,6 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 4px;
overflow: hidden; overflow: hidden;
background-color: var(--spectrum-global-color-gray-200); background-color: var(--spectrum-global-color-gray-200);
} }