click on title image for full image

This commit is contained in:
Alexander Bocken 2023-07-13 15:25:42 +02:00
parent bf5c86532a
commit 5769c0cea6
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
3 changed files with 60 additions and 6 deletions

View File

@ -253,12 +253,12 @@ dialog{
box-sizing: content-box; box-sizing: content-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(255,255,255, 0.001); background-color: transparent;
border: unset; border: unset;
margin: 0; margin: 0;
transition: 500ms; transition: 500ms;
} }
dialog[open]{ dialog[open]::backdrop{
animation: show 200ms ease forwards; animation: show 200ms ease forwards;
} }
@keyframes show{ @keyframes show{

View File

@ -248,7 +248,6 @@ dialog{
height: 100%; height: 100%;
background-color: rgba(255,255,255, 0.001); background-color: rgba(255,255,255, 0.001);
border: unset; border: unset;
backdrop-filter: blur(10px);
margin: 0; margin: 0;
transition: 200ms; transition: 200ms;
} }
@ -282,7 +281,7 @@ dialog .adder input::placeholder{
width: 70%; width: 70%;
} }
} }
dialog[open]{ dialog[open]::backdrop{
animation: show 200ms ease forwards; animation: show 200ms ease forwards;
} }
@keyframes show{ @keyframes show{

View File

@ -10,6 +10,18 @@
} }
}) })
function show_dialog_img(){
if(document.querySelector("img").complete){
document.querySelector("#img_carousel").showModal();
}
}
function close_dialog_img(){
document.querySelector("#img_carousel").close();
}
import Cross from "$lib/assets/icons/Cross.svelte";
import "$lib/css/action_button.css";
import "$lib/css/shake.css";
import { do_on_key } from "./do_on_key";
</script> </script>
<style> <style>
:root { :root {
@ -102,21 +114,64 @@ div:has(.placeholder){
width: min(1000px, 100dvw); width: min(1000px, 100dvw);
height: max(60dvh,600px); height: max(60dvh,600px);
overflow: hidden; overflow: hidden;
cursor:zoom-in;
} }
.unblur#image{ .unblur#image{
filter: blur(0px) !important; filter: blur(0px) !important;
opacity: 1; opacity: 1;
} }
/* DIALOG */
dialog{
position: relative;
background-color: unset;
padding:0;
max-height: 90vh;
margin-inline: auto;
overflow: visible;
border: unset;
}
dialog img{
max-width: calc(95vmin - 2rem);
max-height: calc(95vmin- 2rem);
}
dialog[open]::backdrop{
animation: show 200ms ease forwards;
}
@keyframes show{
from {
backdrop-filter: blur(0px);
}
to {
backdrop-filter: blur(10px);
}
}
dialog button{
position: absolute;
top: -2rem;
right: -2rem;
}
</style> </style>
<section class="section"> <section class="section">
<figure class="image-container"> <figure class="image-container">
<div> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={show_dialog_img}>
<div class=placeholder style="background-image:url({placeholder_src})" > <div class=placeholder style="background-image:url({placeholder_src})" >
<div class=placeholder_blur> <div class=placeholder_blur>
<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/> <img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>
</div> </div>
</div> </div>
</div> </div>
</figure> </figure>
<div class=content><slot></slot></div> <div class=content><slot></slot></div>
</section> </section>
<dialog id=img_carousel>
<div>
<img class:unblur={isloaded} {src} alt="">
<button class=action_button on:keydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} on:click={close_dialog_img}>
<Cross fill=white width=2rem height=2rem></Cross>
</button>
</div>
</dialog>