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

Release Nouri 1.3.2 with mobile selection improvements

Browse Source
This commit is contained in:
Florian Heinz
2026-04-29 10:54:40 +02:00
parent 1034ea72a8
commit 8fc2492918
12 changed files with 402 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nouri/templates/items/form.html
+65 -29
View File
@@ -205,11 +205,26 @@
<fieldset>
<legend>Bestandteile der Mahlzeitenidee</legend>
<p class="muted">Du kannst eine Mahlzeitenidee frei benennen oder aus sichtbaren Lebensmitteln zusammensetzen. Nouri nutzt dabei später Grundtyp, Rolle und Tageszeit der Lebensmittel für ruhigere Vorschläge.</p>
{% if selected_components %}
<div class="selected-component-stack">
<p class="helper-text">Schon ausgewählt</p>
<div class="selected-components-grid">
{% for component in selected_components %}
<div class="meal-component-search">
<label class="wide">
Lebensmittel suchen
<input
type="text"
name="food_search"
value="{{ form_data.food_search }}"
placeholder="z. B. Reis, Banane, Joghurt"
data-filter-input
data-filter-target="#meal-components-list"
data-filter-limit="8"
>
</label>
</div>
<div class="selected-component-stack is-live" data-selected-preview="#meal-components-list">
<p class="helper-text">Ausgewählt</p>
<p class="helper-text" data-selected-preview-empty>Noch nichts ausgewählt.</p>
<div class="selected-components-grid">
{% for group in food_groups %}
{% for component in group["items"] %}
{% set component_icon_class = {
'protein': 'icon-component-protein',
'carb': 'icon-component-carb',
@@ -220,9 +235,11 @@
'seeds': 'icon-component-seeds',
'neutral': 'icon-component-neutral',
}.get(component.primary_builder_key or component.base_type, 'icon-component-neutral') %}
<article class="selected-component-card">
<input type="hidden" name="component_ids" value="{{ component.id }}">
<button class="selected-component-remove" type="submit" name="remove_component_id" value="{{ component.id }}">
<article
class="selected-component-card {% if not component.is_home %}is-needed{% endif %}"
data-selected-preview-card="{{ component.id }}"
>
<button class="selected-component-remove" type="button" data-uncheck-component="{{ component.id }}">
<span aria-hidden="true">×</span>
<span class="sr-only">{{ component.name }} entfernen</span>
</button>
@@ -242,41 +259,60 @@
</div>
<div class="selected-component-main">
<strong>{{ component.name }}</strong>
<small class="food-status-badge {% if not component.is_home %}is-needed{% endif %}">
<span class="ui-icon {% if component.is_home %}icon-house{% else %}icon-shopping-cart{% endif %}"></span>
<span>{{ component.availability_label }}</span>
</small>
</div>
</article>
{% endfor %}
</div>
{% endfor %}
</div>
{% endif %}
<div class="inline-form">
<label class="wide">
Lebensmittel suchen
<input
type="text"
name="food_search"
value="{{ form_data.food_search }}"
placeholder="z. B. Reis, Banane, Joghurt"
data-filter-input
data-filter-target="#meal-components-list"
data-filter-limit="3"
>
</label>
<button class="secondary" type="submit" name="form_action" value="filter_foods">Suchen</button>
</div>
<p class="helper-text">Während der Suche zeigt Nouri nur die drei passendsten Lebensmittel, damit die Auswahl ruhig bleibt.</p>
<p class="helper-text">Während der Suche zeigt Nouri die passendsten Lebensmittel. Nicht vorrätige Lebensmittel sind mit Einkaufswagen markiert.</p>
{% if food_groups %}
<div class="stack-sections" id="meal-components-list">
<div class="meal-component-results" id="meal-components-list">
{% for group in food_groups %}
<div class="component-group">
<div class="panel-head">
<h3>{{ group["title"] }}</h3>
<span>{{ group["items"]|length }} Einträge</span>
</div>
<div class="checkbox-grid filterable-checkbox-group" data-filter-group>
<div class="meal-component-option-grid" data-filter-group>
{% for food in group["items"] %}
<label class="check-option" data-filter-label="{{ food.name|lower }} {{ food.category|default('', true)|lower }} {{ food.base_type_label|lower }} {{ food.suggestion_role_label|lower }}">
{% set food_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(food.primary_builder_key or food.base_type, 'icon-component-neutral') %}
<label class="meal-component-option" data-filter-label="{{ food.name|lower }} {{ food.category|default('', true)|lower }} {{ food.base_type_label|lower }} {{ food.suggestion_role_label|lower }} {{ food.availability_label|lower }}">
<input type="checkbox" name="component_ids" value="{{ food.id }}" {% if food.id in form_data.component_ids %}checked{% endif %}>
<span>{{ food.name }} · {{ food.base_type_label }} · {{ food.visibility_label }}</span>
<span class="meal-component-option-card">
<span class="meal-component-option-visual">
{% if food.photo_filename %}
<img
src="{{ image_url(food.photo_filename, 'md') }}"
srcset="{{ image_srcset(food.photo_filename) }}"
sizes="{{ image_sizes('grid') }}"
alt=""
loading="lazy">
{% else %}
<span class="ui-icon {{ food_icon_class }}"></span>
{% endif %}
</span>
<span class="meal-component-option-copy">
<strong>{{ food.name }}</strong>
<small class="food-status-badge {% if not food.is_home %}is-needed{% endif %}">
<span class="ui-icon {% if food.is_home %}icon-house{% else %}icon-shopping-cart{% endif %}"></span>
<span>{{ food.availability_label }}</span>
</small>
</span>
</span>
</label>
{% endfor %}
</div>