Fix WideScreens

src/pages/event/FightCard.svelte

@@ -3,8 +3,9 @@
     import {Button, Checkbox, Modal, Toolbar, ToolbarButton} from "flowbite-svelte";
     import type {EventFight, ExtendedEvent} from "../../types/event.js";
     import FightEditModal from "./modals/FightEditModal.svelte";
-    import {createEventDispatcher} from "svelte";
+    import {createEventDispatcher, onMount} from "svelte";
     import {fightRepo} from "../../repo/repo.js";
+    import {isWide} from "../../stores/stores.js";
 
     export let fight: EventFight;
     export let data: ExtendedEvent;
@@ -37,16 +38,16 @@
     <div class="flex">
         <div class="flex flex-col">
             <div>
-                <span>{fight.blueTeam.name}</span>
+                <span>{$isWide ? fight.blueTeam.name : fight.blueTeam.kuerzel}</span>
                 vs.
-                <span>{fight.redTeam.name}</span>
+                <span>{$isWide ? fight.redTeam.name : fight.redTeam.kuerzel}</span>
             </div>
             {#if (fight.ergebnis === 3)}
                 <span class="ml-2">Unentschieden</span>
             {:else if (fight.ergebnis !== 0)}
-                <span class="ml-2">{fight.ergebnis === 1 ? 'Sieger: ' + fight.blueTeam.name : 'Sieger: ' + fight.redTeam.name}</span>
+                <span class="ml-2">{fight.ergebnis === 1 ? 'Sieger: ' + ($isWide ? fight.blueTeam.name : fight.blueTeam.kuerzel) : 'Sieger: ' + ($isWide ? fight.redTeam.name : fight.redTeam.kuerzel)}</span>
             {:else}
-                <span class="ml-2">Noch nicht gespielt</span>
+                <span class="ml-2">{$isWide ? 'Noch nicht gespielt' : 'kommend'}</span>
             {/if}
         </div>
     </div>

src/stores/stores.ts

@@ -1,7 +1,7 @@
 import type {Player, SchematicType} from "../types/data.js";
 import {cached, cachedFamily} from "./cached.js";
 import type {Team} from "../types/team.js";
-import {get} from "svelte/store";
+import {get, writable} from "svelte/store";
 import {tokenStore} from "../repo/repo.js";
 
 export const schemTypes = cached<SchematicType[]>([], () => {
@@ -39,3 +39,6 @@ export const teams = cached<Team[]>([], () => {
     return fetch("https://steamwar.de/eventplanner-api/team", {headers: {"X-SW-Auth": get(tokenStore)}})
         .then(res => res.json())
 })
+
+export const isWide = writable(window.innerWidth >= 640);
+window.addEventListener("resize", () => isWide.set(window.innerWidth >= 640));