Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better animations on opening images in Photoswipe

Browse Source
This commit is contained in:
Алексей Ермолаев 2023-07-21 17:06:24 +03:00
parent 5557836f61
commit 40350c5eab
3 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/components/MkImgWithBlurhash.vue
View File

@ -68,14 +68,16 @@ onMounted(() => {
canvas, canvas,
img { img {
display: block; display: block;
width: 100%; max-width: 100%;
height: 100%; max-height: 100%;
} }
canvas { canvas {
position: absolute; position: absolute;
inset: 0; inset: 0;
object-fit: cover; object-fit: cover;
width: 100%;
height: 100%;
} }
img { img {

5
packages/client/src/components/MkMedia.vue
View File

@ -202,7 +202,7 @@ watch(
} }
> a { > a {
display: block; display: flex;
cursor: zoom-in; cursor: zoom-in;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@ -211,6 +211,9 @@ watch(
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
box-sizing: border-box; box-sizing: border-box;
justify-content: center;
align-items: center;
&:focus-visible { &:focus-visible {
border: 2px solid var(--accent); border: 2px solid var(--accent);
} }

2
packages/client/src/components/MkMediaList.vue
View File

@ -75,7 +75,7 @@ onMounted(() => {
}), }),
gallery: gallery.value, gallery: gallery.value,
children: ".image", children: ".image",
thumbSelector: ".image", thumbSelector: ".image img",
loop: false, loop: false,
padding: padding:
window.innerWidth > 500 window.innerWidth > 500