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

Add some additional styles to grids to ensure components render properly

This commit is contained in:
Andrew Kingston 2022-10-24 13:08:53 +01:00
parent c76ca029ce
commit 421708463a
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/client/src/components/app/Grid.svelte
View File

@ -2,7 +2,7 @@
import { getContext } from "svelte" import { getContext } from "svelte"
const component = getContext("component") const component = getContext("component")
const { styleable } = getContext("sdk") const { styleable, builderStore } = getContext("sdk")
export let cols = 12 export let cols = 12
export let rows = 12 export let rows = 12
@ -11,6 +11,7 @@
// Deliberately non-reactive as we want this fixed whenever the grid renders // Deliberately non-reactive as we want this fixed whenever the grid renders
const defaultColSpan = Math.ceil((cols + 1) / 2) const defaultColSpan = Math.ceil((cols + 1) / 2)
console.log(defaultColSpan)
const defaultRowSpan = Math.ceil((rows + 1) / 2) const defaultRowSpan = Math.ceil((rows + 1) / 2)
$: coords = generateCoords(rows, cols) $: coords = generateCoords(rows, cols)
@ -37,16 +38,20 @@
"--rows": rows, "--rows": rows,
"--default-col-span": defaultColSpan, "--default-col-span": defaultColSpan,
"--default-row-span": defaultRowSpan, "--default-row-span": defaultRowSpan,
padding: "0 !important",
gap: "0 !important",
}, },
}} }}
data-rows={rows} data-rows={rows}
data-cols={cols} data-cols={cols}
> >
<div class="underlay"> {#if $builderStore.inBuilder}
{#each coords as coord} <div class="underlay">
<div class="placeholder" /> {#each coords as coord}
{/each} <div class="placeholder" />
</div> {/each}
</div>
{/if}
<slot /> <slot />
</div> </div>
@ -69,6 +74,8 @@
grid-column-end: var(--default-col-span); grid-column-end: var(--default-col-span);
grid-row-start: 1; grid-row-start: 1;
grid-row-end: var(--default-row-span); grid-row-end: var(--default-row-span);
max-height: 100%;
max-width: 100%;
} }
.grid { .grid {
@ -94,7 +101,6 @@
.underlay { .underlay {
z-index: -1; z-index: -1;
} }
.placeholder { .placeholder {
background-color: var(--spectrum-global-color-gray-100); background-color: var(--spectrum-global-color-gray-100);
} }