Alexander Bocken
36a7fac39a
- Add embedded translations schema to Recipe model with English support - Create DeepL translation service with batch translation and change detection - Build translation approval UI with side-by-side editing for all recipe fields - Integrate translation workflow into add/edit pages with field comparison - Create complete English recipe routes at /recipes/* mirroring German structure - Add language switcher component with hreflang SEO tags - Support image loading from German short_name for English recipes - Add English API endpoints for all recipe filters (category, tag, icon, season) - Include layout with English navigation header for all recipe subroutes
141 lines
2.7 KiB
Svelte
141 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
export let instructions: any[] = [];
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function handleChange() {
|
|
dispatch('change', { instructions });
|
|
}
|
|
|
|
function updateInstructionGroupName(groupIndex: number, event: Event) {
|
|
const target = event.target as HTMLInputElement;
|
|
instructions[groupIndex].name = target.value;
|
|
handleChange();
|
|
}
|
|
|
|
function updateStep(groupIndex: number, stepIndex: number, event: Event) {
|
|
const target = event.target as HTMLTextAreaElement;
|
|
instructions[groupIndex].steps[stepIndex] = target.value;
|
|
handleChange();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.instructions-editor {
|
|
background: var(--nord0);
|
|
border: 1px solid var(--nord3);
|
|
border-radius: 4px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.instructions-editor {
|
|
background: var(--nord5);
|
|
border-color: var(--nord3);
|
|
}
|
|
}
|
|
|
|
.instruction-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.instruction-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.group-name {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
background: var(--nord1);
|
|
border: 1px solid var(--nord3);
|
|
border-radius: 4px;
|
|
color: var(--nord6);
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.group-name {
|
|
background: var(--nord6);
|
|
color: var(--nord0);
|
|
}
|
|
}
|
|
|
|
.step-item {
|
|
margin-bottom: 0.75rem;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.step-number {
|
|
min-width: 2rem;
|
|
padding: 0.4rem 0.5rem;
|
|
background: var(--nord3);
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
color: var(--nord6);
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.step-number {
|
|
background: var(--nord4);
|
|
color: var(--nord0);
|
|
}
|
|
}
|
|
|
|
.step-item textarea {
|
|
flex: 1;
|
|
padding: 0.5rem;
|
|
background: var(--nord1);
|
|
border: 1px solid var(--nord3);
|
|
border-radius: 4px;
|
|
color: var(--nord6);
|
|
font-size: 0.9rem;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
min-height: 3rem;
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.step-item textarea {
|
|
background: var(--nord6);
|
|
color: var(--nord0);
|
|
}
|
|
}
|
|
|
|
.step-item textarea:focus {
|
|
outline: 2px solid var(--nord14);
|
|
border-color: var(--nord14);
|
|
}
|
|
</style>
|
|
|
|
<div class="instructions-editor">
|
|
{#each instructions as group, groupIndex}
|
|
<div class="instruction-group">
|
|
<input
|
|
type="text"
|
|
class="group-name"
|
|
value={group.name || ''}
|
|
on:input={(e) => updateInstructionGroupName(groupIndex, e)}
|
|
placeholder="Instruction section name"
|
|
/>
|
|
{#each group.steps as step, stepIndex}
|
|
<div class="step-item">
|
|
<div class="step-number">{stepIndex + 1}</div>
|
|
<textarea
|
|
value={step || ''}
|
|
on:input={(e) => updateStep(groupIndex, stepIndex, e)}
|
|
placeholder="Step description"
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</div>
|