Refine planner filters and compact selection cards

This commit is contained in:
2026-04-14 09:15:46 +02:00
parent c5dea16c53
commit 6f6269c66d
13 changed files with 451 additions and 108 deletions
+28 -4
View File
@@ -210,15 +210,39 @@
<p class="helper-text">Schon ausgewählt</p>
<div class="selected-components-grid">
{% for component in selected_components %}
{% set component_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(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 }}">
<span aria-hidden="true">×</span>
<span class="sr-only">{{ component.name }} entfernen</span>
</button>
<div class="selected-component-visual">
{% if component.photo_filename %}
<img
src="{{ image_url(component.photo_filename, 'md') }}"
srcset="{{ image_srcset(component.photo_filename) }}"
sizes="{{ image_sizes('grid') }}"
alt="{{ component.name }}"
loading="lazy">
{% else %}
<span class="selected-component-fallback">
<span class="ui-icon {{ component_icon_class }}"></span>
</span>
{% endif %}
</div>
<div class="selected-component-main">
<strong>{{ component.name }}</strong>
<small>{{ component.base_type_label }} · {{ component.visibility_label }}</small>
</div>
<button class="ghost-button selected-component-remove" type="submit" name="remove_component_id" value="{{ component.id }}">
Entfernen
</button>
</article>
{% endfor %}
</div>