initial move entries setup
This commit is contained in:
parent
31416870d1
commit
2ba62592b3
GPG Key ID:
1D237BE83F9B05E8
@ -1,5 +1,6 @@
|
||||
<script lang='ts'>
|
||||
|
||||
import {flip} from "svelte/animate"
|
||||
import Pen from '$lib/assets/icons/Pen.svelte'
|
||||
import Cross from '$lib/assets/icons/Cross.svelte'
|
||||
import Plus from '$lib/assets/icons/Plus.svelte'
|
||||
@ -110,6 +111,36 @@ export function edit_ingredient_and_close_modal(){
|
||||
const modal_el = document.querySelector("#edit_ingredient_modal");
|
||||
modal_el.close();
|
||||
}
|
||||
export function update_list_position(list_index, direction){
|
||||
if(direction == 1){
|
||||
if(list_index == 0){
|
||||
return
|
||||
}
|
||||
ingredients.splice(list_index - 1, 0, ingredients.splice(list_index, 1)[0])
|
||||
}
|
||||
else if(direction == -1){
|
||||
if(list_index == ingredients.length - 1){
|
||||
return
|
||||
}
|
||||
ingredients.splice(list_index + 1, 0, ingredients.splice(list_index, 1)[0])
|
||||
}
|
||||
ingredients = ingredients //tells svelte to update dom
|
||||
}
|
||||
export function update_ingredient_position(list_index, ingredient_index, direction){
|
||||
if(direction == 1){
|
||||
if(ingredient_index == 0){
|
||||
return
|
||||
}
|
||||
ingredients[list_index].list.splice(ingredient_index - 1, 0, ingredients[list_index].list.splice(ingredient_index, 1)[0])
|
||||
}
|
||||
else if(direction == -1){
|
||||
if(ingredient_index == ingredients[list_index].list.length - 1){
|
||||
return
|
||||
}
|
||||
ingredients[list_index].list.splice(ingredient_index + 1, 0, ingredients[list_index].list.splice(ingredient_index, 1)[0])
|
||||
}
|
||||
ingredients = ingredients //tells svelte to update dom
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -283,7 +314,6 @@ dialog h2{
|
||||
.mod_icons{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.button_subtle{
|
||||
padding: 0em;
|
||||
@ -295,20 +325,36 @@ dialog h2{
|
||||
.button_subtle:hover{
|
||||
scale: 1.2 1.2;
|
||||
}
|
||||
.move_buttons_container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.move_buttons_container button{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: 200ms;
|
||||
}
|
||||
.move_buttons_container button:hover{
|
||||
scale: 1.4;
|
||||
}
|
||||
h3{
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: 1000px;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
gap: 1em;
|
||||
}
|
||||
.ingredients_grid{
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
font-size: 1.1em;
|
||||
grid-template-columns: 2fr 3fr 1fr;
|
||||
grid-template-columns: 0.5fr 2fr 3fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-auto-flow: row;
|
||||
align-items: center;
|
||||
@ -359,8 +405,17 @@ h3{
|
||||
<h2>Zutaten</h2>
|
||||
{#each ingredients as list, list_index}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<h3 on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
|
||||
<div>
|
||||
<h3>
|
||||
<div class=move_buttons_container>
|
||||
<button on:click="{() => update_list_position(list_index, 1)}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
|
||||
</button>
|
||||
<button on:click="{() => update_list_position(list_index, -1)}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
|
||||
{#if list.name }
|
||||
{list.name}
|
||||
{:else}
|
||||
@ -375,7 +430,15 @@ h3{
|
||||
</div>
|
||||
</h3>
|
||||
<div class=ingredients_grid>
|
||||
{#each list.list as ingredient, ingredient_index}
|
||||
{#each list.list as ingredient, ingredient_index (ingredient_index)}
|
||||
<div class=move_buttons_container>
|
||||
<button on:click="{() => update_ingredient_position(list_index, ingredient_index, 1)}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
|
||||
</button>
|
||||
<button on:click="{() => update_ingredient_position(list_index, ingredient_index, -1)}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.amount} {ingredient.unit}</div>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
|
||||
@ -117,13 +117,66 @@ export function add_placeholder(){
|
||||
el.innerHTML = step_placeholder
|
||||
}
|
||||
}
|
||||
|
||||
export function update_list_position(list_index, direction){
|
||||
if(direction == 1){
|
||||
if(list_index == 0){
|
||||
return
|
||||
}
|
||||
instructions.splice(list_index - 1, 0, instructions.splice(list_index, 1)[0])
|
||||
}
|
||||
else if(direction == -1){
|
||||
if(list_index == instructions.length - 1){
|
||||
return
|
||||
}
|
||||
instructions.splice(list_index + 1, 0, instructions.splice(list_index, 1)[0])
|
||||
}
|
||||
instructions = instructions //tells svelte to update dom
|
||||
}
|
||||
export function update_step_position(list_index, step_index, direction){
|
||||
if(direction == 1){
|
||||
if(step_index == 0){
|
||||
return
|
||||
}
|
||||
instructions[list_index].steps.splice(step_index - 1, 0, instructions[list_index].steps.splice(step_index, 1)[0])
|
||||
}
|
||||
else if(direction == -1){
|
||||
if(step_index == instructions[list_index].steps.length - 1){
|
||||
return
|
||||
}
|
||||
instructions[list_index].steps.splice(step_index + 1, 0, instructions[list_index].steps.splice(step_index, 1)[0])
|
||||
}
|
||||
instructions = instructions //tells svelte to update dom
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.move_buttons_container{
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.move_buttons_container button{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: 200ms;
|
||||
}
|
||||
.move_buttons_container button:hover{
|
||||
scale: 1.4;
|
||||
}
|
||||
.step_move_buttons{
|
||||
position: absolute;
|
||||
left: -2.5rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
input::placeholder{
|
||||
all:unset;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
}
|
||||
li > div{
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
@ -405,24 +458,42 @@ h3{
|
||||
<h2>Zubereitung</h2>
|
||||
{#each instructions as list, list_index}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<h3 on:click={() => show_modal_edit_subheading_step(list_index)}>
|
||||
<h3>
|
||||
<div class=move_buttons_container>
|
||||
<button on:click="{() => update_list_position(list_index, 1)}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
|
||||
</button>
|
||||
<button on:click="{() => update_list_position(list_index, -1)}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div on:click={() => show_modal_edit_subheading_step(list_index)}>
|
||||
{#if list.name}
|
||||
{list.name}
|
||||
{:else}
|
||||
Leer
|
||||
{/if}
|
||||
<div>
|
||||
</div>
|
||||
<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_step(list_index)}">
|
||||
<Pen fill=var(--nord1)></Pen> </button>
|
||||
<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}">
|
||||
<Cross fill=var(--nord1)></Cross>
|
||||
</button>
|
||||
</div>
|
||||
</h3>
|
||||
<ol>
|
||||
{#each list.steps as step, step_index}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<li><div><div on:click={() => show_modal_edit_step(list_index, step_index)}>{step}</div>
|
||||
<li>
|
||||
<div class="move_buttons_container step_move_buttons">
|
||||
<button on:click="{() => update_step_position(list_index, step_index, 1)}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
|
||||
</button>
|
||||
<button on:click="{() => update_step_position(list_index, step_index, -1)}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div on:click={() => show_modal_edit_step(list_index, step_index)}>{step}</div>
|
||||
<div><button class="action_button button_subtle" on:click={() => show_modal_edit_step(list_index, step_index)}>
|
||||
<Pen fill=var(--nord1)></Pen>
|
||||
</button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user