diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index 6954f1f6ff..5f25fc7800 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -86,6 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue'; import type { summaly } from '@misskey-dev/summaly'; import { url as local } from '@/config.js'; +import { MOBILE_THRESHOLD } from '@/const.js'; import { i18n } from '@/i18n.js'; import * as os from '@/os.js'; import { deviceKind } from '@/scripts/device-kind.js'; @@ -106,7 +107,6 @@ const props = withDefaults(defineProps<{ showActions: true, }); -const MOBILE_THRESHOLD = 500; const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD); const self = props.url.startsWith(local); diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index f16d951679..34c45bad5a 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -48,6 +48,7 @@ import { scrollToTop } from '@/scripts/scroll.js'; import { globalEvents } from '@/events.js'; import { injectReactiveMetadata } from '@/scripts/page-metadata.js'; import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js'; +import { MOBILE_THRESHOLD } from '@/const.js'; import { PageHeaderItem } from '@/types/page-header.js'; const props = withDefaults(defineProps<{ @@ -112,10 +113,10 @@ onMounted(() => { globalEvents.on('themeChanged', calcBg); if (el.value && el.value.parentElement) { - narrow.value = el.value.parentElement.offsetWidth < 500; + narrow.value = el.value.parentElement.offsetWidth < MOBILE_THRESHOLD; ro = new ResizeObserver((entries, observer) => { if (el.value && el.value.parentElement && document.body.contains(el.value as HTMLElement)) { - narrow.value = el.value.parentElement.offsetWidth < 500; + narrow.value = el.value.parentElement.offsetWidth < MOBILE_THRESHOLD; } }); ro.observe(el.value.parentElement as HTMLElement); diff --git a/packages/frontend/src/const.ts b/packages/frontend/src/const.ts index 9e41926a97..71c3ab79e7 100644 --- a/packages/frontend/src/const.ts +++ b/packages/frontend/src/const.ts @@ -105,6 +105,9 @@ export const ROLE_POLICIES = [ export const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP'; export const CURRENT_STICKY_BOTTOM = 'CURRENT_STICKY_BOTTOM'; +export const DESKTOP_THRESHOLD = 1100; +export const MOBILE_THRESHOLD = 500; + export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error.jpg'; export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg'; export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg'; diff --git a/packages/frontend/src/pages/settings/api.vue b/packages/frontend/src/pages/settings/api.vue index d9596b4e45..bd2160d68f 100644 --- a/packages/frontend/src/pages/settings/api.vue +++ b/packages/frontend/src/pages/settings/api.vue @@ -15,12 +15,13 @@ SPDX-License-Identifier: AGPL-3.0-only import { defineAsyncComponent, ref, computed } from 'vue'; import FormLink from '@/components/form/link.vue'; import MkButton from '@/components/MkButton.vue'; +import { DESKTOP_THRESHOLD } from '@/const.js'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; -const isDesktop = ref(window.innerWidth >= 1100); +const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD); function generateToken() { os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, { diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts index 8edb6fca05..1dc013fdfc 100644 --- a/packages/frontend/src/scripts/scroll.ts +++ b/packages/frontend/src/scripts/scroll.ts @@ -2,6 +2,7 @@ * SPDX-FileCopyrightText: syuilo and misskey-project * SPDX-License-Identifier: AGPL-3.0-only */ +import { MOBILE_THRESHOLD } from "@/const.js"; type ScrollBehavior = 'auto' | 'smooth' | 'instant'; @@ -110,7 +111,7 @@ export function scrollToBottom( container.scroll({ top: el.scrollHeight - container.clientHeight + getStickyTop(el, container) || 0, ...options }); } else { window.scroll({ - top: (el.scrollHeight - window.innerHeight + getStickyTop(el, container) + (window.innerWidth <= 500 ? 96 : 0)) || 0, + top: (el.scrollHeight - window.innerHeight + getStickyTop(el, container) + (window.innerWidth <= MOBILE_THRESHOLD ? 96 : 0)) || 0, ...options, }); } diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue index b833e9f6be..6aea69f7e4 100644 --- a/packages/frontend/src/ui/classic.vue +++ b/packages/frontend/src/ui/classic.vue @@ -50,6 +50,7 @@ import { defineAsyncComponent, onMounted, provide, ref, computed, shallowRef } f import XSidebar from './classic.sidebar.vue'; import XCommon from './_common_/common.vue'; import { instanceName } from '@/config.js'; +import { DESKTOP_THRESHOLD } from '@/const.js'; import { StickySidebar } from '@/scripts/sticky-sidebar.js'; import * as os from '@/os.js'; import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js'; @@ -62,8 +63,6 @@ const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue')); const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index'); -const DESKTOP_THRESHOLD = 1100; - const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD); const pageMetadata = ref(null); diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index bdb62dca15..9973db65b4 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -100,6 +100,7 @@ import XSidebar from '@/ui/_common_/navbar.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import MkButton from '@/components/MkButton.vue'; import * as os from '@/os.js'; +import { MOBILE_THRESHOLD } from '@/const.js'; import { navbarItemDef } from '@/navbar.js'; import { $i } from '@/account.js'; import { i18n } from '@/i18n.js'; @@ -144,9 +145,9 @@ mainRouter.navHook = (path, flag): boolean => { return false; }; -const isMobile = ref(window.innerWidth <= 500); +const isMobile = ref(window.innerWidth <= MOBILE_THRESHOLD); window.addEventListener('resize', () => { - isMobile.value = window.innerWidth <= 500; + isMobile.value = window.innerWidth <= MOBILE_THRESHOLD; }); const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet'; diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 3cb6f598a6..4fae90e124 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -108,7 +108,7 @@ import { $i } from '@/account.js'; import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js'; import { deviceKind } from '@/scripts/device-kind.js'; import { miLocalStorage } from '@/local-storage.js'; -import { CURRENT_STICKY_BOTTOM } from '@/const.js'; +import { CURRENT_STICKY_BOTTOM, DESKTOP_THRESHOLD, MOBILE_THRESHOLD } from '@/const.js'; import { useScrollPositionManager } from '@/nirax.js'; import { mainRouter } from '@/router/main.js'; @@ -119,9 +119,6 @@ const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announce const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index'); -const DESKTOP_THRESHOLD = 1100; -const MOBILE_THRESHOLD = 500; - // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD); const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD); diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue index 80623083cf..44f3af4989 100644 --- a/packages/frontend/src/ui/visitor.vue +++ b/packages/frontend/src/ui/visitor.vue @@ -72,6 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { onMounted, provide, ref, computed } from 'vue'; import XCommon from './_common_/common.vue'; import { instanceName } from '@/config.js'; +import { DESKTOP_THRESHOLD } from '@/const.js'; import * as os from '@/os.js'; import { instance } from '@/instance.js'; import XSigninDialog from '@/components/MkSigninDialog.vue'; @@ -84,8 +85,6 @@ import { mainRouter } from '@/router/main.js'; const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index'); -const DESKTOP_THRESHOLD = 1100; - const pageMetadata = ref(null); provide('router', mainRouter);