From 40350c5eab86a58c36c64203b17180ef76aed497 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=95=D1=80?= =?UTF-8?q?=D0=BC=D0=BE=D0=BB=D0=B0=D0=B5=D0=B2?= Date: Fri, 21 Jul 2023 17:06:24 +0300 Subject: [PATCH 1/4] Better animations on opening images in Photoswipe --- packages/client/src/components/MkImgWithBlurhash.vue | 6 ++++-- packages/client/src/components/MkMedia.vue | 5 ++++- packages/client/src/components/MkMediaList.vue | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue index 5a0cefec2c..178d95f04d 100644 --- a/packages/client/src/components/MkImgWithBlurhash.vue +++ b/packages/client/src/components/MkImgWithBlurhash.vue @@ -68,14 +68,16 @@ onMounted(() => { canvas, img { display: block; - width: 100%; - height: 100%; + max-width: 100%; + max-height: 100%; } canvas { position: absolute; inset: 0; object-fit: cover; + width: 100%; + height: 100%; } img { diff --git a/packages/client/src/components/MkMedia.vue b/packages/client/src/components/MkMedia.vue index 5e7ccff7db..4e1acbd9fc 100644 --- a/packages/client/src/components/MkMedia.vue +++ b/packages/client/src/components/MkMedia.vue @@ -202,7 +202,7 @@ watch( } > a { - display: block; + display: flex; cursor: zoom-in; overflow: hidden; width: 100%; @@ -211,6 +211,9 @@ watch( background-size: contain; background-repeat: no-repeat; box-sizing: border-box; + justify-content: center; + align-items: center; + &:focus-visible { border: 2px solid var(--accent); } diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue index 93aad7b783..5e5ed233ba 100644 --- a/packages/client/src/components/MkMediaList.vue +++ b/packages/client/src/components/MkMediaList.vue @@ -75,7 +75,7 @@ onMounted(() => { }), gallery: gallery.value, children: ".image", - thumbSelector: ".image", + thumbSelector: ".image img", loop: false, padding: window.innerWidth > 500 From 3d0a56e4c60bb1e3b74a9733ad9f427faabce5b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=95=D1=80?= =?UTF-8?q?=D0=BC=D0=BE=D0=BB=D0=B0=D0=B5=D0=B2?= Date: Fri, 21 Jul 2023 17:50:09 +0300 Subject: [PATCH 2/4] Re-centering images after changing image component Also fixing scaling issues in pages when image is thinner than page width. --- packages/client/src/components/MkDriveFileThumbnail.vue | 2 ++ packages/client/src/components/MkGalleryPostPreview.vue | 3 +++ packages/client/src/components/page/page.image.vue | 5 ++--- packages/client/src/pages/gallery/post.vue | 1 - packages/client/src/pages/user/index.photos.vue | 3 +++ 5 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue index 4022ad3145..c5af469e91 100644 --- a/packages/client/src/components/MkDriveFileThumbnail.vue +++ b/packages/client/src/components/MkDriveFileThumbnail.vue @@ -91,6 +91,8 @@ const isThumbnailAvailable = computed(() => { border: 0; padding: 0; cursor: pointer; + align-items: center; + justify-content: center; > .icon-sub { position: absolute; diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue index 2ef339a8fe..2d6e00464a 100644 --- a/packages/client/src/components/MkGalleryPostPreview.vue +++ b/packages/client/src/components/MkGalleryPostPreview.vue @@ -53,8 +53,11 @@ const props = defineProps<{ } > .thumbnail { + display: flex; width: 100%; height: 100%; + justify-content: center; + align-items: center; position: absolute; transition: all 0.5s ease; diff --git a/packages/client/src/components/page/page.image.vue b/packages/client/src/components/page/page.image.vue index 726446030f..1dd0ec73e8 100644 --- a/packages/client/src/components/page/page.image.vue +++ b/packages/client/src/components/page/page.image.vue @@ -30,8 +30,7 @@ const image = props.hpml.page.attachedFiles.find( diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue index 398adb1bcd..aa55cc15bf 100644 --- a/packages/client/src/pages/gallery/post.vue +++ b/packages/client/src/pages/gallery/post.vue @@ -149,7 +149,6 @@ import { computed, defineComponent, inject, watch } from "vue"; import MkButton from "@/components/MkButton.vue"; import * as os from "@/os"; import MkContainer from "@/components/MkContainer.vue"; -import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue"; import MkPagination from "@/components/MkPagination.vue"; import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue"; import MkFollowButton from "@/components/MkFollowButton.vue"; diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue index 9259364e26..256547323b 100644 --- a/packages/client/src/pages/user/index.photos.vue +++ b/packages/client/src/pages/user/index.photos.vue @@ -98,6 +98,9 @@ onMounted(() => { grid-gap: 6px; > .img { + display: flex; + justify-content: center; + align-items: center; position: relative; height: 128px; border-radius: 6px; From 8550a8fe2c6afc0ffae1d5b8c2aa473300bd12bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=95=D1=80?= =?UTF-8?q?=D0=BC=D0=BE=D0=BB=D0=B0=D0=B5=D0=B2?= Date: Fri, 21 Jul 2023 19:05:45 +0300 Subject: [PATCH 3/4] Add largest dimension property to enhance image display --- .../client/src/components/MkImgWithBlurhash.vue | 15 ++++++++++++++- packages/client/src/components/MkMedia.vue | 6 ++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue index 178d95f04d..75a8cd71fb 100644 --- a/packages/client/src/components/MkImgWithBlurhash.vue +++ b/packages/client/src/components/MkImgWithBlurhash.vue @@ -12,7 +12,11 @@ :title="title" :type="type" :alt="alt" - :class="{ cover }" + :class="{ + cover, + wide: largestDimension === 'width', + tall: largestDimension === 'height' + }" :style="{ 'object-fit': cover ? 'cover' : null }" loading="lazy" @load="onLoad" @@ -32,6 +36,7 @@ const props = withDefaults( title?: string | null; size?: number; cover?: boolean; + largestDimension?: 'width'|'height' }>(), { src: null, @@ -82,5 +87,13 @@ canvas { img { object-fit: contain; + + &.wide { + width: 100%; + } + + &.tall { + height: 100%; + } } diff --git a/packages/client/src/components/MkMedia.vue b/packages/client/src/components/MkMedia.vue index 4e1acbd9fc..96b38e4fd7 100644 --- a/packages/client/src/components/MkMedia.vue +++ b/packages/client/src/components/MkMedia.vue @@ -26,6 +26,7 @@ :alt="media.comment" :type="media.type" :cover="false" + :largest-dimension="largestDimension" />
GIF
@@ -120,6 +121,11 @@ const mediaType = computed(() => { : props.media.type; }); +let largestDimension: 'width'|'height'; + +if (props.media.type.startsWith('image') && props.media.properties?.width && props.media.properties?.height) { + largestDimension = props.media.properties.width > props.media.properties.height ? 'width' : 'height' +} function captionPopup() { os.alert({ type: "info", From 7569081040dd81ae6c81b2ab710c88b9e0660417 Mon Sep 17 00:00:00 2001 From: Kainoa Kanter Date: Fri, 21 Jul 2023 23:16:54 +0000 Subject: [PATCH 4/4] Update MkImgWithBlurhash.vue --- packages/client/src/components/MkImgWithBlurhash.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue index 75a8cd71fb..d07542e437 100644 --- a/packages/client/src/components/MkImgWithBlurhash.vue +++ b/packages/client/src/components/MkImgWithBlurhash.vue @@ -13,10 +13,10 @@ :type="type" :alt="alt" :class="{ - cover, - wide: largestDimension === 'width', - tall: largestDimension === 'height' - }" + cover, + wide: largestDimension === 'width', + tall: largestDimension === 'height' + }" :style="{ 'object-fit': cover ? 'cover' : null }" loading="lazy" @load="onLoad" @@ -36,7 +36,7 @@ const props = withDefaults( title?: string | null; size?: number; cover?: boolean; - largestDimension?: 'width'|'height' + largestDimension?: "width" | "height"; }>(), { src: null,