diff --git a/packages/frontend/src/components/global/MkStickyContainer.vue b/packages/frontend/src/components/global/MkStickyContainer.vue index 44c02088da..e5dba54b4e 100644 --- a/packages/frontend/src/components/global/MkStickyContainer.vue +++ b/packages/frontend/src/components/global/MkStickyContainer.vue @@ -14,6 +14,7 @@ <script lang="ts" setup> import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue'; +import { $$ } from 'vue/macros'; import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@/const'; const rootEl = $shallowRef<HTMLElement>(); @@ -83,8 +84,8 @@ onMounted(() => { onUnmounted(() => { observer.disconnect(); }); + +defineExpose({ + rootEl: $$(rootEl), +}); </script> - -<style lang="scss" module> - -</style> diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 3e06522b69..20bf08ad7e 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -2,14 +2,10 @@ <div :class="$style.root"> <XSidebar v-if="!isMobile" :class="$style.sidebar"/> - <MkStickyContainer :class="$style.contents"> + <MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu"> <template #header><XStatusBars :class="$style.statusbars"/></template> - <main style="min-width: 0;" @contextmenu.stop="onContextmenu"> - <div :class="$style.content" style="container-type: inline-size;"> - <RouterView/> - </div> - <div :class="$style.spacer"></div> - </main> + <RouterView/> + <div :class="$style.spacer"></div> </MkStickyContainer> <div v-if="isDesktop" :class="$style.widgets"> @@ -84,8 +80,9 @@ </template> <script lang="ts" setup> -import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, inject, Ref } from 'vue'; +import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, shallowRef, Ref } from 'vue'; import XCommon from './_common_/common.vue'; +import type MkStickyContainer from '@/components/global/MkStickyContainer.vue'; import { instanceName } from '@/config'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import * as os from '@/os'; @@ -98,6 +95,7 @@ import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata'; import { deviceKind } from '@/scripts/device-kind'; import { miLocalStorage } from '@/local-storage'; import { CURRENT_STICKY_BOTTOM } from '@/const'; + const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue')); const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue')); const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); @@ -115,6 +113,7 @@ window.addEventListener('resize', () => { let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); const widgetsShowing = $ref(false); const navFooter = $shallowRef<HTMLElement>(); +const contents = shallowRef<InstanceType<typeof MkStickyContainer>>(); provide('router', mainRouter); provideMetadataReceiver((info) => { @@ -194,7 +193,10 @@ const onContextmenu = (ev) => { }; function top() { - // TODO + contents.value.rootEl.scrollTo({ + top: 0, + behavior: 'smooth', + }); } let navFooterHeight = $ref(0);