Artikel-Verwaltung und responsive Tiles
- Admin: Artikel löschen (min. 1 erforderlich) - Admin: Neue Artikel hinzufügen - Admin: Update-Logik für variable Artikelanzahl - Kasse: Dynamische items/Session pro Produkt - Kasse: CSS Grid Layout - alle Artikel fit auf einen Bildschirm - Kasse: Leerzustand wenn keine Artikel Made-with: Cursor
This commit is contained in:
@@ -17,133 +17,147 @@
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
height: 100%;
|
||||
.kasse-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.kasse-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.article-grid {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat({{ grid_cols }}, 1fr);
|
||||
grid-template-rows: repeat({{ grid_rows }}, 1fr);
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.article-tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table td {
|
||||
height: calc(100vh / 6);
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.article-tile .btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
white-space: normal;
|
||||
font-size: clamp(0.9rem, 4vw, 1.5rem);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.bold-row {
|
||||
.kasse-sum-row {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0.5rem;
|
||||
font-weight: bold;
|
||||
font-size: 250%;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.custom-btn-size {
|
||||
font-size: 180%;
|
||||
.kasse-reset {
|
||||
flex-shrink: 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.custom-btn-size-med {
|
||||
font-size: 150%;
|
||||
.kasse-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.input-container input {
|
||||
margin-bottom: 10px;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.input-container button {
|
||||
width: 80%;
|
||||
.empty-state {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid table-container">
|
||||
<table class="table table-bordered">
|
||||
<form method="post">
|
||||
<tbody>
|
||||
<tr class="bold-row">
|
||||
<td colspan="2">erdbeerrechner 🍓💶</td>
|
||||
<td><a href="{{ url_for('admin', instance_id=instance_id) }}"
|
||||
class="btn btn-outline-secondary custom-btn-size-med">⚙️ Setup</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
{% for i in range(1, 4) %}
|
||||
{% set prod = products[i] %}
|
||||
<td>
|
||||
<button type="submit" name="position" value="{{ i }}" title="{{ prod['name'] }}"
|
||||
class="btn btn-xl {{ prod['color_class'] }} custom-btn-size">
|
||||
{{ prod['icon'] }} <br> {{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€ <br>
|
||||
({{ items[i] }})
|
||||
</button>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr>
|
||||
{% for i in range(4, 7) %}
|
||||
{% set prod = products[i] %}
|
||||
<td>
|
||||
<button type="submit" name="position" value="{{ i }}" title="{{ prod['name'] }}"
|
||||
class="btn btn-xl {{ prod['color_class'] }} custom-btn-size">
|
||||
{{ prod['icon'] }} <br> {{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€ <br>
|
||||
({{ items[i] }})
|
||||
</button>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="Summe" class="bold-row">🫰 {{ gesamtwert.replace('.', ',') }}€</td>
|
||||
<td>
|
||||
<div class="input-container">
|
||||
<input type="number" step="0.01" class="form-control" name="given"
|
||||
placeholder="{{ given }}" value="{% if given != '0' %}{{ given }}{% endif %}">
|
||||
<button type="submit" name="action" value="calculate_change"
|
||||
title="Wechselgeld berechnen" class="btn btn-xl btn-primary custom-btn-size-med">🧾
|
||||
Berechnen</button>
|
||||
</div>
|
||||
</td>
|
||||
<td title="Wechselgeld" class="bold-row {{ background }}">🪙 {{ change.replace('.', ',') }}€
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<button type="submit" name="action" value="reset" id="reset"
|
||||
class="btn btn-xl btn-dark custom-btn-size">Reset 🦭</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">Made with ♥️, marmalade and zero knowledge in <a
|
||||
href="https://kiel-sailing-city.de/" target="_blank">Kiel Strawberry City.</a><br>
|
||||
Version: {{ version }}, Instanz: {{ instance_id[:8] }}...
|
||||
<button type="button" onclick="shareInstance()"
|
||||
class="btn btn-sm btn-outline-primary ml-2">📤 URL Teilen</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</form>
|
||||
</table>
|
||||
</div>
|
||||
<form method="post" class="kasse-container container-fluid">
|
||||
<div class="kasse-header">
|
||||
<span>erdbeerrechner 🍓💶</span>
|
||||
<a href="{{ url_for('admin', instance_id=instance_id) }}"
|
||||
class="btn btn-outline-secondary">⚙️ Setup</a>
|
||||
</div>
|
||||
|
||||
<div class="article-grid">
|
||||
{% if not products %}
|
||||
<div class="empty-state">
|
||||
Keine Artikel. Bitte im <a href="{{ url_for('admin', instance_id=instance_id) }}">Admin</a> hinzufügen.
|
||||
</div>
|
||||
{% else %}
|
||||
{% for pos, prod in products|dictsort %}
|
||||
<div class="article-tile">
|
||||
<button type="submit" name="position" value="{{ pos }}" title="{{ prod['name'] }}"
|
||||
class="btn {{ prod['color_class'] }}">
|
||||
{{ prod['icon'] }}<br>
|
||||
{{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€<br>
|
||||
({{ items.get(pos, 0) }})
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="kasse-sum-row">
|
||||
<span title="Summe">🫰 {{ gesamtwert.replace('.', ',') }}€</span>
|
||||
<div class="input-container">
|
||||
<input type="number" step="0.01" class="form-control" name="given"
|
||||
placeholder="{{ given }}" value="{% if given != '0' %}{{ given }}{% endif %}">
|
||||
<button type="submit" name="action" value="calculate_change"
|
||||
title="Wechselgeld berechnen" class="btn btn-primary btn-sm">🧾 Berechnen</button>
|
||||
</div>
|
||||
<span title="Wechselgeld" class="{{ background }}">🪙 {{ change.replace('.', ',') }}€</span>
|
||||
</div>
|
||||
|
||||
<div class="kasse-reset">
|
||||
<button type="submit" name="action" value="reset" class="btn btn-dark btn-block">Reset 🦭</button>
|
||||
</div>
|
||||
|
||||
<div class="kasse-footer">
|
||||
Made with ♥️, marmalade and zero knowledge in <a href="https://kiel-sailing-city.de/"
|
||||
target="_blank">Kiel Strawberry City.</a><br>
|
||||
Version: {{ version }}, Instanz: {{ instance_id[:8] }}...
|
||||
<button type="button" onclick="shareInstance()" class="btn btn-sm btn-outline-primary ml-2">📤 URL Teilen</button>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
|
||||
Reference in New Issue
Block a user