refactor: 画面サイズのしきい値をconstにまとめる
This commit is contained in:
parent
e88fc369d9
commit
05ca36f400
|
@ -86,6 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
|
import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
|
||||||
import type { summaly } from '@misskey-dev/summaly';
|
import type { summaly } from '@misskey-dev/summaly';
|
||||||
import { url as local } from '@/config.js';
|
import { url as local } from '@/config.js';
|
||||||
|
import { MOBILE_THRESHOLD } from '@/const.js';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { deviceKind } from '@/scripts/device-kind.js';
|
import { deviceKind } from '@/scripts/device-kind.js';
|
||||||
|
@ -106,7 +107,6 @@ const props = withDefaults(defineProps<{
|
||||||
showActions: true,
|
showActions: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const MOBILE_THRESHOLD = 500;
|
|
||||||
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
|
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
|
||||||
|
|
||||||
const self = props.url.startsWith(local);
|
const self = props.url.startsWith(local);
|
||||||
|
|
|
@ -48,6 +48,7 @@ import { scrollToTop } from '@/scripts/scroll.js';
|
||||||
import { globalEvents } from '@/events.js';
|
import { globalEvents } from '@/events.js';
|
||||||
import { injectReactiveMetadata } from '@/scripts/page-metadata.js';
|
import { injectReactiveMetadata } from '@/scripts/page-metadata.js';
|
||||||
import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
|
import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
|
||||||
|
import { MOBILE_THRESHOLD } from '@/const.js';
|
||||||
import { PageHeaderItem } from '@/types/page-header.js';
|
import { PageHeaderItem } from '@/types/page-header.js';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
|
@ -112,10 +113,10 @@ onMounted(() => {
|
||||||
globalEvents.on('themeChanged', calcBg);
|
globalEvents.on('themeChanged', calcBg);
|
||||||
|
|
||||||
if (el.value && el.value.parentElement) {
|
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) => {
|
ro = new ResizeObserver((entries, observer) => {
|
||||||
if (el.value && el.value.parentElement && document.body.contains(el.value as HTMLElement)) {
|
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);
|
ro.observe(el.value.parentElement as HTMLElement);
|
||||||
|
|
|
@ -105,6 +105,9 @@ export const ROLE_POLICIES = [
|
||||||
export const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
|
export const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
|
||||||
export const CURRENT_STICKY_BOTTOM = 'CURRENT_STICKY_BOTTOM';
|
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_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_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';
|
export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';
|
||||||
|
|
|
@ -15,12 +15,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
import { defineAsyncComponent, ref, computed } from 'vue';
|
import { defineAsyncComponent, ref, computed } from 'vue';
|
||||||
import FormLink from '@/components/form/link.vue';
|
import FormLink from '@/components/form/link.vue';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
import MkButton from '@/components/MkButton.vue';
|
||||||
|
import { DESKTOP_THRESHOLD } from '@/const.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||||
|
|
||||||
const isDesktop = ref(window.innerWidth >= 1100);
|
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
|
||||||
|
|
||||||
function generateToken() {
|
function generateToken() {
|
||||||
os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
|
os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only
|
* SPDX-License-Identifier: AGPL-3.0-only
|
||||||
*/
|
*/
|
||||||
|
import { MOBILE_THRESHOLD } from "@/const.js";
|
||||||
|
|
||||||
type ScrollBehavior = 'auto' | 'smooth' | 'instant';
|
type ScrollBehavior = 'auto' | 'smooth' | 'instant';
|
||||||
|
|
||||||
|
@ -110,7 +111,7 @@ export function scrollToBottom(
|
||||||
container.scroll({ top: el.scrollHeight - container.clientHeight + getStickyTop(el, container) || 0, ...options });
|
container.scroll({ top: el.scrollHeight - container.clientHeight + getStickyTop(el, container) || 0, ...options });
|
||||||
} else {
|
} else {
|
||||||
window.scroll({
|
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,
|
...options,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -50,6 +50,7 @@ import { defineAsyncComponent, onMounted, provide, ref, computed, shallowRef } f
|
||||||
import XSidebar from './classic.sidebar.vue';
|
import XSidebar from './classic.sidebar.vue';
|
||||||
import XCommon from './_common_/common.vue';
|
import XCommon from './_common_/common.vue';
|
||||||
import { instanceName } from '@/config.js';
|
import { instanceName } from '@/config.js';
|
||||||
|
import { DESKTOP_THRESHOLD } from '@/const.js';
|
||||||
import { StickySidebar } from '@/scripts/sticky-sidebar.js';
|
import { StickySidebar } from '@/scripts/sticky-sidebar.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.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 isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
|
||||||
|
|
||||||
const DESKTOP_THRESHOLD = 1100;
|
|
||||||
|
|
||||||
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
|
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
|
||||||
|
|
||||||
const pageMetadata = ref<null | PageMetadata>(null);
|
const pageMetadata = ref<null | PageMetadata>(null);
|
||||||
|
|
|
@ -100,6 +100,7 @@ import XSidebar from '@/ui/_common_/navbar.vue';
|
||||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
import MkButton from '@/components/MkButton.vue';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
|
import { MOBILE_THRESHOLD } from '@/const.js';
|
||||||
import { navbarItemDef } from '@/navbar.js';
|
import { navbarItemDef } from '@/navbar.js';
|
||||||
import { $i } from '@/account.js';
|
import { $i } from '@/account.js';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
|
@ -144,9 +145,9 @@ mainRouter.navHook = (path, flag): boolean => {
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
const isMobile = ref(window.innerWidth <= 500);
|
const isMobile = ref(window.innerWidth <= MOBILE_THRESHOLD);
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
isMobile.value = window.innerWidth <= 500;
|
isMobile.value = window.innerWidth <= MOBILE_THRESHOLD;
|
||||||
});
|
});
|
||||||
|
|
||||||
const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
|
const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
|
||||||
|
|
|
@ -108,7 +108,7 @@ import { $i } from '@/account.js';
|
||||||
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
|
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
|
||||||
import { deviceKind } from '@/scripts/device-kind.js';
|
import { deviceKind } from '@/scripts/device-kind.js';
|
||||||
import { miLocalStorage } from '@/local-storage.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 { useScrollPositionManager } from '@/nirax.js';
|
||||||
import { mainRouter } from '@/router/main.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 isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
|
||||||
|
|
||||||
const DESKTOP_THRESHOLD = 1100;
|
|
||||||
const MOBILE_THRESHOLD = 500;
|
|
||||||
|
|
||||||
// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
|
// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
|
||||||
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
|
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
|
||||||
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
|
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
|
||||||
|
|
|
@ -72,6 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
import { onMounted, provide, ref, computed } from 'vue';
|
import { onMounted, provide, ref, computed } from 'vue';
|
||||||
import XCommon from './_common_/common.vue';
|
import XCommon from './_common_/common.vue';
|
||||||
import { instanceName } from '@/config.js';
|
import { instanceName } from '@/config.js';
|
||||||
|
import { DESKTOP_THRESHOLD } from '@/const.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { instance } from '@/instance.js';
|
import { instance } from '@/instance.js';
|
||||||
import XSigninDialog from '@/components/MkSigninDialog.vue';
|
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 isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
|
||||||
|
|
||||||
const DESKTOP_THRESHOLD = 1100;
|
|
||||||
|
|
||||||
const pageMetadata = ref<null | PageMetadata>(null);
|
const pageMetadata = ref<null | PageMetadata>(null);
|
||||||
|
|
||||||
provide('router', mainRouter);
|
provide('router', mainRouter);
|
||||||
|
|
Loading…
Reference in New Issue