From 6addf9002cbdcd09e2deb66f0278946db990f014 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 31 May 2023 18:03:43 +0900
Subject: [PATCH] tweak ui
---
.../components/global/MkStickyContainer.vue | 9 +++++----
packages/frontend/src/ui/universal.vue | 20 ++++++++++---------
2 files changed, 16 insertions(+), 13 deletions(-)
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);