dammann/Kochbuch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tabs for all, own and favourite recipes

Browse Source 
- 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]>
This commit is contained in:
Kyle Dammann
2026-10-31 01:45:29 +01:00
co-authored by Claude Opus 5.5
parent c76fd119cf
commit 23adb882bd
6 changed files with 56 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/app.css
+10 -1
View File
@@ -209,7 +209,7 @@ input[type="search"] {
display: block; height: 100%; overflow: hidden; text-decoration: none; color: var(--text);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.recipe-card img, .recipe-card .placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.recipe-card img, .recipe-card .placeholder { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.recipe-card .placeholder { display: grid; place-items: center; font-size: 2.5rem; background: var(--border); }
.recipe-card-body { padding: 0.6rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; line-height: 1.3; }
.recipe-card-body .muted { font-size: 0.82rem; }
@@ -283,3 +283,12 @@ code { font-size: 0.9em; }
.help-box { border-left: 4px solid var(--accent); }
.help-box ol { padding-left: 1.2rem; margin: 0; }
.help-box li { margin-bottom: 0.4rem; }
/* --- Tabs ---------------------------------------------------------------------------- */
.tabs { display: flex; gap: 0.25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
flex: 0 0 auto; padding: 0.6rem 0.9rem; min-height: var(--tap); display: flex; align-items: center;
color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }