recipes: replace Card with CompactCard + CSS grid on all sub-pages

Migrate all recipe sub-pages from the old fixed-size Card component inside flex-wrap Recipes wrapper to CompactCard with responsive CSS grid for visual consistency with the main recipes page.
2026-02-16 18:46:59 +01:00
parent 7e94758b23
commit c53aee7123
13 changed files with 107 additions and 91 deletions
--- a/src/app.css
+++ b/src/app.css
@@ -344,3 +344,28 @@ a:focus-visible {
 		color: var(--nord0);
 	}
 }
+
+/* ============================================
+   RECIPE GRID
+   Responsive card grid used across recipe pages
+   ============================================ */
+
+.recipe-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 1.5em;
+	padding: 0 1.5em;
+	max-width: 1400px;
+	margin: 0 auto 2em;
+}
+@media (min-width: 600px) {
+	.recipe-grid {
+		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	}
+}
+@media (min-width: 1024px) {
+	.recipe-grid {
+		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+		gap: 1.8em;
+	}
+}
--- a/src/lib/components/recipes/CompactCard.svelte
+++ b/src/lib/components/recipes/CompactCard.svelte
@@ -4,6 +4,7 @@
 	let {
 		recipe,
 		current_month = 0,
+		icon_override = false,
 		isFavorite = false,
 		showFavoriteIndicator = false,
 		loading_strat = "lazy",
@@ -19,7 +20,7 @@
 		recipe.images?.[0]?.alt || recipe.name
 	);

-	const isInSeason = $derived(recipe.season?.includes(current_month));
+	const isInSeason = $derived(icon_override || recipe.season?.includes(current_month));
 </script>
 <style>
 .compact-card {
--- a/src/lib/components/recipes/RecipeEditor.svelte
+++ b/src/lib/components/recipes/RecipeEditor.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import CardAdd from '$lib/components/recipes/CardAdd.svelte';
    	import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    	import Card from '$lib/components/recipes/Card.svelte';
    	import Search from '$lib/components/recipes/Search.svelte';
 	import SeasonSelect from '$lib/components/recipes/SeasonSelect.svelte';
 	import CreateIngredientList from '$lib/components/recipes/CreateIngredientList.svelte';
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -306,27 +306,6 @@
 	z-index: 10;
 }

-/* ─── Recipe grid ─── */
-.recipe-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	gap: 1.5em;
-	padding: 0 1.5em;
-	max-width: 1400px;
-	margin: 0 auto 2em;
-}
-@media (min-width: 600px) {
-	.recipe-grid {
-		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-	}
-}
-@media (min-width: 1024px) {
-	.recipe-grid {
-		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-		gap: 1.8em;
-	}
-}
-
 .sentinel {
 	height: 1px;
 }
--- a/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import Recipes from '$lib/components/recipes/Recipes.svelte';
-	import Card from '$lib/components/recipes/Card.svelte';
+	import CompactCard from '$lib/components/recipes/CompactCard.svelte';

 	let { data } = $props<{ data: PageData }>();
 	let current_month = new Date().getMonth() + 1;
@@ -79,6 +78,31 @@ h1 {
 		color: var(--nord2);
 	}
 }
+.card-wrapper {
+	position: relative;
+}
+.translation-badge {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	padding: 0.4rem 0.8rem;
+	border-radius: 4px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+	z-index: 3;
+	color: var(--nord0);
+	pointer-events: none;
+}
+.translation-badge.none {
+	background-color: var(--nord14);
+}
+.translation-badge.pending {
+	background-color: var(--nord13);
+}
+.translation-badge.needs_update {
+	background-color: var(--nord12);
+}
 .empty-state {
 	text-align: center;
 	margin-top: 3rem;
@@ -121,16 +145,26 @@ h1 {
 		</div>
 	</div>

-	<Recipes>
-		{#each data.untranslated as recipe}
-			<Card
-				{recipe}
-				{current_month}
-				routePrefix="/{data.recipeLang}"
-				translationStatus={recipe.translationStatus}
-			></Card>
+	<div class="recipe-grid">
+		{#each data.untranslated as recipe (recipe._id)}
+			<div class="card-wrapper">
+				<CompactCard
+					{recipe}
+					{current_month}
+					routePrefix="/{data.recipeLang}"
+				/>
+				<div class="translation-badge {recipe.translationStatus || 'none'}">
+					{#if recipe.translationStatus === 'pending'}
+						Freigabe ausstehend
+					{:else if recipe.translationStatus === 'needs_update'}
+						Aktualisierung erforderlich
+					{:else}
+						Keine Übersetzung
+					{/if}
+				</div>
+			</div>
 		{/each}
-	</Recipes>
+	</div>
 {:else}
 	<div class="empty-state">
 		<p>Alle Rezepte sind übersetzt!</p>
--- a/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
    import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
    import Search from '$lib/components/recipes/Search.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    import { rand_array } from '$lib/js/randomize';
    import { createSearchFilter } from '$lib/js/searchFilter.svelte';

@@ -28,10 +27,8 @@

 <h1>{label} <q>{data.category}</q>:</h1>
 <Search category={data.category} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
-<section>
-<Recipes>
-	{#each rand_array(filteredRecipes) as recipe}
-		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+<div class="recipe-grid">
+	{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+		<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 	{/each}
-</Recipes>
-</section>
+</div>
--- a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
    import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    import Search from '$lib/components/recipes/Search.svelte';
    import { createSearchFilter } from '$lib/js/searchFilter.svelte';

@@ -69,11 +68,11 @@ h1{
 {#if data.error}
    <p class="empty-state">{labels.errorLoading} {data.error}</p>
 {:else if filteredFavorites.length > 0}
-    <Recipes>
-        {#each filteredFavorites as recipe}
-            <Card {recipe} {current_month} isFavorite={true} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}"></Card>
+    <div class="recipe-grid">
+        {#each filteredFavorites as recipe (recipe._id)}
+            <CompactCard {recipe} {current_month} isFavorite={true} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}" />
        {/each}
-    </Recipes>
+    </div>
 {:else if data.favorites.length > 0}
    <div class="empty-state">
        <p>{isEnglish ? 'No matching favorites found.' : 'Keine passenden Favoriten gefunden.'}</p>
--- a/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
@@ -1,10 +1,5 @@
 <script lang="ts">
    import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte'
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
    let { data } = $props<{ data: PageData }>();

    const isEnglish = $derived(data.lang === 'en');
--- a/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
    import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
    import IconLayout from '$lib/components/recipes/IconLayout.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    let { data } = $props<{ data: PageData }>();
    import { rand_array } from '$lib/js/randomize';

@@ -36,10 +33,10 @@

 <IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}>
 	{#snippet recipesSlot()}
-		<Recipes>
-			{#each rand_array(filteredRecipes) as recipe}
-				<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+		<div class="recipe-grid">
+			{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+				<CompactCard {recipe} icon_override={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 			{/each}
-		</Recipes>
+		</div>
 	{/snippet}
 </IconLayout>
--- a/src/routes/[recipeLang=recipeLang]/search/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/search/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
    import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
    import Search from '$lib/components/recipes/Search.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    let { data } = $props<{ data: PageData }>();
    let current_month = new Date().getMonth() + 1;

@@ -115,11 +114,11 @@
 {/if}

 {#if displayedRecipes.length > 0}
-    <Recipes>
-        {#each displayedRecipes as recipe}
-            <Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}"></Card>
+    <div class="recipe-grid">
+        {#each displayedRecipes as recipe (recipe._id)}
+            <CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}" />
        {/each}
-    </Recipes>
+    </div>
 {:else if (data.query || hasActiveSearch) && !data.error}
    <div class="search-info">
        <p>{labels.noResults}</p>
--- a/src/routes/[recipeLang=recipeLang]/season/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/season/+page.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
    import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
    import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte'
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    let { data } = $props<{ data: PageData }>();
    let current_month = new Date().getMonth() + 1
    import { rand_array } from '$lib/js/randomize';
@@ -43,10 +40,10 @@

 <SeasonLayout active_index={current_month-1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}>
 	{#snippet recipesSlot()}
-		<Recipes>
-			{#each rand_array(filteredRecipes) as recipe}
-				<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+		<div class="recipe-grid">
+			{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+				<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 			{/each}
-		</Recipes>
+		</div>
 	{/snippet}
 </SeasonLayout>
--- a/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
    import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
    import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    let { data } = $props<{ data: PageData }>();

    const isEnglish = $derived(data.lang === 'en');
@@ -41,10 +38,10 @@

 <SeasonLayout active_index={data.month -1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} onSearchResults={handleSearchResults}>
 	{#snippet recipesSlot()}
-		<Recipes>
-			{#each rand_array(filteredRecipes) as recipe}
-				<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+		<div class="recipe-grid">
+			{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+				<CompactCard {recipe} icon_override={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 			{/each}
-		</Recipes>
+		</div>
 	{/snippet}
 </SeasonLayout>
--- a/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
    import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    import Search from '$lib/components/recipes/Search.svelte';
    import { rand_array } from '$lib/js/randomize';
    import { createSearchFilter } from '$lib/js/searchFilter.svelte';
@@ -28,10 +27,8 @@

 <h1>{label} <q>{data.tag}</q>:</h1>
 <Search tag={data.tag} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
-<section>
-<Recipes>
-	{#each rand_array(filteredRecipes) as recipe}
-		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+<div class="recipe-grid">
+	{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+		<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 	{/each}
-	</Recipes>
-</section>
+</div>