hnzio/nouri-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Polish item builders with icon-based selector cards

Browse Source
This commit is contained in:
Florian Heinz
2026-04-13 17:55:21 +02:00
parent 305440a6b2
commit a810162221
10 changed files with 367 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nouri/static/css/styles.css
+229
View File
@@ -848,6 +848,195 @@ legend {
display: none;
}
.daypart-option-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.8rem;
}
.daypart-option {
position: relative;
display: block;
}
.daypart-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.daypart-option-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.7rem;
min-height: 118px;
padding: 1rem 0.9rem;
border-radius: 22px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 84%, #fff 16%);
color: var(--muted);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
cursor: pointer;
}
.daypart-option-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
border-radius: 16px;
background: color-mix(in srgb, var(--surface) 78%, #fff 22%);
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent 24%);
}
.daypart-option-icon .ui-icon {
width: 1.2rem;
height: 1.2rem;
}
.daypart-option-label {
font-weight: 600;
text-align: center;
line-height: 1.25;
}
.daypart-option:hover .daypart-option-card {
border-color: var(--accent-soft);
color: var(--text);
transform: translateY(-1px);
}
.daypart-option input:focus-visible + .daypart-option-card {
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent 55%);
outline-offset: 3px;
}
.daypart-option input:checked + .daypart-option-card {
border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface-strong) 82%);
box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 14%, transparent 86%);
color: var(--text);
}
.daypart-option input:checked + .daypart-option-card .daypart-option-icon {
background: color-mix(in srgb, var(--accent) 16%, var(--surface) 84%);
border-color: color-mix(in srgb, var(--accent) 38%, var(--line) 62%);
}
.meal-style-option-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.8rem;
}
.meal-style-option {
position: relative;
display: block;
}
.meal-style-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.meal-style-option-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.7rem;
min-height: 110px;
padding: 0.95rem 0.85rem;
border-radius: 22px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 84%, #fff 16%);
color: var(--muted);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
cursor: pointer;
}
.meal-style-option-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
border-radius: 16px;
background: color-mix(in srgb, var(--surface) 78%, #fff 22%);
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent 24%);
}
.meal-style-option-icon .ui-icon {
width: 1.15rem;
height: 1.15rem;
}
.meal-style-option-label {
font-weight: 600;
text-align: center;
line-height: 1.25;
}
.meal-style-option:hover .meal-style-option-card {
border-color: var(--accent-soft);
color: var(--text);
transform: translateY(-1px);
}
.meal-style-option input:focus-visible + .meal-style-option-card {
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent 55%);
outline-offset: 3px;
}
.meal-style-option input:checked + .meal-style-option-card {
border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface-strong) 82%);
box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 14%, transparent 86%);
color: var(--text);
}
.meal-style-option input:checked + .meal-style-option-card .meal-style-option-icon {
background: color-mix(in srgb, var(--accent) 16%, var(--surface) 84%);
border-color: color-mix(in srgb, var(--accent) 38%, var(--line) 62%);
}
[data-theme="dark"] .daypart-option-card,
[data-theme="dark"] .meal-style-option-card {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 72%, #4a403c 28%),
color-mix(in srgb, var(--surface-strong) 86%, #241f1d 14%)
);
border-color: color-mix(in srgb, var(--line) 54%, rgba(243, 177, 125, 0.18) 46%);
color: color-mix(in srgb, var(--muted) 92%, white 8%);
box-shadow: inset 0 1px 0 rgba(255, 233, 217, 0.03);
}
[data-theme="dark"] .daypart-option-icon,
[data-theme="dark"] .meal-style-option-icon {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 82%, #544743 18%),
color-mix(in srgb, var(--surface) 88%, #2a2321 12%)
);
border-color: color-mix(in srgb, var(--line) 52%, rgba(243, 177, 125, 0.22) 48%);
}
[data-theme="dark"] .daypart-option:hover .daypart-option-card,
[data-theme="dark"] .meal-style-option:hover .meal-style-option-card {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 66%, #554945 34%),
color-mix(in srgb, var(--surface-strong) 82%, #2b2523 18%)
);
border-color: color-mix(in srgb, var(--accent) 28%, var(--line) 72%);
}
.quick-select-card {
display: flex;
align-items: flex-start;
@@ -1881,6 +2070,46 @@ legend {
mask-image: url("../icons/dayparts/late-snack.svg");
}
.icon-meal-style-sweet {
-webkit-mask-image: url("../icons/meal-styles/sweet.svg");
mask-image: url("../icons/meal-styles/sweet.svg");
}
.icon-meal-style-savory {
-webkit-mask-image: url("../icons/meal-styles/savory.svg");
mask-image: url("../icons/meal-styles/savory.svg");
}
.icon-meal-style-warm {
-webkit-mask-image: url("../icons/meal-styles/warm.svg");
mask-image: url("../icons/meal-styles/warm.svg");
}
.icon-meal-style-cold {
-webkit-mask-image: url("../icons/meal-styles/cold.svg");
mask-image: url("../icons/meal-styles/cold.svg");
}
.icon-meal-style-quick {
-webkit-mask-image: url("../icons/meal-styles/quick.svg");
mask-image: url("../icons/meal-styles/quick.svg");
}
.icon-meal-style-simple {
-webkit-mask-image: url("../icons/meal-styles/simple.svg");
mask-image: url("../icons/meal-styles/simple.svg");
}
.icon-meal-style-prep {
-webkit-mask-image: url("../icons/meal-styles/prep.svg");
mask-image: url("../icons/meal-styles/prep.svg");
}
.icon-meal-style-portable {
-webkit-mask-image: url("../icons/meal-styles/portable.svg");
mask-image: url("../icons/meal-styles/portable.svg");
}
.icon-archive {
-webkit-mask-image: url("../icons/fa/archive.svg");
mask-image: url("../icons/fa/archive.svg");
nouri/static/icons/meal-styles/cold.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M312.2 49.4L312.2 0L264.2 0L264.2 49.4L218.2 16.5L186.2 51.8L264.3 141L264.3 246.4L173 193.7L134.8 81.5L88.2 91.6L93.7 147.9L50.9 123.2L26.9 164.8L69.6 189.5L18.1 212.9L32.7 258.3L149 235.3L240.3 288L149 340.7L32.7 317.7L18.1 363.1L69.6 386.5L26.8 411.2L50.8 452.8L93.6 428.1L88.1 484.4L134.7 494.5L172.9 382.3L264.2 329.6L264.2 435L186.1 524.2L218.1 559.5L264.1 526.6L264.1 576L312.1 576L312.1 526.6L358.2 559.5L390.2 524.2L312.1 435L312.1 329.6L403.4 382.3L441.6 494.5L488.2 484.4L482.7 428.1L525.5 452.8L549.5 411.2L506.7 386.5L558.2 363.1L543.6 317.7L427.3 340.7L336 288L427.3 235.3L543.6 258.3L558.2 212.9L506.7 189.5L549.4 164.8L525.4 123.2L482.7 147.9L488.2 91.6L441.6 81.5L403.4 193.7L312.1 246.4L312.1 141L390.2 51.8L358.2 16.5L312.1 49.4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1016 B

nouri/static/icons/meal-styles/portable.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M191.6 66.9C211.6 38.8 243.9 24 288 24C332.1 24 364.4 38.8 384.4 66.9C400.1 89 406 116.5 407.6 144L480 144C533 144 576 187 576 240L576 552L0 552L0 240C0 187 43 144 96 144L168.4 144C169.9 116.5 175.9 89 191.6 66.9zM324.4 92.1C320.7 85.1 316.3 80.4 311.2 77.4C306.1 74.4 298.8 72 288 72C277.2 72 269.9 74.3 264.8 77.4C259.7 80.5 255.3 85.1 251.6 92.1C245.1 104.2 241.5 121.7 240.4 144L335.6 144C334.5 121.7 330.9 104.2 324.4 92.1zM480 504L480 384L331.5 384C333.8 395.1 337.2 411.1 341.6 432L234.4 432C238.8 411.1 242.2 395.1 244.5 384L96 384L96 504L480 504zM321.4 336L480 336L480 240C480 213.5 458.5 192 432 192L144 192C117.5 192 96 213.5 96 240L96 336L254.6 336L264.5 289.1L311.5 289.1L321.4 336z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 963 B

nouri/static/icons/meal-styles/prep.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M118.2 24L457.8 24L464.7 35.9L548.7 179.9L552 185.5L552 456C552 509 509 552 456 552L120 552C67 552 24 509 24 456L24 185.5L27.3 179.9L111.3 35.9L118.2 24zM120 456C120 482.5 141.5 504 168 504L408 504C434.5 504 456 482.5 456 456L456 216L120 216L120 456zM129.3 168L264 168L264 72L161.3 72L129.3 168zM312 168L446.7 168L414.7 72L312 72L312 168z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 606 B

nouri/static/icons/meal-styles/quick.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M44.6 23C-9.1 63.4-6.2 115.1 25.7 157.4L179 41.9C147.1-.5 98.2-17.5 44.6 23zM399.9 41.9L553.2 157.4C585.1 115.1 588 63.4 534.3 23C480.6-17.4 431.8-.5 399.9 41.9zM288 120C339.2 120 373.7 140.5 396.4 173C419.9 206.7 432 255.2 432 312C432 368.8 419.9 417.3 396.4 451C373.7 483.5 339.1 504 288 504C236.9 504 202.3 483.5 179.6 451C156.1 417.3 144 368.8 144 312C144 255.2 156.1 206.7 179.6 173C202.3 140.5 236.9 120 288 120zM288 72C207 72 146 98.1 105.4 143.2C65.3 187.9 48 248.2 48 312C48 362 58.7 410 82.7 449.9L29.7 512.5L66.3 543.5L112.8 488.5C153.2 528.8 211.8 552 288 552C364.2 552 422.8 528.9 463.2 488.5L509.7 543.5L546.3 512.5L493.3 449.9C517.3 410 528 362 528 312C528 248.3 510.7 187.9 470.6 143.2C430 98.1 369 72 288 72zM312 192L264 192L264 329.3C265.7 329.9 295.1 339.7 352.4 358.8L364.4 362.8L379.6 317.3C378.9 317.1 356.3 309.5 312 294.8L312 192z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

nouri/static/icons/meal-styles/savory.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M528 24L488.2 5.9C481.9 11.4 476.2 17.5 470.5 23.6C460 34.9 445.4 51.8 429.1 74.4C396.4 119.6 356.1 187.8 325.3 280.4L314.8 312L471.8 312L399.8 552L528.1 552L528.1 24zM480 109.1L480 264L425.8 264C441.5 197 462 145.6 480 109.1zM144 192C117.5 192 96 170.5 96 144L96 24L48 24L48 192C48 241.5 85.5 282.3 133.6 287.4L78.5 552L257.5 552L202.4 287.4C250.5 282.2 288 241.5 288 192L288 24L240 24L240 144C240 170.5 218.5 192 192 192L192 24L144 24L144 192zM198.5 504L137.5 504L168 357.7L198.5 504z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 754 B

nouri/static/icons/meal-styles/simple.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M552.5 48L552.5 24L528.5 24L528.5 48L552.5 48zM129.3 481.1C175.6 520.8 224.7 538.1 273.2 535.5C327.3 532.6 376.7 505.1 417.1 464.8C486.5 395.4 519.7 289.4 535.9 204.4C544.1 161.3 548.2 122.4 550.3 94.3C551.3 80.2 551.8 68.8 552.1 60.8C552.2 56.8 552.3 53.7 552.3 51.6C552.3 50.5 552.3 49.7 552.3 49.1L552.3 48.4L552.3 48.2L552.3 48.1L552.3 48.1L528.3 48.1C528.3 24.1 528.3 24.1 528.3 24.1L528.2 24.1L528 24.1L527.3 24.1C526.7 24.1 525.9 24.1 524.8 24.1C522.6 24.1 519.5 24.2 515.6 24.3C507.6 24.6 496.2 25.1 482.1 26.1C454 28.2 415.1 32.3 372 40.5C288.6 56.4 185.2 88.6 115.8 155.2L115.8 155.2C115.1 155.9 114.4 156.6 113.8 157.3C113.1 158 112.4 158.7 111.7 159.4C71.3 199.8 43.9 249.2 40.9 303.3C38.3 351.8 55.6 401 95.3 447.2L7.5 535L41.4 569L129.3 481.1zM196.8 413.6L226.4 384L360.5 384L360.5 336L274.4 336L425.4 185L391.5 151.1L240.5 302.1L240.5 216L192.5 216L192.5 350.1L162.8 379.8C128.6 341.6 113 308.8 110.1 280.8C107 250.6 118.5 221.2 147.8 191.1C206.8 133.6 299.4 103.2 381.2 87.6C422 79.8 459 75.9 485.8 73.9C492.4 73.4 498.4 73.1 503.7 72.8C503.4 78.1 503.1 84 502.6 90.7C500.6 117.5 496.7 154.5 488.9 195.3C474.4 271 447.3 356.2 397.6 415.1L397.5 415C366.4 446.1 333.2 461.4 298.9 460.5C269 459.7 234.6 446.4 196.8 413.6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

nouri/static/icons/meal-styles/sweet.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M312 144L312 48L264 48L264 144L192 144L192 48L144 48L144 144L96 144C43 144 0 187 0 240L0 528L576 528L576 240C576 187 533 144 480 144L432 144L432 48L384 48L384 144L312 144zM432 192C458.5 192 480 213.5 480 240L480 336C472.6 336 462.4 332.4 449 319C430.4 300.4 408.6 288 384 288C359.4 288 337.6 300.4 319 319C305.6 332.4 295.4 336 288 336C280.6 336 270.4 332.4 257 319C238.4 300.4 216.6 288 192 288C167.4 288 145.6 300.4 127 319C113.6 332.4 103.4 336 96 336L96 240C96 213.5 117.5 192 144 192L432 192zM96 480L96 384C120.6 384 142.4 371.6 161 353C174.4 339.6 184.6 336 192 336C199.4 336 209.6 339.6 223 353C241.6 371.6 263.4 384 288 384C312.6 384 334.4 371.6 353 353C366.4 339.6 376.6 336 384 336C391.4 336 401.6 339.6 415 353C433.6 371.6 455.4 384 480 384L480 480L96 480z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

nouri/static/icons/meal-styles/warm.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M309.6 0L266.4 0L222 47.9C208.1 62.9 188.5 71.2 168.1 70.9L89.2 63L63 89.4L70.9 164.2C71.2 183.7 63.6 202.5 49.8 216.3L0 266.1L0 309.6L47.9 354C62.9 367.9 71.2 387.5 70.9 407.9L63 486.7L91 512.7L164.3 499.9C188.2 497.7 211.6 507.6 226.7 526.3L266.9 575.9L309.2 575.9L349.4 526.3C364.5 507.6 387.9 497.8 411.8 499.9L485.1 512.7L513.1 486.7L505.2 407.9C504.9 387.5 513.2 367.9 528.2 354L576.1 309.6L576.1 266.1L526.3 216.3C512.5 202.5 504.9 183.7 505.2 164.2L513.1 89.4L486.8 63L408 70.9C387.6 71.2 368 62.9 354.1 47.9L309.6 0zM288 64.4L292.8 73.8C319.6 125.9 380.2 151 436 133.1L446 129.9L442.8 139.9C424.9 195.7 450 256.3 502.1 283.1L511.5 287.9L502.1 292.7C450 319.5 424.9 380.1 442.8 435.9L446 445.9L436 442.7C380.2 424.8 319.6 449.9 292.8 502L288 511.4L283.2 502C256.4 449.9 195.8 424.8 140 442.7L130 445.9L133.2 435.9C151.1 380.1 126 319.5 73.9 292.7L64.5 287.9L73.9 283.1C126 256.3 151.1 195.7 133.2 139.9L130 129.9L140 133.1C195.8 151 256.4 125.9 283.2 73.8L288 64.4zM322.3 224C330.9 238.4 336 260.5 336 288C336 315.5 330.9 337.6 322.3 352C314.5 365.1 303.9 372 288 372C272.1 372 261.5 365.1 253.7 352C245.1 337.6 240 315.5 240 288C240 260.5 245.1 238.4 253.7 224C261.5 210.9 272.1 204 288 204C303.9 204 314.5 210.9 322.3 224zM288 156C244.8 156 210.8 170 187.8 195.6C165.2 220.7 156 254.1 156 288C156 321.9 165.2 355.3 187.8 380.4C210.8 406 244.8 420 288 420C331.2 420 365.2 406 388.2 380.4C410.8 355.3 420 321.9 420 288C420 254.1 410.8 220.7 388.2 195.6C365.2 170 331.2 156 288 156z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

nouri/templates/items/form.html
+117 -17
View File
@@ -5,7 +5,13 @@
<div>
<p class="eyebrow">{{ item_kind_labels[kind] }}</p>
<h1>{% if item %}{{ item.name }} bearbeiten{% else %}Neue{% endif %} {{ item_kind_singular_labels[kind] }}</h1>
<p class="lead">Nur das Nötigste: Name, Sichtbarkeit, für wen etwas gedacht ist, Bild, Tageszeiten und eine kleine Notiz.</p>
<p class="lead">
{% if kind == 'food' %}
Name, Sichtbarkeit und ein paar ruhige Hinweise dazu, wie ein Lebensmittel in Vorschlägen gut passt.
{% else %}
Name, Sichtbarkeit, Tageszeit und ein kurzer Charakter der Idee. So bleiben Mahlzeitenideen alltagsnah und leicht pflegbar.
{% endif %}
</p>
</div>
{% if item %}
<div class="intro-pills">
@@ -45,12 +51,50 @@
</label>
</div>
{% if kind == 'food' %}
<label>
Kategorie
<select name="category">
<option value="">Ohne Kategorie</option>
{% for category in categories %}
<option value="{{ category }}" {% if form_data.category == category %}selected{% endif %}>{{ category }}</option>
Passt eher zu
<select name="base_type">
{% for value, label in builder_options %}
<option value="{{ value }}" {% if form_data.base_type == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
<small class="helper-text">{{ builder_descriptions[form_data.base_type] }}</small>
</label>
<div class="dual-grid">
<label>
Rolle in Vorschlägen
<select name="suggestion_role">
{% for value, label in food_role_options %}
<option value="{{ value }}" {% if form_data.suggestion_role == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
<small class="helper-text">{{ food_role_descriptions[form_data.suggestion_role] }}</small>
</label>
<label>
Wird eher vorgeschlagen
<select name="suggestion_priority">
{% for value, label in suggestion_priority_options %}
<option value="{{ value }}" {% if form_data.suggestion_priority == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</label>
</div>
<label class="inline-check">
<input type="checkbox" name="can_be_meal_core" value="1" {% if form_data.can_be_meal_core %}checked{% endif %}>
<span>Kann gut eine Mahlzeit tragen</span>
</label>
<small class="helper-text">Praktisch für Dinge wie Tofu, Joghurt oder Müsli. Extras wie Proteinpulver, Tomatenmark oder Saaten bleiben so eher Ergänzungen.</small>
{% else %}
<div class="dual-grid">
<label>
Mahlzeittyp
<select name="meal_type">
{% for value, label in meal_type_options %}
<option value="{{ value }}" {% if form_data.meal_type == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</label>
@@ -64,6 +108,38 @@
</select>
<small class="helper-text">Hilft Nouri dabei, passende Ideen etwas ruhiger und persönlicher zu sortieren.</small>
</label>
</div>
<fieldset>
<legend>Charakter der Mahlzeit</legend>
<div class="checkbox-grid meal-style-option-grid">
{% for value, label in meal_style_options %}
<label class="meal-style-option">
<input type="checkbox" name="meal_tags" value="{{ value }}" {% if value in form_data.meal_tags %}checked{% endif %}>
<span class="meal-style-option-card">
<span class="meal-style-option-icon">
<span class="ui-icon icon-meal-style-{{ value }}"></span>
</span>
<span class="meal-style-option-label">{{ label }}</span>
</span>
</label>
{% endfor %}
</div>
<small class="helper-text">Nur das auswählen, was wirklich hilft. Alles andere kann leer bleiben.</small>
</fieldset>
{% endif %}
{% if kind == 'food' %}
<label>
Energiedichte
<select name="energy_density">
{% for value, label in energy_density_options %}
<option value="{{ value }}" {% if form_data.energy_density == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
<small class="helper-text">Hilft Nouri dabei, passende Ideen etwas ruhiger und persönlicher zu sortieren.</small>
</label>
{% endif %}
<label>
Notiz
@@ -88,11 +164,16 @@
<fieldset>
<legend>Passende Tageszeiten</legend>
<div class="checkbox-grid">
<div class="checkbox-grid daypart-option-grid">
{% for daypart in dayparts %}
<label class="check-option">
<label class="daypart-option">
<input type="checkbox" name="daypart_ids" value="{{ daypart.id }}" {% if daypart.id in form_data.daypart_ids %}checked{% endif %}>
<span>{{ daypart.name }}</span>
<span class="daypart-option-card">
<span class="daypart-option-icon">
<span class="ui-icon {{ daypart_icon_class(daypart.slug) }}"></span>
</span>
<span class="daypart-option-label">{{ daypart.name }}</span>
</span>
</label>
{% endfor %}
</div>
@@ -101,7 +182,7 @@
{% if kind == 'meal' %}
<fieldset>
<legend>Bestandteile der Mahlzeitenidee</legend>
<p class="muted">Du kannst eine Mahlzeit frei als Idee anlegen oder sie aus sichtbaren Lebensmitteln zusammenstellen.</p>
<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>
<div class="inline-form">
<label class="wide">
Lebensmittel suchen
@@ -128,9 +209,9 @@
</div>
<div class="checkbox-grid filterable-checkbox-group" data-filter-group>
{% for food in group["items"] %}
<label class="check-option" data-filter-label="{{ food.name|lower }} {{ food.category|default('', true)|lower }}">
<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 }}">
<input type="checkbox" name="component_ids" value="{{ food.id }}" {% if food.id in form_data.component_ids %}checked{% endif %}>
<span>{{ food.name }} · {{ food.visibility_label }} · {{ food.for_label }}</span>
<span>{{ food.name }} · {{ food.base_type_label }} · {{ food.visibility_label }}</span>
</label>
{% endfor %}
</div>
@@ -151,11 +232,26 @@
<input type="text" name="quick_food_name" value="{{ form_data.quick_food_name }}" placeholder="z. B. Hüttenkäse">
</label>
<label>
Kategorie
<select name="quick_food_category">
<option value="">Ohne Kategorie</option>
{% for category in categories %}
<option value="{{ category }}" {% if form_data.quick_food_category == category %}selected{% endif %}>{{ category }}</option>
Passt eher zu
<select name="quick_food_base_type">
{% for value, label in builder_options %}
<option value="{{ value }}" {% if form_data.quick_food_base_type == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</label>
<label>
Rolle in Vorschlägen
<select name="quick_food_role">
{% for value, label in food_role_options %}
<option value="{{ value }}" {% if form_data.quick_food_role == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</label>
<label>
Wird eher vorgeschlagen
<select name="quick_food_priority">
{% for value, label in suggestion_priority_options %}
<option value="{{ value }}" {% if form_data.quick_food_priority == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</label>
@@ -167,6 +263,10 @@
{% endfor %}
</select>
</label>
<label class="inline-check">
<input type="checkbox" name="quick_food_can_be_meal_core" value="1" {% if form_data.quick_food_can_be_meal_core %}checked{% endif %}>
<span>Kann gut eine Mahlzeit tragen</span>
</label>
<label class="wide">
Notiz
<input type="text" name="quick_food_note" value="{{ form_data.quick_food_note }}" placeholder="Optional">