Release Nouri 1.3.2 with mobile selection improvements
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -17,9 +17,12 @@
|
||||
<input
|
||||
type="text"
|
||||
name="item_search"
|
||||
list="shopping-food-options"
|
||||
placeholder="Nach Lebensmitteln suchen"
|
||||
autocomplete="off"
|
||||
data-filter-input
|
||||
data-filter-target="#shopping-food-options"
|
||||
data-filter-limit="8"
|
||||
data-filter-hide-empty
|
||||
>
|
||||
</label>
|
||||
<label>
|
||||
@@ -31,11 +34,46 @@
|
||||
placeholder="z. B. TK, Dose, frisch"
|
||||
>
|
||||
</label>
|
||||
<datalist id="shopping-food-options">
|
||||
<div class="shopping-add-grid shopping-add-results" id="shopping-food-options">
|
||||
{% for item in addable_items %}
|
||||
<option value="{{ item.name }}"></option>
|
||||
{% 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') %}
|
||||
<button
|
||||
class="shopping-add-card"
|
||||
type="submit"
|
||||
name="item_id"
|
||||
value="{{ item.id }}"
|
||||
data-filter-label="{{ item.name|lower }} {{ item.category|default('', true)|lower }} {{ item.base_type_label|lower }} {{ item.availability_label|lower }}"
|
||||
>
|
||||
<span class="shopping-add-card-visual">
|
||||
{% if item.photo_filename %}
|
||||
<img
|
||||
src="{{ image_url(item.photo_filename, 'md') }}"
|
||||
srcset="{{ image_srcset(item.photo_filename) }}"
|
||||
sizes="{{ image_sizes('grid') }}"
|
||||
alt=""
|
||||
loading="lazy">
|
||||
{% else %}
|
||||
<span class="shopping-add-card-fallback">
|
||||
<span class="ui-icon {{ item_icon_class }}"></span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="shopping-add-card-copy">
|
||||
<strong>{{ item.name }}</strong>
|
||||
<small>{{ item.availability_label }}</small>
|
||||
</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
<button type="submit">Auf die Liste</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user