marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(planner): RecipePicker UI polish from review

Browse Source 
- Badge font-size 8px → 9px (WCAG minimum)
- Score badge toFixed(1) to avoid misleading "+0 Punkte"
- Self-contain @keyframes pulse in component <style> block
- Wählen buttons use var(--green-dark) per design system

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-09 12:17:09 +02:00
parent 8686f9eb9f
commit cb921b3c0f
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/lib/planner/RecipePicker.svelte
View File

@@ -108,15 +108,15 @@
<span <span
data-testid="badge-{suggestion.recipe.id}" data-testid="badge-{suggestion.recipe.id}"
data-type="good" data-type="good"
style="display: inline-block; margin-top: 3px; font-size: 8px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--green-tint); color: var(--green-dark);" style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--green-tint); color: var(--green-dark);"
> >
↑ +{(suggestion.scoreDelta ?? 0).toFixed(0)} Punkte ↑ +{(suggestion.scoreDelta ?? 0).toFixed(1)} Punkte
</span> </span>
{:else} {:else}
<span <span
data-testid="badge-{suggestion.recipe.id}" data-testid="badge-{suggestion.recipe.id}"
data-type="warning" data-type="warning"
style="display: inline-block; margin-top: 3px; font-size: 8px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--yellow-tint); color: var(--yellow-text);" style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--yellow-tint); color: var(--yellow-text);"
> >
⚠ Variationskonflikt ⚠ Variationskonflikt
</span> </span>
@@ -126,7 +126,7 @@
type="button" type="button"
aria-label="Wählen" aria-label="Wählen"
onclick={() => onpick(suggestion.recipe.id, suggestion.recipe.name)} onclick={() => onpick(suggestion.recipe.id, suggestion.recipe.name)}
style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green); color: #fff; border: none; cursor: pointer;" style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green-dark); color: #fff; border: none; cursor: pointer;"
> >
+ Wählen + Wählen
</button> </button>
@@ -167,7 +167,7 @@
type="button" type="button"
aria-label="Wählen" aria-label="Wählen"
onclick={() => onpick(recipe.id, recipe.name)} onclick={() => onpick(recipe.id, recipe.name)}
style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green); color: #fff; border: none; cursor: pointer;" style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green-dark); color: #fff; border: none; cursor: pointer;"
> >
+ Wählen + Wählen
</button> </button>
@@ -175,3 +175,10 @@
{/each} {/each}
{/if} {/if}
</div> </div>
<style>
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
</style>