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">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
import { CookingPot, X } from 'lucide-svelte';
|
import { CookingPot, X } from 'lucide-svelte';
|
||||||
import type { Snapshot } from './$types';
|
import type { Snapshot } from './$types';
|
||||||
import type { SearchHit } from '$lib/server/recipes/search-local';
|
import type { SearchHit } from '$lib/server/recipes/search-local';
|
||||||
@@ -349,6 +350,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const activeSearch = $derived(query.trim().length > 3);
|
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>
|
</script>
|
||||||
|
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
@@ -367,6 +377,17 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</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>
|
</section>
|
||||||
|
|
||||||
{#if activeSearch}
|
{#if activeSearch}
|
||||||
@@ -584,6 +605,46 @@
|
|||||||
/* Kein overflow:hidden — sonst clippt der Filter-Dropdown. */
|
/* Kein overflow:hidden — sonst clippt der Filter-Dropdown. */
|
||||||
position: relative;
|
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 {
|
.search-box:focus-within {
|
||||||
outline: 2px solid #2b6a3d;
|
outline: 2px solid #2b6a3d;
|
||||||
outline-offset: 1px;
|
outline-offset: 1px;
|
||||||
|
|||||||
Reference in New Issue
Block a user