From 41e9aa6f9b03107518224e2ebde8889c64408204 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Mon, 8 May 2023 18:23:35 +0900 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=82=BB=E3=83=B3=E3=82=B7?= =?UTF-8?q?=E3=83=86=E3=82=A3=E3=83=96=E8=A8=AD=E5=AE=9A=E3=81=95=E3=82=8C?= =?UTF-8?q?=E3=81=9F=E7=94=BB=E5=83=8F=E3=82=92=E9=96=8B=E3=81=8F=E3=81=A8?= =?UTF-8?q?=E3=81=8D=E4=B8=80=E7=9E=AC=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?= =?UTF-8?q?=E3=83=88=E3=81=8C=E5=B4=A9=E3=82=8C=E3=82=8B=E5=95=8F=E9=A1=8C?= =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix #10801 --- .../frontend/src/components/MkMediaList.vue | 60 +------------------ .../frontend/src/pages/settings/general.vue | 3 +- 2 files changed, 4 insertions(+), 59 deletions(-) diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index d28c78fe5..e456ff3ee 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -7,7 +7,6 @@ :class="[ $style.medias, count <= 4 ? $style['n' + count] : $style.nMany, - $style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`] ]" > <template v-for="media in mediaList.filter(media => previewable(media))"> @@ -44,37 +43,6 @@ const pswpZIndex = os.claimZIndex('middle'); document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString()); const count = $computed(() => props.mediaList.filter(media => previewable(media)).length); -function calcAspectRatio() { - if (!gallery.value) return; - - let img = props.mediaList[0]; - - if (props.mediaList.length !== 1 || !(img.properties.width && img.properties.height)) { - gallery.value.style.aspectRatio = ''; - return; - } - - // アスペクト比上限設定では、横長の場合は高さを縮小させる - const ratioMax = (ratio: number) => `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`; - - switch (defaultStore.state.mediaListWithOneImageAppearance) { - case '16_9': - gallery.value.style.aspectRatio = ratioMax(16 / 9); - break; - case '1_1': - gallery.value.style.aspectRatio = ratioMax(1); - break; - case '2_3': - gallery.value.style.aspectRatio = ratioMax(2 / 3); - break; - default: - gallery.value.style.aspectRatio = ''; - break; - } -} - -watch([defaultStore.reactiveState.mediaListWithOneImageAppearance, gallery], () => calcAspectRatio()); - onMounted(() => { const lightbox = new PhotoSwipeLightbox({ dataSource: props.mediaList @@ -194,36 +162,12 @@ const previewable = (file: misskey.entities.DriveFile): boolean => { display: grid; grid-gap: 8px; + // for webkit height: 100%; &.n1 { + aspect-ratio: 16/9; grid-template-rows: 1fr; - - // default (expand) - min-height: 64px; - max-height: clamp( - 64px, - calc(var(--containerHeight, 100svh) * 0.5), // but --containerHeight can broken (too big) - min(334px, 50vh) - ); - - &.n116_9 { - min-height: none; - max-height: none; - aspect-ratio: 16 / 9; // fallback - } - - &.n11_1{ - min-height: none; - max-height: none; - aspect-ratio: 1 / 1; // fallback - } - - &.n12_3 { - min-height: none; - max-height: none; - aspect-ratio: 2 / 3; // fallback - } } &.n2 { diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 7c1522e05..ba0f3274f 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -56,7 +56,7 @@ <option value="ignore">{{ i18n.ts._nsfw.ignore }}</option> <option value="force">{{ i18n.ts._nsfw.force }}</option> </MkSelect> - + <!-- <MkRadios v-model="mediaListWithOneImageAppearance"> <template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template> <option value="expand">{{ i18n.ts.default }}</option> @@ -64,6 +64,7 @@ <option value="1_1">{{ i18n.t('limitTo', { x: '1:1' }) }}</option> <option value="2_3">{{ i18n.t('limitTo', { x: '2:3' }) }}</option> </MkRadios> + --> </div> </FormSection>