add Note field in recipe

This commit is contained in:
Alexander Bocken 2023-07-21 00:18:37 +02:00
parent 3796642866
commit 58d2643908
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
6 changed files with 60 additions and 4 deletions

View File

@ -0,0 +1,22 @@
<script lang="ts">
</script>
<style>
div{
background-color: var(--red);
color: white;
padding: 1em;
font-size: 1.1rem;
max-width: 400px;
margin-inline: auto;
box-shadow: 0.2em 0.2em 0.5em 0.1em rgba(0, 0, 0, 0.3);
margin-bottom: 1em;
}
h3{
margin-block: 0;
}
</style>
<div>
<h3>Notiz:</h3>
<slot></slot>
</div>

View File

@ -0,0 +1,23 @@
<script lang="ts">
export let note : string;
</script>
<style>
div{
background-color: var(--red);
color: white;
padding: 1em;
font-size: 1.1rem;
max-width: 400px;
margin-inline: auto;
box-shadow: 0.2em 0.2em 0.5em 0.1em rgba(0, 0, 0, 0.3);
margin-bottom: 1em;
}
h3{
margin-block: 0;
}
</style>
<div {...$$restProps} >
<h3>Notiz:</h3>
{@html note}
</div>

View File

@ -44,6 +44,8 @@ label{
background-color: var(--nord0); background-color: var(--nord0);
color: white; color: white;
padding: 0.25em 1em; padding: 0.25em 1em;
margin-inline: 0.1em;
line-height: 2em;
border-radius: 1000px; border-radius: 1000px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -81,7 +83,8 @@ input[type=checkbox]::after
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
gap: min(1rem, 1dvh); margin-bottom: 1em;
} }
</style> </style>

View File

@ -14,6 +14,7 @@ const RecipeSchema = new mongoose.Schema(
caption: String, caption: String,
}], }],
description: {type: String, required: true}, description: {type: String, required: true},
note: {type: String},
tags : [String], tags : [String],
season : [Number], season : [Number],
baking: { temperature: {type:String, default: ""}, baking: { temperature: {type:String, default: ""},

View File

@ -10,6 +10,7 @@
import TitleImgParallax from '$lib/components/TitleImgParallax.svelte'; import TitleImgParallax from '$lib/components/TitleImgParallax.svelte';
import { afterNavigate } from '$app/navigation'; import { afterNavigate } from '$app/navigation';
import {season} from '$lib/js/season_store'; import {season} from '$lib/js/season_store';
import RecipeNote from '$lib/components/RecipeNote.svelte';
export let data: PageData; export let data: PageData;
@ -226,7 +227,9 @@ h4{
<a class=tag href="/rezepte/tag/{tag}">{tag}</a> <a class=tag href="/rezepte/tag/{tag}">{tag}</a>
{/each} {/each}
</div> </div>
{#if data.note}
<RecipeNote note={data.note}></RecipeNote>
{/if}
</div> </div>
<div class=wrapper_wrapper> <div class=wrapper_wrapper>

View File

@ -4,11 +4,13 @@
import SeasonSelect from '$lib/components/SeasonSelect.svelte'; import SeasonSelect from '$lib/components/SeasonSelect.svelte';
import '$lib/css/action_button.css' import '$lib/css/action_button.css'
import { redirect } from '@sveltejs/kit'; import { redirect } from '@sveltejs/kit';
import EditRecipeNote from '$lib/components/EditRecipeNote.svelte';
export let data: PageData; export let data: PageData;
let preamble = data.recipe.preamble let preamble = data.recipe.preamble
let addendum = data.recipe.addendum let addendum = data.recipe.addendum
let image_preview_url="https://new.bocken.org/static/rezepte/thumb/" + data.recipe.short_name + ".webp" let image_preview_url="https://new.bocken.org/static/rezepte/thumb/" + data.recipe.short_name + ".webp"
let note = data.recipe.note
import { season } from '$lib/js/season_store'; import { season } from '$lib/js/season_store';
import { portions } from '$lib/js/portions_store'; import { portions } from '$lib/js/portions_store';
@ -212,7 +214,8 @@
instructions, instructions,
ingredients, ingredients,
addendum, addendum,
preamble preamble,
note,
}, },
old_short_name, old_short_name,
headers: { headers: {
@ -347,6 +350,7 @@ button.action_button{
<div class=tags> <div class=tags>
<h4>Saison:</h4> <h4>Saison:</h4>
<SeasonSelect></SeasonSelect> <SeasonSelect></SeasonSelect>
<EditRecipeNote><p contenteditable bind:innerText={note}></p></EditRecipeNote>
</div> </div>
</div> </div>