factor out top bar to __layout.svelte

This commit is contained in:
Ilion Beyst 2022-03-16 20:13:09 +01:00
parent 675bf6fd07
commit d91d98cef5
2 changed files with 73 additions and 69 deletions

View file

@ -0,0 +1,26 @@
<script lang="ts">
import "./style.css";
</script>
<div class="outer-container">
<div class="top-bar" />
<slot />
</div>
<style lang="scss">
@import "../lib/variables.scss";
.outer-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
height: 40px;
background-color: $bg-color;
border-bottom: 1px solid;
flex-shrink: 0;
}
</style>

View file

@ -2,7 +2,6 @@
import Visualizer from "$lib/components/Visualizer.svelte";
import EditorView from "$lib/components/EditorView.svelte";
import { onMount } from "svelte";
import "./style.css";
import { DateTime } from "luxon";
@ -131,9 +130,7 @@
}
</script>
<div class="outer-container">
<div class="top-bar" />
<div class="container">
<div class="container">
<div class="sidebar-left">
<div
class="editor-button sidebar-item"
@ -182,25 +179,10 @@
<SubmitPane {editSession} on:matchCreated={onMatchCreated} />
{/if}
</div>
</div>
</div>
<style lang="scss">
$bg-color: rgb(41, 41, 41);
.outer-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
height: 40px;
background-color: $bg-color;
border-bottom: 1px solid;
flex-shrink: 0;
}
@import "../lib/variables.scss";
.container {
display: flex;
@ -266,10 +248,6 @@
color: #ccc;
}
.match-mapname {
padding: 0 0.5em;
}
.match-opponent {
padding: 0 0.5em;
}