diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index 212482ced0..c868a22045 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -86,7 +86,6 @@ 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'; @@ -108,6 +107,7 @@ 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 34c45bad5a..f16d951679 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -48,7 +48,6 @@ 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<{ @@ -113,10 +112,10 @@ onMounted(() => { globalEvents.on('themeChanged', calcBg); if (el.value && el.value.parentElement) { - narrow.value = el.value.parentElement.offsetWidth < MOBILE_THRESHOLD; + narrow.value = el.value.parentElement.offsetWidth < 500; ro = new ResizeObserver((entries, observer) => { if (el.value && el.value.parentElement && document.body.contains(el.value as HTMLElement)) { - narrow.value = el.value.parentElement.offsetWidth < MOBILE_THRESHOLD; + narrow.value = el.value.parentElement.offsetWidth < 500; } }); ro.observe(el.value.parentElement as HTMLElement); diff --git a/packages/frontend/src/const.ts b/packages/frontend/src/const.ts index 2377670116..e135bc69a0 100644 --- a/packages/frontend/src/const.ts +++ b/packages/frontend/src/const.ts @@ -106,9 +106,6 @@ 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 6572ddf363..b35d406a98 100644 --- a/packages/frontend/src/pages/settings/api.vue +++ b/packages/frontend/src/pages/settings/api.vue @@ -15,13 +15,12 @@ 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 >= DESKTOP_THRESHOLD); +const isDesktop = ref(window.innerWidth >= 1100); function generateToken() { const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, { diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts index ad6282c3e4..f0274034b5 100644 --- a/packages/frontend/src/scripts/scroll.ts +++ b/packages/frontend/src/scripts/scroll.ts @@ -2,7 +2,6 @@ * SPDX-FileCopyrightText: syuilo and misskey-project * SPDX-License-Identifier: AGPL-3.0-only */ -import { MOBILE_THRESHOLD } from "@/const.js"; type ScrollBehavior = 'auto' | 'smooth' | 'instant'; @@ -119,7 +118,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 <= MOBILE_THRESHOLD ? 96 : 0)) || 0, + top: (el.scrollHeight - window.innerHeight + getStickyTop(el, container) + (window.innerWidth <= 500 ? 96 : 0)) || 0, ...options, }); } diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue index 6aea69f7e4..b833e9f6be 100644 --- a/packages/frontend/src/ui/classic.vue +++ b/packages/frontend/src/ui/classic.vue @@ -50,7 +50,6 @@ 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'; @@ -63,6 +62,8 @@ 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 6038792ba0..9c3addc482 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -101,7 +101,6 @@ 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'; @@ -146,9 +145,9 @@ mainRouter.navHook = (path, flag): boolean => { return false; }; -const isMobile = ref(window.innerWidth <= MOBILE_THRESHOLD); +const isMobile = ref(window.innerWidth <= 500); window.addEventListener('resize', () => { - isMobile.value = window.innerWidth <= MOBILE_THRESHOLD; + isMobile.value = window.innerWidth <= 500; }); const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet'; diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 9f61b5c720..073acbd4db 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, DESKTOP_THRESHOLD, MOBILE_THRESHOLD } from '@/const.js'; +import { CURRENT_STICKY_BOTTOM } from '@/const.js'; import { useScrollPositionManager } from '@/nirax.js'; import { mainRouter } from '@/router/main.js'; @@ -119,6 +119,9 @@ 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 9f587956ba..c229946bd4 100644 --- a/packages/frontend/src/ui/visitor.vue +++ b/packages/frontend/src/ui/visitor.vue @@ -72,7 +72,6 @@ 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'; @@ -85,6 +84,8 @@ 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);