2021-06-04 18:57:18 +12:00
|
|
|
<script>
|
|
|
|
import { getContext } from "svelte"
|
|
|
|
|
|
|
|
const { styleable, transition } = getContext("sdk")
|
|
|
|
const component = getContext("component")
|
|
|
|
export let type = "mainSidebar"
|
|
|
|
export let gap = "16px"
|
2021-06-05 00:34:52 +12:00
|
|
|
|
|
|
|
let layoutMap = {
|
|
|
|
mainSidebar: 2,
|
|
|
|
sidebarMain: 2,
|
|
|
|
twoColumns: 2,
|
|
|
|
threeColumns: 3,
|
|
|
|
}
|
2021-06-05 01:52:05 +12:00
|
|
|
|
|
|
|
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
|
|
|
|
}
|
|
|
|
}
|
2021-06-04 18:57:18 +12:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div
|
2021-06-05 01:52:05 +12:00
|
|
|
bind:clientWidth={containerWidth}
|
2021-06-04 18:57:18 +12:00
|
|
|
in:transition={{ type: $component.transition }}
|
2021-06-05 01:52:05 +12:00
|
|
|
class="{type} columns-{columnsDependingOnSize}"
|
2021-06-04 18:57:18 +12:00
|
|
|
>
|
|
|
|
<slot />
|
2021-06-05 00:34:52 +12:00
|
|
|
{#if layoutMap[type] - $component.children > 0}
|
|
|
|
{#each new Array(layoutMap[type] - $component.children) as _}
|
|
|
|
<p><i class="ri-image-line" />Add some components to display.</p>
|
|
|
|
{/each}
|
|
|
|
{/if}
|
2021-06-04 18:57:18 +12:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
div {
|
|
|
|
display: grid;
|
|
|
|
grid-gap: 16px;
|
|
|
|
}
|
|
|
|
.mainSidebar {
|
|
|
|
grid-template-columns: 2fr 1fr;
|
|
|
|
}
|
|
|
|
.sidebarMain {
|
|
|
|
grid-template-columns: 1fr 2fr;
|
|
|
|
}
|
|
|
|
.twoColumns {
|
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
}
|
|
|
|
.threeColumns {
|
|
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
|
|
}
|
2021-06-05 01:52:05 +12:00
|
|
|
.columns-1 {
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
}
|
|
|
|
.columns-2 {
|
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
}
|
2021-06-05 00:34:52 +12:00
|
|
|
|
|
|
|
p {
|
|
|
|
background-color: var(--grey-3);
|
|
|
|
color: var(--grey-6);
|
|
|
|
font-size: var(--font-size-s);
|
|
|
|
padding: var(--spacing-l);
|
|
|
|
border-radius: var(--border-radius-s);
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
}
|
|
|
|
p i {
|
|
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
font-size: 1.5rem;
|
|
|
|
color: var(--grey-5);
|
|
|
|
}
|
2021-06-04 18:57:18 +12:00
|
|
|
</style>
|