Kyle DammannandClaude Opus 5.5
23adb882bd
- Tabs "Alle", "Eigene Rezepte", "Favoriten" above the recipe list; search and tag filters stay within the active tab - Menu link to own recipes; empty states per tab - Fix recipe card images rendering portrait instead of 4:3 Co-Authored-By: Claude Opus 5.5 <[email protected]>
90 lines
3.6 KiB
HTML
90 lines
3.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Rezepte{% endblock %}
|
|
{% block content %}
|
|
<div class="page-head">
|
|
<h1>Rezepte</h1>
|
|
<div class="head-actions">
|
|
<a class="button secondary" href="{% url 'recipes:import' %}">Import</a>
|
|
<a class="button" href="{% url 'recipes:create' %}">+ Neu</a>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="tabs" aria-label="Ansicht">
|
|
<a class="tab" href="{% querystring ansicht=None seite=None %}"{% if not active_view %} aria-current="page"{% endif %}>Alle</a>
|
|
<a class="tab" href="{% querystring ansicht="meine" seite=None %}"{% if active_view == "meine" %} aria-current="page"{% endif %}>Eigene Rezepte</a>
|
|
<a class="tab" href="{% querystring ansicht="favoriten" seite=None %}"{% if active_view == "favoriten" %} aria-current="page"{% endif %}>Favoriten</a>
|
|
</nav>
|
|
|
|
<form method="get" class="search" role="search">
|
|
<div class="search-row">
|
|
{{ form.q }}
|
|
<button type="submit" class="button">Suchen</button>
|
|
</div>
|
|
<details class="filters"{% if form.zutat.value %} open{% endif %}>
|
|
<summary>Filter</summary>
|
|
<div class="field"><label for="{{ form.zutat.id_for_label }}">{{ form.zutat.label }}</label>{{ form.zutat }}</div>
|
|
</details>
|
|
{% if active_view %}<input type="hidden" name="ansicht" value="{{ active_view }}">{% endif %}
|
|
{% if active_tag %}<input type="hidden" name="tag" value="{{ active_tag }}">{% endif %}
|
|
</form>
|
|
|
|
{% if tags %}
|
|
<nav class="chips" aria-label="Tags">
|
|
{% for tag in tags %}
|
|
{% if tag.name == active_tag %}
|
|
<a class="chip active" href="{% querystring tag=None seite=None %}">#{{ tag.name }} ✕</a>
|
|
{% else %}
|
|
<a class="chip" href="{% querystring tag=tag.name seite=None %}">#{{ tag.name }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</nav>
|
|
{% endif %}
|
|
|
|
{% if page.object_list %}
|
|
<ul class="recipe-grid">
|
|
{% for recipe in page.object_list %}
|
|
<li>
|
|
<a class="recipe-card" href="{% url 'recipes:detail' recipe.pk %}">
|
|
{% with cover=recipe.cover %}
|
|
{% if cover %}
|
|
<img src="{% url 'recipes:photo' cover.uuid 'klein' %}" alt="" loading="lazy" width="480" height="360">
|
|
{% else %}
|
|
<div class="placeholder" aria-hidden="true">🍲</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
<div class="recipe-card-body">
|
|
<strong>{{ recipe.title }}</strong>
|
|
<span class="muted">
|
|
{% if recipe.total_minutes %}{{ recipe.total_minutes }} Min. · {% endif %}{{ recipe.owner.display_name }}
|
|
{% if not recipe.is_public %} · 🔒{% endif %}{% if recipe.is_favorite %} · ★{% endif %}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
{% if page.has_other_pages %}
|
|
<nav class="pager">
|
|
{% if page.has_previous %}<a class="button secondary" href="{% querystring seite=page.previous_page_number %}">← Zurück</a>{% endif %}
|
|
<span class="muted">Seite {{ page.number }} von {{ page.paginator.num_pages }}</span>
|
|
{% if page.has_next %}<a class="button secondary" href="{% querystring seite=page.next_page_number %}">Weiter →</a>{% endif %}
|
|
</nav>
|
|
{% endif %}
|
|
{% elif filtered and not only_view %}
|
|
<p class="muted">Keine Rezepte gefunden. <a href="{% querystring q=None zutat=None tag=None seite=None %}">Filter zurücksetzen</a></p>
|
|
{% elif active_view == "favoriten" %}
|
|
<div class="card empty"><p>Noch keine Favoriten. Tippe bei einem Rezept auf „☆ Merken“.</p></div>
|
|
{% elif active_view == "meine" %}
|
|
<div class="card empty">
|
|
<p>Du hast noch keine eigenen Rezepte.</p>
|
|
<a class="button" href="{% url 'recipes:create' %}">Rezept anlegen</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="card empty">
|
|
<p>Noch keine Rezepte. Leg das erste an!</p>
|
|
<a class="button" href="{% url 'recipes:create' %}">Rezept anlegen</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|