usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

:ar:t

This commit is contained in:
tamaina 2025-08-25 22:20:52 +09:00
parent a3f0765ba0
commit 27eadb49e4
1 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/frontend/src/pages/qr.show.vue
View File

@ -6,9 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div ref="rootEl" :class="$style.root" :style="{ <div ref="rootEl" :class="$style.root" :style="{
backgroundColor: bgColor, backgroundColor: bgColor,
minHeight: container ? '--MI-QrShowMinHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`,
`calc( ${scrollHeight}px - var(--MI-stickyTop) - var(--MI-stickyBottom) )`
: `calc( 100dvh - var(--MI-stickyTop) - var(--MI-stickyBottom) )`,
}"> }">
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5" /> <MkAnimBg style="position: absolute; top: 0;" :scale="1.5" />
<div :class="$style.fg"> <div :class="$style.fg">
@ -23,9 +21,6 @@ SPDX-License-Identifier: AGPL-3.0-only
> >
<div <div
:class="$style.qrOuter" :class="$style.qrOuter"
:style="{
maxHeight: container ? `max(256px, ${scrollHeight * 0.45}px)` : `max(256px, 45dvh)`,
}"
> >
<div ref="qrCodeEl" v-flip :class="$style.qrInner"></div> <div ref="qrCodeEl" v-flip :class="$style.qrInner"></div>
</div> </div>
@ -47,7 +42,7 @@ import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurha
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import QRCodeStyling from 'qr-code-styling'; import QRCodeStyling from 'qr-code-styling';
import type { Directive } from 'vue'; import type { Directive } from 'vue';
import { computed, ref, watch, onMounted, onUnmounted } from 'vue'; import { computed, ref, shallowRef, watch, onMounted, onUnmounted } from 'vue';
import { host } from '@@/js/config.js'; import { host } from '@@/js/config.js';
import { instance } from '@/instance.js'; import { instance } from '@/instance.js';
import { ensureSignin } from '@/i.js'; import { ensureSignin } from '@/i.js';
@ -60,7 +55,7 @@ import { getScrollContainer } from '@@/js/scroll';
const $i = ensureSignin(); const $i = ensureSignin();
const container = ref<HTMLElement | null>(null); const scrollContainer = shallowRef<HTMLElement | null>(null);
const rootEl = ref<HTMLDivElement | null>(null); const rootEl = ref<HTMLDivElement | null>(null);
const scrollHeight = ref(window.innerHeight); const scrollHeight = ref(window.innerHeight);
@ -133,18 +128,18 @@ onMounted(() => {
//#region scroll height //#region scroll height
function checkScrollHeight() { function checkScrollHeight() {
scrollHeight.value = container.value ? container.value.clientHeight : window.innerHeight; scrollHeight.value = scrollContainer.value ? scrollContainer.value.clientHeight : window.innerHeight;
} }
let ro: ResizeObserver | undefined; let ro: ResizeObserver | undefined;
onMounted(() => { onMounted(() => {
container.value = getScrollContainer(rootEl.value); scrollContainer.value = getScrollContainer(rootEl.value);
checkScrollHeight(); checkScrollHeight();
if (container.value) { if (scrollContainer.value) {
ro = new ResizeObserver(checkScrollHeight); ro = new ResizeObserver(checkScrollHeight);
ro.observe(container.value); ro.observe(scrollContainer.value);
} }
}); });
@ -197,16 +192,17 @@ $avatarSize: 58px;
.root { .root {
position: relative; position: relative;
box-sizing: border-box;
margin-top: calc( -1 * var(--MI-stickyTop) ); margin-top: calc( -1 * var(--MI-stickyTop) );
margin-bottom: calc( -1 * var(--MI-stickyBottom) ); margin-bottom: calc( -1 * var(--MI-stickyBottom) );
padding-top: var(--MI-stickyTop);
padding-bottom: var(--MI-stickyBottom);
height: 100%; height: 100%;
min-height: var(--MI-QrShowMinHeight);
} }
.fg { .fg {
position: sticky; position: sticky;
top: var(--MI-stickyTop); padding-top: var(--MI-stickyTop);
padding-bottom: var(--MI-stickyBottom);
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -216,12 +212,14 @@ $avatarSize: 58px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
padding-top: $s1;
} }
.qrOuter { .qrOuter {
display: flex; display: flex;
width: 100%; width: 100%;
padding: $s1 0 $s3; padding: 0 0 $s3;
max-height: max(256px, calc((var(--MI-QrShowMinHeight) - var(--MI-stickyTop) - var(--MI-stickyBottom)) * 0.55));
} }
.qrInner { .qrInner {