click on title image for full image
This commit is contained in:
parent
bf5c86532a
commit
5769c0cea6
@ -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{
|
||||||
|
@ -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{
|
||||||
|
@ -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,15 +114,49 @@ 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=""/>
|
||||||
@ -120,3 +166,12 @@ div:has(.placeholder){
|
|||||||
</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>
|
||||||
|
Loading…
Reference in New Issue
Block a user