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

Allow grid containers to use their natural height as a min height

This commit is contained in:
Andrew Kingston 2024-08-12 10:48:38 +01:00
parent 9f951bab20
commit aeb8a0f117
No known key found for this signature in database
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/client/src/components/app/container/GridContainer.svelte
View File

@ -9,22 +9,26 @@
const context = getContext("context") const context = getContext("context")
let width let width
let height
let ref let ref
let rows = 1 let rows = 1
let children = writable({}) let children = writable({})
let mounted = false let mounted = false
let styles = memo({}) let styles = memo({})
$: rows = calculateRequiredRows($children, mobile) $: requiredRows = calculateRequiredRows($children, mobile)
$: requiredHeight = requiredRows * GridRowHeight
$: availableRows = Math.floor(height / GridRowHeight)
$: rows = Math.max(requiredRows, availableRows)
$: mobile = $context.device.mobile $: mobile = $context.device.mobile
$: empty = $component.empty $: empty = $component.empty
$: colSize = width / GridColumns $: colSize = width / GridColumns
$: height = rows * GridRowHeight
$: styles.set({ $: styles.set({
...$component.styles, ...$component.styles,
normal: { normal: {
...$component.styles?.normal, ...$component.styles?.normal,
"--height": `${height}px`, "--height": `${requiredHeight}px`,
"--min-height": $component.styles?.normal?.height || 0,
"--cols": GridColumns, "--cols": GridColumns,
"--rows": rows, "--rows": rows,
"--col-size": colSize, "--col-size": colSize,
@ -118,6 +122,7 @@
class="grid" class="grid"
class:mobile class:mobile
bind:clientWidth={width} bind:clientWidth={width}
bind:clientHeight={height}
use:styleable={$styles} use:styleable={$styles}
data-cols={GridColumns} data-cols={GridColumns}
data-col-size={colSize} data-col-size={colSize}
@ -140,12 +145,13 @@
.grid, .grid,
.underlay { .underlay {
height: var(--height) !important; height: var(--height) !important;
min-height: 0 !important; min-height: var(--min-height) !important;
max-height: none !important; max-height: none !important;
display: grid; display: grid;
gap: 0;
grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px)); grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px));
grid-template-columns: repeat(var(--cols), 1fr); grid-template-columns: repeat(var(--cols), 1fr);
gap: 0; position: relative;
} }
.underlay { .underlay {
display: none; display: none;