functioning Add recipe (not submitting) missing: season
modals partly stylized add steps stylized
This commit is contained in:
parent
24619de64e
commit
4afaf7f6f3
GPG Key ID:
1D237BE83F9B05E8
3
src/lib/assets/icons/Check.svelte
Normal file
3
src/lib/assets/icons/Check.svelte
Normal file
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
</script>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" {...$$restProps}><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
||||
4
src/lib/assets/icons/Cross.svelte
Normal file
4
src/lib/assets/icons/Cross.svelte
Normal file
@ -0,0 +1,4 @@
|
||||
<script>
|
||||
</script>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512" {...$$restProps} >
|
||||
<!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
|
||||
3
src/lib/assets/icons/Pen.svelte
Normal file
3
src/lib/assets/icons/Pen.svelte
Normal file
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
</script>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" {...$$restProps} > <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>
|
||||
33
src/lib/assets/icons/Plus.svelte
Normal file
33
src/lib/assets/icons/Plus.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<script>
|
||||
</script>
|
||||
<style>
|
||||
@keyframes shake{
|
||||
0%{
|
||||
transform: rotate(0)
|
||||
scale(1,1);
|
||||
}
|
||||
25%{
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(30deg)
|
||||
scale(1.2,1.2)
|
||||
;
|
||||
}
|
||||
50%{
|
||||
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(-30deg)
|
||||
scale(1.2,1.2);
|
||||
}
|
||||
74%{
|
||||
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(30deg)
|
||||
scale(1.2, 1.2);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(0)
|
||||
scale(1,1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" {...$$restProps}><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
|
||||
3
src/lib/assets/icons/Upload.svelte
Normal file
3
src/lib/assets/icons/Upload.svelte
Normal file
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
</script>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" {...$$restProps}><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
|
||||
@ -1,4 +1,7 @@
|
||||
<script lang="ts">
|
||||
|
||||
import Cross from '$lib/assets/icons/Cross.svelte'
|
||||
|
||||
export let tags:string[] = []
|
||||
let new_tag
|
||||
|
||||
@ -208,9 +211,16 @@ input::placeholder{
|
||||
padding-inline: 0.5em;
|
||||
padding-block: 0.2em;
|
||||
}
|
||||
.card .name:hover{
|
||||
color:var(--nord0);
|
||||
}
|
||||
.card .description{
|
||||
padding-inline: 1em;
|
||||
color: var(--nord4);
|
||||
width: calc(300px - 2em); /*??*/
|
||||
}
|
||||
.card .description:hover{
|
||||
color: var(--nord0);
|
||||
}
|
||||
.card .tags{
|
||||
display: flex;
|
||||
@ -322,13 +332,15 @@ input::placeholder{
|
||||
|
||||
|
||||
<div class=card href="" >
|
||||
|
||||
<input class=icon placeholder=😀/>
|
||||
{#if image_preview_url}
|
||||
<img src={image_preview_url} class=img_preview width=300px height=300px />
|
||||
{/if}
|
||||
<div class=img_label_wrapper>
|
||||
{#if image_preview_url}
|
||||
<button class=delete on:click={remove_selected_images}><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
|
||||
<button class=delete on:click={remove_selected_images}>
|
||||
<Cross fill=white style="width:2rem;height:2rem;"></Cross>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@ -351,4 +363,5 @@ input::placeholder{
|
||||
<div class="tag input_wrapper"><span class=input>+</span><input class="tag_input" type="text" on:keypress={add_on_enter} on:focusout={add_to_tags} size="1" bind:value={new_tag} placeholder=Stichwort...></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
151
src/lib/components/CreateIngredientList.svelte
Normal file
151
src/lib/components/CreateIngredientList.svelte
Normal file
@ -0,0 +1,151 @@
|
||||
<script lang='ts'>
|
||||
|
||||
import Pen from '$lib/assets/icons/Pen.svelte'
|
||||
import Cross from '$lib/assets/icons/Cross.svelte'
|
||||
import Plus from '$lib/assets/icons/Plus.svelte'
|
||||
import Check from '$lib/assets/icons/Check.svelte'
|
||||
|
||||
let ingredients_lists = [
|
||||
{name: "",
|
||||
ingredients: [],
|
||||
}
|
||||
]
|
||||
|
||||
let new_ingredient = {
|
||||
amount: "",
|
||||
unit: "",
|
||||
name: "",
|
||||
sublist: "",
|
||||
}
|
||||
|
||||
let edit_ingredient = {
|
||||
amount: "",
|
||||
unit: "",
|
||||
name: "",
|
||||
list_index: "",
|
||||
ingredient_index: "",
|
||||
}
|
||||
|
||||
let edit_heading = {
|
||||
name:"",
|
||||
list_index: "",
|
||||
}
|
||||
|
||||
function get_sublist_index(sublist_name, list){
|
||||
for(var i =0; i < list.length; i++){
|
||||
if(list[i].name == sublist_name){
|
||||
return i
|
||||
}
|
||||
}
|
||||
return -1
|
||||
}
|
||||
export function show_modal_edit_subheading_ingredient(list_index){
|
||||
edit_heading.name = ingredients_lists[list_index].name
|
||||
edit_heading.list_index = list_index
|
||||
const el = document.querySelector('#edit_subheading_ingredient_modal')
|
||||
el.showModal()
|
||||
}
|
||||
export function edit_subheading_and_close_modal(){
|
||||
ingredients_lists[edit_heading.list_index].name = edit_heading.name
|
||||
const el = document.querySelector('#edit_subheading_ingredient_modal')
|
||||
el.close()
|
||||
}
|
||||
|
||||
export function add_new_ingredient(){
|
||||
let list_index = get_sublist_index(new_ingredient.sublist, ingredients_lists)
|
||||
if(list_index == -1){
|
||||
ingredients_lists.push({
|
||||
name: new_ingredient.sublist,
|
||||
ingredients: [],
|
||||
})
|
||||
list_index = ingredients_lists.length - 1
|
||||
}
|
||||
ingredients_lists[list_index].ingredients.push({ ...new_ingredient})
|
||||
ingredients_lists = ingredients_lists //tells svelte to update dom
|
||||
}
|
||||
export function remove_list(list_index){
|
||||
ingredients_lists.splice(list_index, 1);
|
||||
ingredients_lists = ingredients_lists //tells svelte to update dom
|
||||
}
|
||||
export function remove_ingredient(list_index, ingredient_index){
|
||||
ingredients_lists[list_index].ingredients.splice(ingredient_index, 1)
|
||||
ingredients_lists = ingredients_lists //tells svelte to update dom
|
||||
}
|
||||
|
||||
export function show_modal_edit_ingredient(list_index, ingredient_index){
|
||||
edit_ingredient = {...ingredients_lists[list_index].ingredients[ingredient_index]}
|
||||
edit_ingredient.list_index = list_index
|
||||
edit_ingredient.ingredient_index = ingredient_index
|
||||
const modal_el = document.querySelector("#edit_ingredient_modal");
|
||||
modal_el.showModal();
|
||||
}
|
||||
export function edit_ingredient_and_close_modal(){
|
||||
ingredients_lists[edit_ingredient.list_index].ingredients[edit_ingredient.ingredient_index] = {
|
||||
amount: edit_ingredient.amount,
|
||||
unit: edit_ingredient.unit,
|
||||
name: edit_ingredient.name,
|
||||
}
|
||||
const modal_el = document.querySelector("#edit_ingredient_modal");
|
||||
modal_el.close();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
|
||||
{#each ingredients_lists as list, list_index}
|
||||
<h3>
|
||||
{#if list.name}
|
||||
{list.name}
|
||||
{:else}
|
||||
Leer
|
||||
{/if}
|
||||
<button class=edit on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
|
||||
<Pen></Pen> </button>
|
||||
<button class=remove on:click="{() => remove_list(list_index)}">
|
||||
<Cross></Cross>
|
||||
</button>
|
||||
</h3>
|
||||
<ul>
|
||||
{#each list.ingredients as ingredient, ingredient_index}
|
||||
<li>{ingredient.amount} {ingredient.unit} {ingredient.name}
|
||||
<button class=edit on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
|
||||
<Pen></Pen>
|
||||
</button>
|
||||
<button class=remove on:click="{() => remove_ingredient(list_index, ingredient_index)}">
|
||||
<Cross></Cross>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/each}
|
||||
|
||||
<input type="text" bind:value={new_ingredient.sublist} placeholder="Unterkategorie (optional)">
|
||||
<div class=ingredient>
|
||||
<input type="text" id=amount placeholder="250..." bind:value={new_ingredient.amount}>
|
||||
<input type="text" id=unit placeholder="mL..." bind:value={new_ingredient.unit}>
|
||||
<input type="text" id=name placeholder="Milch..." bind:value={new_ingredient.name}>
|
||||
<button on:click={() => add_new_ingredient()}>
|
||||
<Plus></Plus>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<dialog class=ingredient id=edit_ingredient_modal>
|
||||
<input type="text" id=amount placeholder="250..." bind:value={edit_ingredient.amount}>
|
||||
<input type="text" id=unit placeholder="mL..." bind:value={edit_ingredient.unit}>
|
||||
<input type="text" id=name placeholder="Milch..." bind:value={edit_ingredient.name}>
|
||||
<button on:click={edit_ingredient_and_close_modal}>
|
||||
<Check></Check>
|
||||
</button>
|
||||
|
||||
</dialog>
|
||||
|
||||
<dialog id=edit_subheading_ingredient_modal>
|
||||
<input type="text" bind:value={edit_heading.name}>
|
||||
<button on:click={edit_subheading_and_close_modal}>
|
||||
<Check></Check>
|
||||
</button>
|
||||
</dialog>
|
||||
298
src/lib/components/CreateStepList.svelte
Normal file
298
src/lib/components/CreateStepList.svelte
Normal file
@ -0,0 +1,298 @@
|
||||
<script lang='ts'>
|
||||
|
||||
import Pen from '$lib/assets/icons/Pen.svelte'
|
||||
import Cross from '$lib/assets/icons/Cross.svelte'
|
||||
import Plus from '$lib/assets/icons/Plus.svelte'
|
||||
import Check from '$lib/assets/icons/Check.svelte'
|
||||
|
||||
import '$lib/components/nordtheme.css'
|
||||
|
||||
const step_placeholder = "Kartoffeln schälen..."
|
||||
let instructions = [{
|
||||
name: "",
|
||||
steps: [],
|
||||
}]
|
||||
|
||||
let new_step = {
|
||||
name: "",
|
||||
step: "Kartoffeln schälen..."
|
||||
}
|
||||
|
||||
let edit_heading = {
|
||||
name:"",
|
||||
list_index: "",
|
||||
}
|
||||
|
||||
function get_sublist_index(sublist_name, list){
|
||||
for(var i =0; i < list.length; i++){
|
||||
if(list[i].name == sublist_name){
|
||||
return i
|
||||
}
|
||||
}
|
||||
return -1
|
||||
}
|
||||
export function remove_list(list_index){
|
||||
instructions.splice(list_index, 1);
|
||||
instructions = instructions //tells svelte to update dom
|
||||
}
|
||||
|
||||
export function add_new_step(){
|
||||
let list_index = get_sublist_index(new_step.name, instructions)
|
||||
if(list_index == -1){
|
||||
instructions.push({
|
||||
name: new_step.name,
|
||||
steps: [ new_step.step ],
|
||||
})
|
||||
list_index = instructions.length - 1
|
||||
}
|
||||
else{
|
||||
instructions[list_index].steps.push(new_step.step)
|
||||
}
|
||||
const el = document.querySelector("#step")
|
||||
el.innerHTML = step_placeholder
|
||||
instructions = instructions //tells svelte to update dom
|
||||
|
||||
new_step.step = ""
|
||||
add_placeholder()
|
||||
}
|
||||
|
||||
export function remove_step(list_index, step_index){
|
||||
instructions[list_index].steps.splice(step_index, 1)
|
||||
instructions = instructions //tells svelte to update dom
|
||||
}
|
||||
|
||||
let edit_step = {
|
||||
name: "",
|
||||
step: "",
|
||||
list_index: 0,
|
||||
step_index: 0,
|
||||
}
|
||||
export function show_modal_edit_step(list_index, step_index){
|
||||
edit_step = {
|
||||
step: instructions[list_index].steps[step_index],
|
||||
name: instructions[list_index].name,
|
||||
}
|
||||
edit_step.list_index = list_index
|
||||
edit_step.step_index = step_index
|
||||
const modal_el = document.querySelector("#edit_step_modal");
|
||||
modal_el.showModal();
|
||||
}
|
||||
|
||||
export function edit_step_and_close_modal(){
|
||||
instructions[edit_step.list_index].steps[edit_step.step_index] = edit_step.step
|
||||
const modal_el = document.querySelector("#edit_step_modal");
|
||||
modal_el.close();
|
||||
}
|
||||
|
||||
export function show_modal_edit_subheading_step(list_index){
|
||||
edit_heading.name = instructions[list_index].name
|
||||
edit_heading.list_index = list_index
|
||||
const el = document.querySelector('#edit_subheading_steps_modal')
|
||||
el.showModal()
|
||||
}
|
||||
|
||||
export function edit_subheading_steps_and_close_modal(){
|
||||
instructions[edit_heading.list_index].name = edit_heading.name
|
||||
const modal_el = document.querySelector("#edit_subheading_steps_modal");
|
||||
modal_el.close();
|
||||
}
|
||||
|
||||
|
||||
export function clear_step(){
|
||||
const el = document.querySelector("#step")
|
||||
if(el.innerHTML == step_placeholder){
|
||||
el.innerHTML = ""
|
||||
}
|
||||
}
|
||||
export function add_placeholder(){
|
||||
const el = document.querySelector("#step")
|
||||
if(el.innerHTML == ""){
|
||||
el.innerHTML = "Kartoffeln schälen..."
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
input::placeholder{
|
||||
all:unset;
|
||||
}
|
||||
|
||||
.adder{
|
||||
margin-inline: auto;
|
||||
position: relative;
|
||||
margin-block: 3rem;
|
||||
width: 50ch;
|
||||
border-radius: 20px;
|
||||
transition: 200ms;
|
||||
}
|
||||
.shadow{
|
||||
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
|
||||
}
|
||||
.adder button{
|
||||
all:unset;
|
||||
position: absolute;
|
||||
right: -1.5rem;
|
||||
bottom: -1.5rem;
|
||||
cursor: pointer;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--red);
|
||||
border-radius:100000px;
|
||||
padding: 1rem;
|
||||
transition: 100ms;
|
||||
box-shadow: 0 0 1em 0.4em rgba(0,0,0,0.3);
|
||||
}
|
||||
.adder button:hover{
|
||||
background-color: var(--nord0);
|
||||
transform: scale(1.1,1.1);
|
||||
box-shadow: 0 0 1em 0.8em rgba(0,0,0,0.3);
|
||||
}
|
||||
.category{
|
||||
all: unset;
|
||||
position: absolute;
|
||||
--font_size: 1.5rem;
|
||||
top: -1em;
|
||||
left: -1em;
|
||||
font-family: sans-serif;
|
||||
font-size: 1.5rem;
|
||||
background-color: var(--nord0);
|
||||
color: var(--nord4);
|
||||
border-radius: 1000000px;
|
||||
width: 23ch;
|
||||
padding: 0.5em 1em;
|
||||
transition: 100ms;
|
||||
box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
|
||||
}
|
||||
.category:hover{
|
||||
background-color: var(--nord1);
|
||||
transform: scale(1.05,1.05);
|
||||
}
|
||||
.adder:hover{
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
|
||||
.add_step p{
|
||||
font-family: sans-serif;
|
||||
width: 100%;
|
||||
font-size: 1.2rem;
|
||||
padding: 2rem;
|
||||
padding-top: 2.5rem;
|
||||
border-radius: 20px;
|
||||
background-color: var(--blue);
|
||||
color: #bbb;
|
||||
transition: 200ms;
|
||||
}
|
||||
.add_step p:hover,
|
||||
.add_step p:focus-visible
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
||||
dialog{
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border: unset;
|
||||
margin: 0;
|
||||
}
|
||||
dialog .adder{
|
||||
margin-top: 5rem;
|
||||
}
|
||||
dialog h2{
|
||||
font-size: 3rem;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 30%;
|
||||
}
|
||||
|
||||
@keyframes shake{
|
||||
0%{
|
||||
transform: rotate(0)
|
||||
scale(1,1);
|
||||
}
|
||||
25%{
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(30deg)
|
||||
scale(1.2,1.2)
|
||||
;
|
||||
}
|
||||
50%{
|
||||
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(-30deg)
|
||||
scale(1.2,1.2);
|
||||
}
|
||||
74%{
|
||||
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(30deg)
|
||||
scale(1.2, 1.2);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(0)
|
||||
scale(1,1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
{#each instructions as list, list_index}
|
||||
<h3>
|
||||
{#if list.name}
|
||||
{list.name}
|
||||
{:else}
|
||||
Leer
|
||||
{/if}
|
||||
<button class=edit on:click="{() => show_modal_edit_subheading_step(list_index)}">
|
||||
<Pen></Pen> </button>
|
||||
<button class=remove on:click="{() => remove_list(list_index)}">
|
||||
<Cross></Cross>
|
||||
</button>
|
||||
</h3>
|
||||
<ol>
|
||||
{#each list.steps as step, step_index}
|
||||
<li>{step}
|
||||
<button class=edit on:click={() => show_modal_edit_step(list_index, step_index)}>
|
||||
<Pen></Pen>
|
||||
</button>
|
||||
<button class=remove on:click="{() => remove_step(list_index, step_index)}">
|
||||
<Cross></Cross>
|
||||
</button>
|
||||
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
{/each}
|
||||
|
||||
<div class='adder shadow'>
|
||||
<input class=category type="text" bind:value={new_step.name} placeholder="Unterkategorie (optional)">
|
||||
<div class=add_step>
|
||||
<p id=step contenteditable on:focus='{clear_step}' on:blur={add_placeholder} bind:innerHTML={new_step.step}></p>
|
||||
<button on:click={() => add_new_step()}>
|
||||
<Plus fill=white style="height: 2rem; width: 2rem"></Plus>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<dialog id=edit_step_modal>
|
||||
<h2>Schritt verändern</h2>
|
||||
<div class=adder>
|
||||
<input class=category type="text" bind:value={edit_step.name} placeholder="Unterkategorie (optional)">
|
||||
<div class=add_step>
|
||||
<p id=step contenteditable bind:innerHTML={edit_step.step}></p>
|
||||
<button on:click="{() => edit_step_and_close_modal()}" >
|
||||
<Check fill=white style="height: 2rem; width: 2rem"></Check>
|
||||
</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id=edit_subheading_steps_modal>
|
||||
<input type="text" bind:value={edit_heading.name}>
|
||||
<button on:click={edit_subheading_steps_and_close_modal}>
|
||||
<Check></Check>
|
||||
</button>
|
||||
</dialog>
|
||||
@ -13,6 +13,8 @@
|
||||
import MediaScroller from '$lib/components/MediaScroller.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
import Search from '$lib/components/Search.svelte';
|
||||
import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
|
||||
import CreateStepList from '$lib/components/CreateStepList.svelte';
|
||||
export let data: PageData;
|
||||
export let current_month = new Date().getMonth() + 1
|
||||
async function doPost () {
|
||||
@ -43,6 +45,7 @@
|
||||
console.log(result)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -55,6 +58,47 @@ input{
|
||||
background-color: var(--nord4);
|
||||
|
||||
}
|
||||
.ingredient{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ingredient > input{
|
||||
display: inline;
|
||||
margin-inline: 0.25em;
|
||||
}
|
||||
.ingredient>#unit{
|
||||
max-width: 40px;
|
||||
}
|
||||
.ingredient>#amount{
|
||||
max-width: 100px;
|
||||
}
|
||||
.ingredient button{
|
||||
all: unset;
|
||||
background-color: var(--red);
|
||||
padding: 0.3em;
|
||||
height: 100%;
|
||||
border-radius: 1000px;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: 100ms;
|
||||
}
|
||||
.ingredient button svg{
|
||||
fill: white;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.ingredient button:hover{
|
||||
background-color: var(--orange);
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.ingredient button:hover svg{
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
|
||||
</style>
|
||||
<h1>Rezept hinzufügen</h1>
|
||||
|
||||
@ -62,21 +106,6 @@ input{
|
||||
|
||||
<input bind:value={short_name} placeholder="Kurzname"/>
|
||||
<h2>Zutaten</h2>
|
||||
<input>
|
||||
<CreateIngredientList></CreateIngredientList>
|
||||
<h2>Zubereitung</h2>
|
||||
<button on:click={doPost}>HIT IT</button>
|
||||
<button on:click={console.log(tags)}>TAGS</button>
|
||||
<h3>Zutaten</h3>
|
||||
|
||||
<!-- already added ingredients
|
||||
<input type="number"><select name="" id=""></select><input type="text">
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<input type="text" name="" id=""><button>Neue Unterkategorie hinzufügen</button>
|
||||
|
||||
<h3> Schritte </h3>
|
||||
<input type="text">
|
||||
<button>Neue Unterkategorie hinzufügen</button>
|
||||
<br>
|
||||
<input type="text"><button>Schritt hinzufügen</button>-->
|
||||
<CreateStepList></CreateStepList>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user