feat(home): URL-Import-Shortcut auf Desktop
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s
Unter dem Hero-Suchfeld steht ab Viewport >=820px eine zweite kleine Form mit „… oder Rezept-URL direkt einfügen"-Input und grünem Importieren-Button. Beim Submit springt die App auf /preview?url=, wo der bestehende Importer JSON-LD/Microdata extrahiert und die Vorschau zum Bestätigen zeigt. Auf Mobile versteckt (per CSS), damit die Hero-Area nicht überladen wird. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { CookingPot, X } from 'lucide-svelte';
|
||||
import type { Snapshot } from './$types';
|
||||
import type { SearchHit } from '$lib/server/recipes/search-local';
|
||||
@@ -349,6 +350,15 @@
|
||||
}
|
||||
|
||||
const activeSearch = $derived(query.trim().length > 3);
|
||||
|
||||
let importUrl = $state('');
|
||||
|
||||
function submitImport(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
const url = importUrl.trim();
|
||||
if (!url) return;
|
||||
goto(`/preview?url=${encodeURIComponent(url)}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="hero">
|
||||
@@ -367,6 +377,17 @@
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<form class="import-url" onsubmit={submitImport}>
|
||||
<input
|
||||
type="url"
|
||||
bind:value={importUrl}
|
||||
placeholder="… oder Rezept-URL direkt einfügen"
|
||||
aria-label="Rezept-URL importieren"
|
||||
/>
|
||||
<button type="submit" class="import-go" disabled={!importUrl.trim()}>
|
||||
Importieren
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{#if activeSearch}
|
||||
@@ -584,6 +605,46 @@
|
||||
/* Kein overflow:hidden — sonst clippt der Filter-Dropdown. */
|
||||
position: relative;
|
||||
}
|
||||
.import-url {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.import-url {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.import-url input {
|
||||
flex: 1;
|
||||
max-width: 520px;
|
||||
padding: 0.65rem 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
border: 1px solid #cfd9d1;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
min-height: 44px;
|
||||
}
|
||||
.import-url input:focus {
|
||||
outline: 2px solid #2b6a3d;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.import-go {
|
||||
padding: 0.65rem 1.1rem;
|
||||
background: #2b6a3d;
|
||||
color: white;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
min-height: 44px;
|
||||
}
|
||||
.import-go:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.search-box:focus-within {
|
||||
outline: 2px solid #2b6a3d;
|
||||
outline-offset: 1px;
|
||||
|
||||
Reference in New Issue
Block a user