functioning Add recipe (not submitting) missing: season

modals partly stylized
add steps stylized
This commit is contained in:
Alexander Bocken 2023-06-22 20:26:48 +02:00
parent 24619de64e
commit 4afaf7f6f3
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
9 changed files with 555 additions and 18 deletions

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -1,4 +1,7 @@
<script lang="ts"> <script lang="ts">
import Cross from '$lib/assets/icons/Cross.svelte'
export let tags:string[] = [] export let tags:string[] = []
let new_tag let new_tag
@ -208,9 +211,16 @@ input::placeholder{
padding-inline: 0.5em; padding-inline: 0.5em;
padding-block: 0.2em; padding-block: 0.2em;
} }
.card .name:hover{
color:var(--nord0);
}
.card .description{ .card .description{
padding-inline: 1em; padding-inline: 1em;
color: var(--nord4); color: var(--nord4);
width: calc(300px - 2em); /*??*/
}
.card .description:hover{
color: var(--nord0);
} }
.card .tags{ .card .tags{
display: flex; display: flex;
@ -322,13 +332,15 @@ input::placeholder{
<div class=card href="" > <div class=card href="" >
<input class=icon placeholder=😀/> <input class=icon placeholder=😀/>
{#if image_preview_url} {#if image_preview_url}
<img src={image_preview_url} class=img_preview width=300px height=300px /> <img src={image_preview_url} class=img_preview width=300px height=300px />
{/if} {/if}
<div class=img_label_wrapper> <div class=img_label_wrapper>
{#if image_preview_url} {#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> </button>
{/if} {/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 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> </div>
</div> </div>

View 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>

View 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>

View File

@ -13,6 +13,8 @@
import MediaScroller from '$lib/components/MediaScroller.svelte'; import MediaScroller from '$lib/components/MediaScroller.svelte';
import Card from '$lib/components/Card.svelte'; import Card from '$lib/components/Card.svelte';
import Search from '$lib/components/Search.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 data: PageData;
export let current_month = new Date().getMonth() + 1 export let current_month = new Date().getMonth() + 1
async function doPost () { async function doPost () {
@ -43,6 +45,7 @@
console.log(result) console.log(result)
} }
</script> </script>
<style> <style>
@ -55,6 +58,47 @@ input{
background-color: var(--nord4); 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> </style>
<h1>Rezept hinzufügen</h1> <h1>Rezept hinzufügen</h1>
@ -62,21 +106,6 @@ input{
<input bind:value={short_name} placeholder="Kurzname"/> <input bind:value={short_name} placeholder="Kurzname"/>
<h2>Zutaten</h2> <h2>Zutaten</h2>
<input> <CreateIngredientList></CreateIngredientList>
<h2>Zubereitung</h2> <h2>Zubereitung</h2>
<button on:click={doPost}>HIT IT</button> <CreateStepList></CreateStepList>
<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>-->