nico
/
spartacus-inventur-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

feat: add more WIP about styling

This commit is contained in:
mmmchimps 2023-01-19 00:17:51 +01:00
parent 729c424e33
commit 9af4d77039
3 changed files with 70 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inventur Spartacus</title>
</head>
<body>
<body class="has-navbar-fixed-top">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

37
src/lib/Drink.svelte
View File

@ -3,7 +3,6 @@
<script lang="ts">
import { activeCategory, drinks } from "../stores.js";
import { fade, fly } from "svelte/transition";
</script>
<section class="section">
@ -11,17 +10,45 @@
{#if $activeCategory == ""}
<article class="message is-info">
<div class="message-header">
<p>hey!</p>
<p>Hallo! Schön, dass du eine Inventur machen möchtest. :)</p>
</div>
<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>
</article>
{:else}
{#each $drinks as drink, name}
{#if drink.type == $activeCategory}
<div in:fly="{{ x: 200, duration: 300 }}" out:fly="{{ y: 400, duration: 0 }}" class="box">
<h1>{drink.name}</h1>
<div class="box">
<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>
{/if}
{/each}

26
src/lib/Navbar.svelte
View File

@ -11,14 +11,13 @@
}
</script>
<main>
<nav class="navbar is-white is-spaced has-shadow">
<nav class="navbar is-light is-spaced has-shadow is-fixed-top">
<div class="navbar-brand">
<a class="navbar-item">
<a on:click={() => setActiveCategory("")} class="navbar-item">
<img src={sparti_logo} />
</a>
</div>
<div id="navbar-menu">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" on:click={() => setActiveCategory("beer")}>
Bier
@ -33,6 +32,23 @@
Schnaps & Sirup
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a on:click={() => console.log("TBD")} class="button is-primary">
<strong>Abschluss</strong>
<!-- Hier sollte dann auch ein Name eingegeben werden -->
</a>
</div>
</div>
<div class="navbar-item">
<div class="buttons">
<a on:click={() => console.log("TBD")} class="button is-danger">
<strong>Reset</strong>
</a>
</div>
</div>
</div>
</div>
</nav>
</main>