CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-30 09:07:25 +13:00
Code Issues Projects Releases Wiki Activity

auto-wrapping on size collapse

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-06-04 15:52:05 +02:00
parent 134cf87608
commit 9c7f56a9ae
1 changed files with 23 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/standard-components/src/Layout.svelte
View file

@ -12,12 +12,24 @@
twoColumns: 2,
threeColumns: 3,
}
let containerWidth
$: columnsDependingOnSize = calculateColumns(containerWidth)
function calculateColumns(parentWidth) {
const numberOfAllowedColumns = Math.floor(parentWidth / 250) || 100
if (layoutMap[type] <= numberOfAllowedColumns) {
return false
} else if (layoutMap[type] > numberOfAllowedColumns) {
return numberOfAllowedColumns
}
}
</script>
<div
bind:clientWidth={containerWidth}
in:transition={{ type: $component.transition }}
use:styleable={$component.styles}
class={type}
class="{type} columns-{columnsDependingOnSize}"
>
<slot />
{#if layoutMap[type] - $component.children > 0}
@ -44,6 +56,15 @@
.threeColumns {
grid-template-columns: 1fr 1fr 1fr;
}
.containerSmall {
grid-template-columns: 1fr;
}
.columns-1 {
grid-template-columns: 1fr;
}
.columns-2 {
grid-template-columns: 1fr 1fr;
}
p {
background-color: var(--grey-3);