hnzio/nouri-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Vereinfache Lebensmittelkarten und behebe Template-Fehler

Browse Source
This commit is contained in:
Florian Heinz
2026-04-15 11:24:40 +02:00
parent 216dde1414
commit 85c72879cb
2 changed files with 521 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nouri/static/css/styles.css
+415 -4
View File
@@ -941,11 +941,21 @@ h3 {
color: #ece8e4;
}
.status-unsorted {
background: rgba(184, 161, 108, 0.18);
}
[data-theme="dark"] .status-unsorted {
background: rgba(177, 148, 97, 0.2);
color: #f1e7d8;
}
.status-soft {
background: var(--lilac-soft);
}
.item-card {
position: relative;
display: grid;
grid-template-columns: 112px 1fr;
gap: 1rem;
@@ -979,6 +989,20 @@ h3 {
color: var(--accent-strong);
}
.placeholder-icon-tile {
width: 100%;
height: 100%;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--surface-soft) 84%, transparent 16%);
}
.placeholder-icon-tile .ui-icon {
width: 2.1rem;
height: 2.1rem;
opacity: 0.9;
}
.item-body {
min-width: 0;
display: grid;
@@ -1057,13 +1081,382 @@ h3 {
border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.16) 42%);
}
.item-card-food {
grid-template-columns: 1fr;
gap: 0.9rem;
align-content: start;
min-height: 260px;
padding: 1.15rem 1.15rem 1.2rem;
}
.item-card-food-muted {
opacity: 0.72;
}
.item-card-food .item-media-food {
width: min(100%, 170px);
justify-self: center;
aspect-ratio: 1;
border-radius: 24px;
}
.item-card-food .item-body-food {
justify-items: center;
text-align: center;
gap: 0.25rem;
}
.item-card-food .item-body-food h2 {
margin: 0;
font-size: 1.9rem;
line-height: 1.08;
}
.item-card-cover-link {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.item-card-archive-form {
position: absolute;
top: 0.85rem;
right: 0.85rem;
z-index: 3;
}
.item-card-archive-button {
width: 2.2rem;
height: 2.2rem;
padding: 0;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent 18%);
background: color-mix(in srgb, var(--surface-soft) 88%, transparent 12%);
color: var(--muted);
font-size: 1.35rem;
line-height: 1;
display: grid;
place-items: center;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.item-card-archive-button:hover {
background: color-mix(in srgb, var(--accent-soft) 26%, var(--surface-soft) 74%);
border-color: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
color: var(--text);
transform: translateY(-1px);
}
.item-card-hover-meta {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
align-content: end;
gap: 0.75rem;
padding: 1rem;
border-radius: inherit;
background: color-mix(in srgb, var(--surface) 68%, rgba(48, 39, 35, 0.86) 32%);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.item-card-hover-meta p {
margin: 0;
font-size: 0.95rem;
line-height: 1.45;
color: var(--text);
}
.item-card-food:hover .item-card-hover-meta,
.item-card-food:focus-within .item-card-hover-meta {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
[data-theme="dark"] .item-card-archive-button {
background: color-mix(in srgb, var(--surface-soft) 62%, rgba(26, 22, 21, 0.84) 38%);
border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.16) 42%);
}
[data-theme="dark"] .item-card-hover-meta {
background: linear-gradient(
180deg,
rgba(36, 29, 27, 0.16),
rgba(31, 25, 23, 0.92)
);
}
.item-actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
}
.item-actions > * {
min-width: 0;
}
.item-actions form,
.item-actions a {
width: 100%;
}
.item-actions form button,
.item-actions a.ghost-button,
.item-actions a.button {
width: 100%;
justify-content: center;
}
.item-actions > .primary-action {
grid-column: 1 / -1;
}
.shopping-add-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 0.8rem;
}
.shopping-add-grid > form {
min-width: 0;
}
.shopping-add-empty {
margin: 0;
padding: 0.35rem 0.1rem;
}
.shopping-add-card {
width: 100%;
min-height: 88px;
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 0.9rem;
align-items: center;
padding: 0.85rem 0.95rem;
border-radius: 22px;
text-align: left;
}
.shopping-add-card-visual,
.shopping-add-card-fallback,
.shopping-entry-visual,
.shopping-entry-fallback {
width: 58px;
height: 58px;
border-radius: 18px;
overflow: hidden;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--surface-soft) 84%, transparent 16%);
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent 20%);
}
.shopping-add-card-visual img,
.shopping-entry-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.shopping-add-card-fallback .ui-icon,
.shopping-entry-fallback .ui-icon {
font-size: 1.2rem;
}
.shopping-add-card-copy,
.shopping-entry-copy {
min-width: 0;
display: grid;
gap: 0.28rem;
}
.shopping-add-card-copy strong,
.shopping-entry-copy strong {
display: block;
font-size: 1.1rem;
line-height: 1.2;
}
.shopping-add-card-copy small {
color: var(--muted);
font-size: 0.92rem;
}
.shopping-entry-card {
position: relative;
display: grid;
gap: 1rem;
padding: 1rem;
border-radius: 24px;
border: 1px solid var(--line);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-strong) 90%, transparent 10%),
color-mix(in srgb, var(--surface) 94%, transparent 6%)
);
}
.shopping-entry-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.9rem;
}
.shopping-entry-open {
flex: 1 1 auto;
min-width: 0;
padding: 0;
border-radius: 18px;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.shopping-entry-open:hover .shopping-entry-main,
.shopping-entry-open:focus-visible .shopping-entry-main {
transform: translateY(-1px);
}
.shopping-entry-main {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 0.95rem;
align-items: center;
min-width: 0;
flex: 1 1 auto;
transition: transform 140ms ease;
}
.shopping-entry-copy .muted {
margin: 0;
}
.shopping-entry-actions {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.shopping-entry-actions form {
width: auto;
}
.shopping-entry-actions button {
white-space: nowrap;
}
.shopping-entry-close-form {
flex: 0 0 auto;
margin: 0;
}
.shopping-entry-close {
width: 2.1rem;
height: 2.1rem;
min-width: 2.1rem;
padding: 0;
border-radius: 999px;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--surface-soft) 34%, transparent 66%);
}
.shopping-entry-close span[aria-hidden="true"] {
font-size: 1.4rem;
line-height: 1;
transform: translateY(-1px);
}
.shopping-entry-dialog {
padding: 0;
border: 0;
background: transparent;
max-width: min(30rem, calc(100vw - 2rem));
width: min(30rem, calc(100vw - 2rem));
}
.shopping-entry-dialog::backdrop {
background: rgba(29, 22, 19, 0.54);
backdrop-filter: blur(6px);
}
.shopping-entry-dialog-card {
gap: 1rem;
}
.shopping-entry-dialog-actions {
display: grid;
gap: 0.7rem;
}
.shopping-entry-dialog-actions form,
.shopping-entry-dialog-actions a {
width: 100%;
}
.shopping-entry-dialog-actions a {
text-align: center;
}
[data-theme="dark"] .shopping-entry-close {
background: color-mix(in srgb, var(--surface-soft) 46%, rgba(34, 29, 27, 0.54) 54%);
}
@media (max-width: 680px) {
.shopping-entry-row {
align-items: stretch;
flex-direction: column;
}
.shopping-entry-open {
width: 100%;
}
.shopping-entry-actions,
.shopping-entry-actions form,
.shopping-entry-actions button,
.shopping-entry-close-form {
width: 100%;
}
.shopping-entry-close {
width: 100%;
border-radius: 18px;
}
}
[data-theme="dark"] .shopping-add-card-fallback,
[data-theme="dark"] .shopping-entry-fallback,
[data-theme="dark"] .shopping-add-card-visual,
[data-theme="dark"] .shopping-entry-visual {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 60%, #453a37 40%),
color-mix(in srgb, var(--surface) 90%, #2b2523 10%)
);
border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.18) 42%);
}
[data-theme="dark"] .shopping-entry-card {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 56%, #433834 44%),
color-mix(in srgb, var(--surface) 94%, #26201e 6%)
);
border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.14) 42%);
}
.auth-shell {
min-height: calc(100vh - 10rem);
display: grid;
@@ -2755,12 +3148,23 @@ legend {
grid-template-columns: 1fr;
}
.item-card-food {
min-height: 0;
}
.item-card-food .item-media-food {
width: min(100%, 156px);
}
.item-card-hover-meta {
display: none;
}
.simple-list li,
.list-row,
.planner-entry-top,
.week-nav,
.row-actions,
.item-actions,
.hero-actions,
.more-actions,
.filter-actions {
@@ -2770,12 +3174,19 @@ legend {
}
.row-actions > *,
.item-actions > *,
.hero-actions > *,
.more-actions > * {
flex: 1 1 auto;
}
.item-actions {
grid-template-columns: 1fr;
}
.item-actions > .primary-action {
grid-column: auto;
}
.quick-add-row {
display: grid;
gap: 0.75rem;
nouri/templates/items/list.html
+85 -48
View File
@@ -5,9 +5,18 @@
<div>
<p class="eyebrow">{{ item_kind_labels[kind] }}</p>
<h1>{{ item_kind_labels[kind] }}</h1>
{% if kind == 'food' %}
<p class="lead">Hier stehen alle aktiven Lebensmittel, egal ob sie gerade zuhause sind oder im Moment fehlen. Archiviertes bleibt bewusst außen vor.</p>
{% else %}
<p class="lead">Gemeinsame und persönliche Ideen bleiben hier ruhig sortiert, mit einem klaren Blick darauf, für wen etwas gedacht ist.</p>
{% endif %}
</div>
<div class="hero-actions">
{% if kind == 'food' %}
<a class="ghost-button" href="{{ url_for('main.item_quick_add') }}">Schnell anlegen</a>
{% endif %}
<a class="button" href="{{ url_for('main.item_create', kind=kind) }}">Neu anlegen</a>
</div>
</section>
<section class="panel compact-form-panel">
@@ -51,6 +60,78 @@
{% if items %}
<section class="card-grid">
{% for item in items %}
{% if item.kind == 'food' %}
{% set item_icon_class = {
'protein': 'icon-component-protein',
'carb': 'icon-component-carb',
'veg': 'icon-component-veg',
'fruit': 'icon-component-fruit',
'dairy': 'icon-component-dairy',
'nuts': 'icon-component-nuts',
'seeds': 'icon-component-seeds',
'neutral': 'icon-component-neutral',
}.get(item.primary_builder_key or item.base_type, 'icon-component-neutral') %}
<article class="item-card item-card-food{% if not item.is_home %} item-card-food-muted{% endif %}">
{% if item.can_edit %}
<a class="item-card-cover-link" href="{{ url_for('main.item_edit', item_id=item.id) }}">
<span class="sr-only">{{ item.name }} bearbeiten</span>
</a>
<form
class="item-card-archive-form"
method="post"
action="{{ url_for('main.item_archive', item_id=item.id) }}"
onsubmit="return confirm('Willst du dieses Lebensmittel wirklich archivieren?');"
>
{{ csrf_input() }}
<button class="item-card-archive-button" type="submit" aria-label="{{ item.name }} archivieren">×</button>
</form>
{% endif %}
<div class="item-media item-media-food">
{% if item.photo_filename %}
<img
src="{{ image_url(item.photo_filename, 'md') }}"
srcset="{{ image_srcset(item.photo_filename) }}"
sizes="{{ image_sizes('grid') }}"
alt="{{ item.name }}"
loading="lazy">
{% else %}
<div class="placeholder-icon-tile">
<span class="ui-icon {{ item_icon_class }}"></span>
</div>
{% endif %}
</div>
<div class="item-body item-body-food">
<h2>{{ item.name }}</h2>
</div>
<div class="item-card-hover-meta" aria-hidden="true">
<div class="chip-row">
<span class="chip">{{ item.for_label }}</span>
<span class="chip">{{ item.visibility_label }}</span>
<span class="chip status-soft">{{ item.owner_label }}</span>
<span class="chip">{{ item.base_type_label }}</span>
<span class="chip">{{ item.suggestion_role_label }}</span>
<span class="chip">{{ item.suggestion_priority_label }}</span>
{% if item.can_be_meal_core %}
<span class="chip status-okay">Trägt gut eine Mahlzeit</span>
{% endif %}
{% if item.is_on_shopping_list %}
<span class="chip status-idea">Auf Einkaufsliste</span>
{% endif %}
{% if item.dayparts %}
{% for daypart in item.dayparts %}
<span class="chip">{{ daypart }}</span>
{% endfor %}
{% endif %}
</div>
{% if item.note %}
<p>{{ item.note }}</p>
{% endif %}
</div>
</article>
{% else %}
<article class="item-card">
<div class="item-media">
{% if item.photo_filename %}
@@ -65,44 +146,6 @@
{% endif %}
</div>
<div class="item-body">
<div class="item-topline">
<h2>{{ item.name }}</h2>
<span class="status-pill status-{{ item.availability_state }}">{{ availability_labels[item.availability_state] }}</span>
</div>
{% if item.kind == 'food' %}
<div class="chip-row">
<span class="chip">{{ item.for_label }}</span>
{% if item.is_on_shopping_list %}
<span class="chip status-idea">Auf Einkaufsliste</span>
{% endif %}
</div>
<details class="item-meta-disclosure">
<summary>Mehr zeigen</summary>
<div class="item-meta-panel">
<div class="chip-row">
<span class="chip">{{ item.visibility_label }}</span>
<span class="chip status-soft">{{ item.owner_label }}</span>
<span class="chip">{{ item.base_type_label }}</span>
<span class="chip">{{ item.suggestion_role_label }}</span>
<span class="chip">{{ item.suggestion_priority_label }}</span>
{% if item.can_be_meal_core %}
<span class="chip status-okay">Trägt gut eine Mahlzeit</span>
{% endif %}
<span class="chip">{{ item_kind_labels[item.kind] }}</span>
</div>
{% if item.dayparts %}
<div class="chip-row">
{% for daypart in item.dayparts %}
<span class="chip">{{ daypart }}</span>
{% endfor %}
</div>
{% endif %}
{% if item.note %}
<p>{{ item.note }}</p>
{% endif %}
</div>
</details>
{% else %}
<div class="chip-row">
<span class="chip">{{ item.visibility_label }}</span>
<span class="chip status-soft">{{ item.owner_label }}</span>
@@ -115,7 +158,6 @@
<span class="chip">{{ tag }}</span>
{% endfor %}
</div>
{% endif %}
{% if item.kind != 'food' and item.dayparts %}
<div class="chip-row">
{% for daypart in item.dayparts %}
@@ -135,24 +177,19 @@
<a class="ghost-button" href="{{ url_for('main.item_edit', item_id=item.id) }}">Bearbeiten</a>
{% endif %}
<a class="ghost-button" href="{{ url_for('main.planner_day', date=today.isoformat(), item_id=item.id, daypart_id=item.primary_daypart_id) }}">Im Tagesplan öffnen</a>
<form method="post" action="{{ url_for('main.item_add_to_shopping', item_id=item.id) }}">
<form class="primary-action" method="post" action="{{ url_for('main.item_add_to_shopping', item_id=item.id) }}">
{{ csrf_input() }}
<button type="submit">Auf Einkaufsliste</button>
</form>
{% if item.availability_state != 'home' and item.can_edit %}
<form method="post" action="{{ url_for('main.item_set_home', item_id=item.id) }}">
{{ csrf_input() }}
<button class="secondary" type="submit">Als Zuhause markieren</button>
</form>
{% endif %}
{% if item.availability_state != 'archived' and item.can_edit %}
{% if item.can_edit %}
<form method="post" action="{{ url_for('main.item_archive', item_id=item.id) }}">
{{ csrf_input() }}
<button class="ghost-button" type="submit">Ins Archiv</button>
<button class="ghost-button" type="submit">Archivieren</button>
</form>
{% endif %}
</div>
</article>
{% endif %}
{% endfor %}
</section>
{% else %}