feat: add more WIP about styling
This commit is contained in:
mmmchimps
parent
729c424e33
commit
9af4d77039
|
|
@ -6,7 +6,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Inventur Spartacus</title>
|
<title>Inventur Spartacus</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="has-navbar-fixed-top">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { activeCategory, drinks } from "../stores.js";
|
import { activeCategory, drinks } from "../stores.js";
|
||||||
import { fade, fly } from "svelte/transition";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
|
|
@ -11,17 +10,45 @@
|
||||||
{#if $activeCategory == ""}
|
{#if $activeCategory == ""}
|
||||||
<article class="message is-info">
|
<article class="message is-info">
|
||||||
<div class="message-header">
|
<div class="message-header">
|
||||||
<p>hey!</p>
|
<p>Hallo! Schön, dass du eine Inventur machen möchtest. :)</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="message-body">
|
<div class="message-body">
|
||||||
<p>waehle oben eine kategorie aus, um mit der inventur loszulegen.</p>
|
<p>
|
||||||
|
Wähle oben eine Getränkekategorie aus, um mit der Inventur loszulegen.
|
||||||
|
<br>
|
||||||
|
Dein Fortschritt wird gespeichert, bis du mit Klick auf <span class="tag is-primary"><strong>Abschluss</strong></span> die Inventur abschließt.
|
||||||
|
<br>
|
||||||
|
Wenn du neu starten möchtest, klicke auf <span class="tag is-danger"><strong>Reset</strong></span>.
|
||||||
|
<br><br>
|
||||||
|
Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="message is-link">
|
||||||
|
<div class="message-body">
|
||||||
|
<p>
|
||||||
|
ℹ️ Inventur begonnen am TBD
|
||||||
|
<!-- Wenn schon was im local storage liegt, sollte der Zeitpunkt der Erstellung hier genannt werden -->
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{:else}
|
{:else}
|
||||||
{#each $drinks as drink, name}
|
{#each $drinks as drink, name}
|
||||||
{#if drink.type == $activeCategory}
|
{#if drink.type == $activeCategory}
|
||||||
<div in:fly="{{ x: 200, duration: 300 }}" out:fly="{{ y: 400, duration: 0 }}" class="box">
|
<div class="box">
|
||||||
<h1>{drink.name}</h1>
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
{drink.name}
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
||||||
|
|
@ -11,28 +11,44 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<nav class="navbar is-light is-spaced has-shadow is-fixed-top">
|
||||||
<nav class="navbar is-white is-spaced has-shadow">
|
<div class="navbar-brand">
|
||||||
<div class="navbar-brand">
|
<a on:click={() => setActiveCategory("")} class="navbar-item">
|
||||||
<a class="navbar-item">
|
<img src={sparti_logo} />
|
||||||
<img src={sparti_logo} />
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<a class="navbar-item" on:click={() => setActiveCategory("beer")}>
|
||||||
|
Bier
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item" on:click={() => setActiveCategory("fizzyDrink")}>
|
||||||
|
Brause & Wasser
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item" on:click={() => setActiveCategory("wine")}>
|
||||||
|
Wein & Sekt
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item" on:click={() => setActiveCategory("spirit")}>
|
||||||
|
Schnaps & Sirup
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="navbar-menu">
|
|
||||||
<div class="navbar-start">
|
<div class="navbar-end">
|
||||||
<a class="navbar-item" on:click={() => setActiveCategory("beer")}>
|
<div class="navbar-item">
|
||||||
Bier
|
<div class="buttons">
|
||||||
</a>
|
<a on:click={() => console.log("TBD")} class="button is-primary">
|
||||||
<a class="navbar-item" on:click={() => setActiveCategory("fizzyDrink")}>
|
<strong>Abschluss</strong>
|
||||||
Brause & Wasser
|
<!-- Hier sollte dann auch ein Name eingegeben werden -->
|
||||||
</a>
|
</a>
|
||||||
<a class="navbar-item" on:click={() => setActiveCategory("wine")}>
|
</div>
|
||||||
Wein & Sekt
|
</div>
|
||||||
</a>
|
<div class="navbar-item">
|
||||||
<a class="navbar-item" on:click={() => setActiveCategory("spirit")}>
|
<div class="buttons">
|
||||||
Schnaps & Sirup
|
<a on:click={() => console.log("TBD")} class="button is-danger">
|
||||||
</a>
|
<strong>Reset</strong>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
</main>
|
</nav>
|
||||||
Loading…
Reference in New Issue