tweak ui
This commit is contained in:
parent
6dd219b6c7
commit
6addf9002c
2 changed files with 16 additions and 13 deletions
|
@ -14,6 +14,7 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
|
import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
|
||||||
|
import { $$ } from 'vue/macros';
|
||||||
import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@/const';
|
import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@/const';
|
||||||
|
|
||||||
const rootEl = $shallowRef<HTMLElement>();
|
const rootEl = $shallowRef<HTMLElement>();
|
||||||
|
@ -83,8 +84,8 @@ onMounted(() => {
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
observer.disconnect();
|
observer.disconnect();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
rootEl: $$(rootEl),
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" module>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -2,14 +2,10 @@
|
||||||
<div :class="$style.root">
|
<div :class="$style.root">
|
||||||
<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
|
<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>
|
<template #header><XStatusBars :class="$style.statusbars"/></template>
|
||||||
<main style="min-width: 0;" @contextmenu.stop="onContextmenu">
|
<RouterView/>
|
||||||
<div :class="$style.content" style="container-type: inline-size;">
|
<div :class="$style.spacer"></div>
|
||||||
<RouterView/>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.spacer"></div>
|
|
||||||
</main>
|
|
||||||
</MkStickyContainer>
|
</MkStickyContainer>
|
||||||
|
|
||||||
<div v-if="isDesktop" :class="$style.widgets">
|
<div v-if="isDesktop" :class="$style.widgets">
|
||||||
|
@ -84,8 +80,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<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 XCommon from './_common_/common.vue';
|
||||||
|
import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
|
||||||
import { instanceName } from '@/config';
|
import { instanceName } from '@/config';
|
||||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
@ -98,6 +95,7 @@ import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
|
||||||
import { deviceKind } from '@/scripts/device-kind';
|
import { deviceKind } from '@/scripts/device-kind';
|
||||||
import { miLocalStorage } from '@/local-storage';
|
import { miLocalStorage } from '@/local-storage';
|
||||||
import { CURRENT_STICKY_BOTTOM } from '@/const';
|
import { CURRENT_STICKY_BOTTOM } from '@/const';
|
||||||
|
|
||||||
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
|
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
|
||||||
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
|
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
|
||||||
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
||||||
|
@ -115,6 +113,7 @@ window.addEventListener('resize', () => {
|
||||||
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
||||||
const widgetsShowing = $ref(false);
|
const widgetsShowing = $ref(false);
|
||||||
const navFooter = $shallowRef<HTMLElement>();
|
const navFooter = $shallowRef<HTMLElement>();
|
||||||
|
const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
|
||||||
|
|
||||||
provide('router', mainRouter);
|
provide('router', mainRouter);
|
||||||
provideMetadataReceiver((info) => {
|
provideMetadataReceiver((info) => {
|
||||||
|
@ -194,7 +193,10 @@ const onContextmenu = (ev) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
function top() {
|
function top() {
|
||||||
// TODO
|
contents.value.rootEl.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth',
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let navFooterHeight = $ref(0);
|
let navFooterHeight = $ref(0);
|
||||||
|
|
Loading…
Reference in a new issue