79 lines
1.8 KiB
Svelte
79 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import Sidebar from './Sidebar.svelte';
|
|
import Footer from './Footer.svelte';
|
|
import { setStreamContext, StreamContext } from '$lib/streamContext.svelte.ts';
|
|
|
|
// streams are grabbed from the server here, then accessed throughout the rest
|
|
// of the components through the svelte context api
|
|
const { data, children } = $props();
|
|
setStreamContext(new StreamContext(data.streams));
|
|
</script>
|
|
|
|
<div id="mainContainer">
|
|
<div id="sidebar" class="panel"><Sidebar /></div>
|
|
<div id="footer" class="panel-alt"><Footer /></div>
|
|
<div id="content">{@render children?.()}</div>
|
|
</div>
|
|
|
|
<style>
|
|
#mainContainer {
|
|
display: grid;
|
|
grid-template-columns: 25% 1fr;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
height: calc(100vh - 1em); /* fallback */
|
|
height: calc(100dvh - 1em);
|
|
gap: 0.5em;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
#footer {
|
|
grid-row: 2;
|
|
grid-column: 1;
|
|
height: 100%;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
#sidebar {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
overflow-wrap: break-word;
|
|
scrollbar-gutter: stable;
|
|
overflow-y: scroll;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
#content {
|
|
grid-row: 1 / 2;
|
|
grid-column: 2;
|
|
height: calc(100vh - 1em);
|
|
height: calc(100dvh - 1em);
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
#mainContainer {
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: 65% 1fr auto;
|
|
}
|
|
|
|
#footer {
|
|
order: 2;
|
|
order: 2;
|
|
grid-row: 3;
|
|
height: 100%;
|
|
}
|
|
|
|
#sidebar {
|
|
order: 1;
|
|
grid-row: 2;
|
|
height: 100%;
|
|
}
|
|
|
|
#content {
|
|
order: 0;
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|