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

enhance(frontend): スマホでのMkModalWindowの表示を最適化

This commit is contained in:
syuilo 2025-06-04 12:28:50 +09:00
parent b766589c00
commit 218df19d9c
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/frontend/src/components/MkModalWindow.vue
View File

@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')"> <MkModal ref="modal" v-slot="{ type }" :preferType="deviceKind === 'smartphone' ? 'drawer' : 'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
<div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }"> <div ref="rootEl" :class="[$style.root, type === 'drawer' ? $style.asDrawer : null]" :style="{ width: type === 'drawer' ? '' : `${width}px`, height: type === 'drawer' ? '' : `min(${height}px, 100%)` }">
<div :class="$style.header"> <div :class="$style.header">
<button v-if="withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="emit('close')"><i class="ti ti-x"></i></button> <button v-if="withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="emit('close')"><i class="ti ti-x"></i></button>
<span :class="$style.title"> <span :class="$style.title">
@ -30,6 +30,7 @@ import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
import MkModal from '@/components/MkModal.vue'; import MkModal from '@/components/MkModal.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { deviceKind } from '@/utility/device-kind.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
withOkButton?: boolean; withOkButton?: boolean;
@ -85,6 +86,11 @@ defineExpose({
@media (max-width: 500px) { @media (max-width: 500px) {
--root-margin: 16px; --root-margin: 16px;
} }
&.asDrawer {
height: calc(100dvh - 30px);
border-radius: 0;
}
} }
.header { .header {