diff --git a/online_status_list/src/App.svelte b/online_status_list/src/App.svelte index 425ffe7b2463d542727ef1207f7b008817b64c8f..932d82fe7c6bdfb46dbcef1f9455014c302dd3f6 100644 --- a/online_status_list/src/App.svelte +++ b/online_status_list/src/App.svelte @@ -1,56 +1,58 @@ -<script lang="ts"> - import RoomOnlineListPanel from './RoomOnlineListPanel.svelte'; - - import { roomSets } from './stores.js'; - - async function fetchRoomData(): Promise<{sets: [{title: string, rooms: [{url: string, name: string, users: string[]}]}]}> { - const response = await fetch('mockdata.json') - const data = await response.json(); - return data; - } - +<style> +main { + text-align: center; + padding: 1em; + max-width: 240px; + margin: 0 auto; +} + +h1 { + color: #ff3e00; + text-transform: uppercase; + font-size: 4em; + font-weight: 100; +} + +@media (min-width: 640px) { + main { + max-width: none; + } +} +</style> +<script lang="ts"> +import RoomOnlineListPanel from "./RoomOnlineListPanel.svelte"; + +import { roomSets } from "./stores.js"; + +async function fetchRoomData(): Promise<{ + sets: [ + { title: string; rooms: [{ url: string; name: string; users: string[] }] } + ]; +}> { + const response = await fetch("mockdata.json"); + const data = await response.json(); + return data; +} </script> + <section class="section"> - <div class="container"> - <div class="columns"> - <div class="column"> - <h1> - O-Phase WinterSemester 2020 - </h1> - <h2> - Hier findet ihr eine Überischt über die einzelnen BBB-Räume und ihren Belegungsstatus. - </h2> - </div> - </div> - {#each $roomSets as roomSet (roomSet.title)} - <div class="column is-4"> - <RoomOnlineListPanel {...roomSet} /> - </div> - {/each} - - </div> + <div class="container"> + <div class="columns"> + <div class="column"> + <h1>O-Phase WinterSemester 2020</h1> + <h2> + Hier findet ihr eine Überischt über die einzelnen BBB-Räume und ihren + Belegungsstatus. + </h2> + </div> + </div> + <div class="columns"> + {#each $roomSets as roomSet (roomSet.title)} + <div class="column is-4"> + <RoomOnlineListPanel {...roomSet} /> + </div> + {/each} + </div> + </div> </section> - - -<style> - main { - text-align: center; - padding: 1em; - max-width: 240px; - margin: 0 auto; - } - - h1 { - color: #ff3e00; - text-transform: uppercase; - font-size: 4em; - font-weight: 100; - } - - @media (min-width: 640px) { - main { - max-width: none; - } - } -</style> \ No newline at end of file