Image upload stylized

This commit is contained in:
Alexander Bocken 2023-06-21 22:54:16 +02:00
parent dc6fd3fad5
commit 24619de64e
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
6 changed files with 447 additions and 6 deletions

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

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

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

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

View File

View 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