Image upload stylized
This commit is contained in:
parent
dc6fd3fad5
commit
24619de64e
GPG Key ID:
1D237BE83F9B05E8
78
src/lib/components/ActionButton.svelte
Normal file
78
src/lib/components/ActionButton.svelte
Normal file
@ -0,0 +1,78 @@
|
||||
<script lang='ts'>
|
||||
export let href
|
||||
import "$lib/components/nordtheme.css"
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container{
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
right:0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 2rem;
|
||||
border-radius: 1000px;
|
||||
margin: 2rem;
|
||||
transition: 200ms;
|
||||
background-color: var(--red);
|
||||
box-shadow: 0em 0em 0.2em 0.2em rgba(0,0,0,0.2);
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
}
|
||||
:global(.icon_svg){
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
fill: var(--nord4);
|
||||
}
|
||||
|
||||
:root{
|
||||
--angle: 15deg;
|
||||
}
|
||||
.container:hover,
|
||||
.container:focus-within
|
||||
{
|
||||
background-color: var(--nord3);
|
||||
box-shadow: 0em 0em 0.5em 0.5em rgba(0,0,0,0.2);
|
||||
/*transform: scale(1.2,1.2);*/
|
||||
animation: shake 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
:global(.container:hover .icon_svg),
|
||||
:global(.container:focus-within .icon_svg){
|
||||
fill: white;
|
||||
}
|
||||
|
||||
@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(var(--angle))
|
||||
scale(1.2,1.2)
|
||||
;
|
||||
}
|
||||
50%{
|
||||
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(calc(-1* var(--angle)))
|
||||
scale(1.2,1.2);
|
||||
}
|
||||
74%{
|
||||
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(var(--angle))
|
||||
scale(1.2, 1.2);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(0)
|
||||
scale(1.2,1.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<a class=container {href}>
|
||||
<slot></slot>
|
||||
</a>
|
||||
6
src/lib/components/AddButton.svelte
Normal file
6
src/lib/components/AddButton.svelte
Normal file
@ -0,0 +1,6 @@
|
||||
<script lang='ts'>
|
||||
import ActionButton from "./ActionButton.svelte";
|
||||
</script>
|
||||
<ActionButton href="/rezepte/add">
|
||||
<svg class=icon_svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! 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>
|
||||
</ActionButton>
|
||||
354
src/lib/components/CardAdd.svelte
Normal file
354
src/lib/components/CardAdd.svelte
Normal file
@ -0,0 +1,354 @@
|
||||
<script lang="ts">
|
||||
export let tags:string[] = []
|
||||
let new_tag
|
||||
|
||||
let image_preview_url
|
||||
|
||||
// Winter: ❄️
|
||||
// Weihnachten: 🎄
|
||||
// Ostern: 🐇
|
||||
// Fastenzeit: ✝️
|
||||
// Herbst: 🍂
|
||||
// Sommer: ☀️
|
||||
import upload_src from "$lib/assets/icons/upload.svg"
|
||||
|
||||
|
||||
export function show_local_image(){
|
||||
var file = this.files[0]
|
||||
// allowed MIME types
|
||||
var mime_types = [ 'image/jpeg', 'image/webp' ];
|
||||
|
||||
// validate MIME
|
||||
if(mime_types.indexOf(file.type) == -1) {
|
||||
alert('Error : Incorrect file type');
|
||||
return;
|
||||
}
|
||||
image_preview_url = URL.createObjectURL(file);
|
||||
|
||||
|
||||
}
|
||||
|
||||
export function remove_selected_images(){
|
||||
image_preview_url = ""
|
||||
}
|
||||
|
||||
|
||||
export function add_to_tags(){
|
||||
if(new_tag){
|
||||
if(! tags.includes(new_tag)){
|
||||
tags.push(new_tag)
|
||||
tags = tags;
|
||||
}
|
||||
}
|
||||
new_tag = ""
|
||||
}
|
||||
export function remove_from_tags(tag){
|
||||
tags = tags.filter(item => item !== tag)
|
||||
}
|
||||
export function add_on_enter(event){
|
||||
if(event.key === 'Enter'){
|
||||
add_to_tags()
|
||||
}
|
||||
}
|
||||
export function remove_on_enter(event, tag){
|
||||
if(event.key === 'Enter'){
|
||||
tags = tags.filter(item => item !== tag)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.card{
|
||||
position: relative;
|
||||
margin-left: 100px;
|
||||
--card-width: 300px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
width: var(--card-width);
|
||||
aspect-ratio: 4/7;
|
||||
border-radius: 20px;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
transition: 200ms;
|
||||
background-color: var(--blue);
|
||||
box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.img_label{
|
||||
position :absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 20px 20px 0 0 ;
|
||||
transition: 200ms;
|
||||
}
|
||||
.img_label_wrapper:hover{
|
||||
background-color: var(--red);
|
||||
box-shadow: 0 2em 1em 0.5em rgba(0,0,0,0.3);
|
||||
transform:scale(1.02, 1.02);
|
||||
}
|
||||
.img_label_wrapper{
|
||||
position: absolute;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
top:0;
|
||||
left: 0;
|
||||
border-radius: 20px 20px 0 0;
|
||||
transition: 200ms;
|
||||
}
|
||||
.img_label_wrapper:hover .delete{
|
||||
opacity: 100%;
|
||||
}
|
||||
.img_label svg{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
fill: white;
|
||||
transition: 200ms;
|
||||
}
|
||||
.delete{
|
||||
cursor: pointer;
|
||||
all: unset;
|
||||
position: absolute;
|
||||
top:2rem;
|
||||
left: 2rem;
|
||||
opacity: 0%;
|
||||
z-index: 4;
|
||||
transition:200ms;
|
||||
}
|
||||
.delete svg{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
fill: white;
|
||||
}
|
||||
.delete:hover{
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
.upload{
|
||||
z-index: 1;
|
||||
}
|
||||
.img_label:hover .upload{
|
||||
transform: scale(1.2, 1.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#img_picker{
|
||||
display: none;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position:absolute;
|
||||
}
|
||||
input{
|
||||
all: unset;
|
||||
}
|
||||
input::placeholder{
|
||||
all:unset;
|
||||
}
|
||||
.card .icon{
|
||||
z-index: 3;
|
||||
box-sizing: border-box;
|
||||
text-decoration: unset;
|
||||
text-align:center;
|
||||
width: 2.6rem;
|
||||
aspect-ratio: 1/1;
|
||||
transition: 100ms;
|
||||
position: absolute;
|
||||
font-size: 1.5rem;
|
||||
top:-0.5em;
|
||||
right:-0.5em;
|
||||
padding: 0.25em;
|
||||
background-color: var(--nord6);
|
||||
border-radius:1000px;
|
||||
box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.card .icon:hover,
|
||||
.card .icon:focus-visible
|
||||
{
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform:scale(1.2, 1.2)
|
||||
}
|
||||
.card:hover,
|
||||
.card:focus-within{
|
||||
transform: scale(1.02,1.02);
|
||||
box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card img{
|
||||
height: 50%;
|
||||
object-fit: cover;
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
.card .title {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.5em;
|
||||
height: 50%;
|
||||
width: 100% ;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: 100ms;
|
||||
}
|
||||
.card .name{
|
||||
all: unset;
|
||||
width:100%;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
padding-inline: 0.5em;
|
||||
padding-block: 0.2em;
|
||||
}
|
||||
.card .description{
|
||||
padding-inline: 1em;
|
||||
color: var(--nord4);
|
||||
}
|
||||
.card .tags{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
column-gap: 0.25em;
|
||||
padding-inline: 0.5em;
|
||||
padding-top: 0.25em;
|
||||
margin-bottom:0.5em;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.card .tag{
|
||||
cursor: pointer;
|
||||
text-decoration: unset;
|
||||
background-color: var(--nord4);
|
||||
color: var(--nord0);
|
||||
border-radius: 100px;
|
||||
padding-inline: 1em;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
transition: 100ms;
|
||||
box-shadow: 0.2em 0.2em 0.2em 0.05em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.card .tag:hover,
|
||||
.card .tag:focus-visible,
|
||||
.card .tag:focus-within
|
||||
{
|
||||
transform: scale(1.04, 1.04);
|
||||
background-color: var(--orange);
|
||||
box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card .title .category{
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
|
||||
text-decoration: none;
|
||||
color: var(--nord6);
|
||||
font-size: 1.5rem;
|
||||
top: -0.8em;
|
||||
left: -0.5em;
|
||||
width: 10rem;
|
||||
background-color: var(--nord0);
|
||||
padding-inline: 1em;
|
||||
border-radius: 1000px;
|
||||
transition: 100ms;
|
||||
|
||||
}
|
||||
.card .title .category:hover,
|
||||
.card .title .category:focus-within
|
||||
{
|
||||
box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
|
||||
background-color: var(--nord3);
|
||||
transform: scale(1.05, 1.05)
|
||||
}
|
||||
.card:hover .icon,
|
||||
.card:focus-visible .icon
|
||||
{
|
||||
animation: shake 0.6s
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.input_wrapper{
|
||||
position: relative;
|
||||
padding-left: 3rem;
|
||||
padding-left: 40rem;
|
||||
}
|
||||
.input_wrapper > input{
|
||||
margin-left: 1ch;
|
||||
}
|
||||
.input{
|
||||
position:absolute;
|
||||
top: -.1ch;
|
||||
left: 0.6ch;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.tag_input{
|
||||
width: 12ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<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>
|
||||
{/if}
|
||||
|
||||
|
||||
<label class=img_label for=img_picker>
|
||||
<svg class="upload over_img" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><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>
|
||||
</label>
|
||||
</div>
|
||||
<input type="file" id=img_picker accept="image/webp image/jpeg" on:change={show_local_image}>
|
||||
<div class=title>
|
||||
<input class=category placeholder=Kategorie.../>
|
||||
<div>
|
||||
<input class=name placeholder=Name.../>
|
||||
<input class=description placeholder=Kurzbeschreibung.../>
|
||||
</div>
|
||||
<div class=tags>
|
||||
{#each tags as tag}
|
||||
<div class="tag" tabindex="0" on:keypress={remove_on_enter(event ,tag)} on:click='{remove_from_tags(tag)}'>{tag}</div>
|
||||
{/each}
|
||||
<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>
|
||||
7
src/lib/components/EditButton.svelte
Normal file
7
src/lib/components/EditButton.svelte
Normal file
@ -0,0 +1,7 @@
|
||||
<script lang='ts'>
|
||||
import ActionButton from "./ActionButton.svelte";
|
||||
export let href
|
||||
</script>
|
||||
<ActionButton {href}>
|
||||
<svg class=icon_svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg>
|
||||
</ActionButton>
|
||||
0
src/lib/components/TagSelector.svelte
Normal file
0
src/lib/components/TagSelector.svelte
Normal file
@ -6,7 +6,7 @@
|
||||
let description
|
||||
let datecreated = new Date()
|
||||
let datemodified = datecreated
|
||||
let tags : string[] = []
|
||||
let tags
|
||||
|
||||
import type { PageData } from './$types';
|
||||
import CardAdd from '$lib/components/CardAdd.svelte';
|
||||
@ -61,15 +61,11 @@ input{
|
||||
<CardAdd></CardAdd>
|
||||
|
||||
<input bind:value={short_name} placeholder="Kurzname"/>
|
||||
<input bind:value={name} placeholder="Name des Rezeptes"/>
|
||||
<input bind:value={icon} placeholder="Saison-Emoji"/>
|
||||
<input bind:value={category} placeholder="Kategorie" />
|
||||
<input bind:value={description} placeholder="Kurzbeschreibung"/>
|
||||
<input bind:value={tags} placeholder="Stichwort 1, Stichwort 2, ...">
|
||||
<h2>Zutaten</h2>
|
||||
<input>
|
||||
<h2>Zubereitung</h2>
|
||||
<button on:click={doPost}>HIT IT</button>
|
||||
<button on:click={console.log(tags)}>TAGS</button>
|
||||
<h3>Zutaten</h3>
|
||||
|
||||
<!-- already added ingredients
|
||||
|
||||
Loading…
Reference in New Issue
Block a user