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

Add padding at bottom of grid for screen level grids

This commit is contained in:
Andrew Kingston 2024-08-13 09:09:53 +01:00
parent 96882e7eca
commit ead4be7b88
No known key found for this signature in database
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/Screen.svelte
View File

@ -14,7 +14,7 @@
// Get the screen definition for the current route // Get the screen definition for the current route
$: screen = $screenStore.activeScreen $: screen = $screenStore.activeScreen
$: screenDefinition = { cols: 24, rows: 24, ...screen?.props } $: screenDefinition = { ...screen?.props, addEmptyRows: true }
$: onLoadActions.set(screen?.onLoad) $: onLoadActions.set(screen?.onLoad)
$: runOnLoadActions($onLoadActions, params) $: runOnLoadActions($onLoadActions, params)

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

@ -4,6 +4,8 @@
import { GridRowHeight, GridColumns } from "constants" import { GridRowHeight, GridColumns } from "constants"
import { memo } from "@budibase/frontend-core" import { memo } from "@budibase/frontend-core"
export let addEmptyRows = false
const component = getContext("component") const component = getContext("component")
const { styleable, builderStore } = getContext("sdk") const { styleable, builderStore } = getContext("sdk")
const context = getContext("context") const context = getContext("context")
@ -16,7 +18,7 @@
let mounted = false let mounted = false
let styles = memo({}) let styles = memo({})
$: requiredRows = calculateRequiredRows($children, mobile) $: requiredRows = calculateRequiredRows($children, mobile, addEmptyRows)
$: requiredHeight = requiredRows * GridRowHeight $: requiredHeight = requiredRows * GridRowHeight
$: availableRows = Math.floor(height / GridRowHeight) $: availableRows = Math.floor(height / GridRowHeight)
$: rows = Math.max(requiredRows, availableRows) $: rows = Math.max(requiredRows, availableRows)
@ -39,7 +41,7 @@
// Calculates the minimum number of rows required to render all child // Calculates the minimum number of rows required to render all child
// components, on a certain device type // components, on a certain device type
const calculateRequiredRows = (children, mobile) => { const calculateRequiredRows = (children, mobile, addEmptyRows) => {
const key = mobile ? "mobileRowEnd" : "desktopRowEnd" const key = mobile ? "mobileRowEnd" : "desktopRowEnd"
let max = 2 let max = 2
for (let id of Object.keys(children)) { for (let id of Object.keys(children)) {
@ -47,7 +49,12 @@
max = children[id][key] max = children[id][key]
} }
} }
return max - 1 let rows = max - 1
if (addEmptyRows) {
return Math.ceil((rows + 10) / 10) * 10
} else {
return rows
}
} }
// Stores metadata about a child node as constraints for determining grid size // Stores metadata about a child node as constraints for determining grid size