kobold-ai/cookbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make cover full bleed, TOC single column readable, and unify header with clean kebab menu on desktop

Browse Source
This commit is contained in:
kobold-ai
2026-10-16 21:11:43 +02:00
parent 3760ad0e3f
commit 0d61616396
5 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/main.py
+2 -2
View File
@@ -400,9 +400,9 @@ async def cookbook_view(
# --- Seitenzahlen & Inhaltsverzeichnis (TOC) berechnen ---
# Seite 1: Cover
# TOC: 1 Seite (bis ca. 55 Rezepte passt alles wunderbar auf 1 A4-Seite in 2 Spalten), 2 Seiten erst bei sehr vielen Rezepten
# TOC: Bei einzeiligem Inhaltsverzeichnis (1 Spalte) passen ca. 26 Rezepte + Kapitelheader ideal auf 1 Seite
total_display_recipes = len(all_recipes)
toc_page_count = 2 if total_display_recipes > 55 else (1 if total_display_recipes > 0 else 0)
toc_page_count = 2 if total_display_recipes > 26 else (1 if total_display_recipes > 0 else 0)
current_page = 1 + toc_page_count + 1
display_chapters_data = []
app/static/cookbook.css
+6 -7
View File
@@ -1487,13 +1487,11 @@
/* --- Mobile Navigation: 3-Punkte (Kebab) Menü --- */
.desktop-nav-actions {
display: flex;
align-items: center;
gap: 10px;
display: none !important;
}
.mobile-nav-wrapper {
display: none;
display: block !important;
position: relative;
}
@@ -1726,8 +1724,9 @@
}
.toc-columns {
columns: 2;
column-gap: 10mm;
columns: 1;
column-count: 1;
column-gap: 0;
flex: 1;
}
@@ -1797,7 +1796,7 @@
}
.toc-rec-title {
max-width: 75%;
max-width: 84%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
app/templates/cookbook.html
+34 -8
View File
@@ -11,7 +11,7 @@
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.6">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.7">
<style id="print-engine-styles">
/* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */
@media screen {
@@ -119,15 +119,28 @@
/* 1. COVER */
.page.cover {
display: block !important;
padding: 50mm 14mm 16mm 14mm !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 210mm !important;
min-width: 210mm !important;
max-width: 210mm !important;
height: 297mm !important;
min-height: 297mm !important;
max-height: 297mm !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
background-color: var(--creme, #FAF6F0) !important;
background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 200 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 5 0 Q 15 200 0 400 T 10 800 L 20 800 Q 10 600 25 400 T 15 0 Z' fill='%231E4D3B' opacity='0.9'/%3E%3Cpath d='M 35 0 Q 25 250 40 500 T 30 800 L 55 800 Q 65 500 45 250 T 50 0 Z' fill='%231E4D3B' opacity='0.85'/%3E%3Cpath d='M 70 0 Q 80 300 65 600 T 75 800 L 85 800 Q 75 500 90 300 T 80 0 Z' fill='%231E4D3B' opacity='0.9'/%3E%3Cpath d='M 105 0 Q 95 200 110 400 T 100 800 L 125 800 Q 135 600 120 400 T 125 0 Z' fill='%231E4D3B' opacity='0.8'/%3E%3Cpath d='M 140 0 Q 150 250 135 500 T 145 800 L 155 800 Q 145 500 160 250 T 150 0 Z' fill='%231E4D3B' opacity='0.9'/%3E%3Cpath d='M 175 0 Q 165 300 180 600 T 170 800 L 195 800 Q 205 500 185 300 T 190 0 Z' fill='%231E4D3B' opacity='0.85'/%3E%3C/svg%3E") !important;
background-size: 100% 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
page-break-before: avoid !important;
break-before: avoid !important;
page-break-after: always !important;
break-after: page !important;
page-break-inside: avoid !important;
@@ -178,8 +191,8 @@
.toc-columns {
display: block !important;
column-count: 2 !important;
column-gap: 8mm !important;
column-count: 1 !important;
columns: 1 !important;
margin-bottom: 4mm !important;
}
@@ -190,9 +203,22 @@
}
.toc-recipe-item {
margin-bottom: 2px !important;
font-size: 0.82rem !important;
line-height: 1.22 !important;
margin-bottom: 2mm !important;
font-size: 0.85rem !important;
line-height: 1.25 !important;
}
.toc-recipe-link {
display: flex !important;
align-items: baseline !important;
width: 100% !important;
}
.toc-rec-title {
max-width: 84% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* 3. KAPITEL-TRENNSEITEN */
app/templates/recipe_detail.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ recipe.title }} – Mein Kochbuch</title>
<link rel="stylesheet" href="/static/cookbook.css?v=4.4">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.7">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍽️</text></svg>">
</head>
<body class="cookbook-body">
app/templates/shopping_list.html
+1 -1
View File
@@ -12,7 +12,7 @@
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.5">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.7">
<style>
:root {
--shop-green: var(--tannengruen, #1E4D3B);