style(recipes): swap heart emoji for lucide icon
Replaces heart/black-heart emoji on the favorite button and the card favorite indicators with the lucide Heart icon. Favorited state uses a vivid #ff2d55 fill with layered drop-shadows so the mark reads against colorful recipe photos; unfavorited button shows an outlined white heart.
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { browser } from '$app/environment';
|
||||
import { enhance } from '$app/forms';
|
||||
import { page } from '$app/stores';
|
||||
import Heart from '@lucide/svelte/icons/heart';
|
||||
|
||||
let { recipeId, isFavorite = $bindable(false), isLoggedIn = false } = $props<{ recipeId: string, isFavorite?: boolean, isLoggedIn?: boolean }>();
|
||||
|
||||
@@ -44,21 +45,28 @@
|
||||
<style>
|
||||
.favorite-button {
|
||||
all: unset;
|
||||
font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
|
||||
filter:
|
||||
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6))
|
||||
drop-shadow(0 0 3px rgba(0, 0, 0, 0.45));
|
||||
position: absolute;
|
||||
bottom: 0.5em;
|
||||
right: 0.5em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.favorite-button.is-favorite {
|
||||
color: #ff2d55;
|
||||
}
|
||||
|
||||
.favorite-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.favorite-button:hover,
|
||||
.favorite-button:focus-visible {
|
||||
transform: scale(1.2);
|
||||
@@ -69,14 +77,16 @@
|
||||
<form method="post" action="?/toggleFavorite" style="display: inline;" use:enhance>
|
||||
<input type="hidden" name="recipeId" value={recipeId} />
|
||||
<input type="hidden" name="isFavorite" value={isFavorite} />
|
||||
<button
|
||||
<button
|
||||
type="submit"
|
||||
class="favorite-button"
|
||||
class:is-favorite={isFavorite}
|
||||
disabled={isLoading}
|
||||
onclick={toggleFavorite}
|
||||
aria-label={isFavorite ? 'Favorit entfernen' : 'Als Favorit speichern'}
|
||||
title={isFavorite ? 'Favorit entfernen' : 'Als Favorit speichern'}
|
||||
>
|
||||
{isFavorite ? '❤️' : '🖤'}
|
||||
<Heart size={24} strokeWidth={2} fill={isFavorite ? 'currentColor' : 'none'} />
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
@@ -2,6 +2,7 @@
|
||||
import "$lib/css/shake.css";
|
||||
import "$lib/css/icon.css";
|
||||
import { onMount } from "svelte";
|
||||
import Heart from '@lucide/svelte/icons/heart';
|
||||
|
||||
let {
|
||||
recipe,
|
||||
@@ -182,10 +183,13 @@ function preloadHeroImage() {
|
||||
|
||||
.favorite-indicator{
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
top: 0.1em;
|
||||
left: 0.1em;
|
||||
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
|
||||
top: 0.4em;
|
||||
left: 0.4em;
|
||||
display: flex;
|
||||
color: #ff2d55;
|
||||
filter:
|
||||
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7))
|
||||
drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
.translation-badge{
|
||||
@@ -240,7 +244,9 @@ function preloadHeroImage() {
|
||||
<img class="image" class:loaded={isloaded} src={'https://bocken.org/static/rezepte/thumb/' + img_name} loading={loading_strat} alt="{img_alt}" onload={() => isloaded=true}/>
|
||||
</div>
|
||||
{#if showFavoriteIndicator && isFavorite}
|
||||
<div class="favorite-indicator">❤️</div>
|
||||
<div class="favorite-indicator" aria-label="Favorit">
|
||||
<Heart size={28} strokeWidth={2} fill="currentColor" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if translationStatus !== undefined}
|
||||
<div class="translation-badge {translationStatus || 'none'}">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import "$lib/css/shake.css";
|
||||
import Heart from '@lucide/svelte/icons/heart';
|
||||
|
||||
let {
|
||||
recipe,
|
||||
@@ -143,9 +144,11 @@
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
left: 0.5em;
|
||||
font-size: 1.1rem;
|
||||
font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
|
||||
filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
|
||||
display: flex;
|
||||
color: #ff2d55;
|
||||
filter:
|
||||
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7))
|
||||
drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -156,7 +159,9 @@
|
||||
<div class="compact-card" onclick={activateTransitions}>
|
||||
<a href="{routePrefix}/{recipe.short_name}" class="card-link" aria-label={recipe.name}></a>
|
||||
{#if showFavoriteIndicator && isFavorite}
|
||||
<span class="favorite">❤️</span>
|
||||
<span class="favorite" aria-label="Favorit">
|
||||
<Heart size={18} strokeWidth={2} fill="currentColor" />
|
||||
</span>
|
||||
{/if}
|
||||
<div class="img-wrap" style:background-color={img_color}>
|
||||
<img
|
||||
|
||||
Reference in New Issue
Block a user