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;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255,255,255, 0.001);
|
||||
background-color: transparent;
|
||||
border: unset;
|
||||
margin: 0;
|
||||
transition: 500ms;
|
||||
}
|
||||
dialog[open]{
|
||||
dialog[open]::backdrop{
|
||||
animation: show 200ms ease forwards;
|
||||
}
|
||||
@keyframes show{
|
||||
|
@ -248,7 +248,6 @@ dialog{
|
||||
height: 100%;
|
||||
background-color: rgba(255,255,255, 0.001);
|
||||
border: unset;
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 0;
|
||||
transition: 200ms;
|
||||
}
|
||||
@ -282,7 +281,7 @@ dialog .adder input::placeholder{
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
dialog[open]{
|
||||
dialog[open]::backdrop{
|
||||
animation: show 200ms ease forwards;
|
||||
}
|
||||
@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>
|
||||
<style>
|
||||
:root {
|
||||
@ -102,21 +114,64 @@ div:has(.placeholder){
|
||||
width: min(1000px, 100dvw);
|
||||
height: max(60dvh,600px);
|
||||
overflow: hidden;
|
||||
cursor:zoom-in;
|
||||
}
|
||||
.unblur#image{
|
||||
filter: blur(0px) !important;
|
||||
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>
|
||||
<section class="section">
|
||||
<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_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>
|
||||
</figure>
|
||||
<div class=content><slot></slot></div>
|
||||
</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