yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix settings page

Browse source
This commit is contained in:
tamaina 2022-04-17 00:11:37 +09:00
parent 44a01c4b5a
commit f4bd147299
1 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/client/src/pages/settings/index.vue
View file

@ -2,7 +2,10 @@
<MkSpacer :content-max="900" :margin-min="20" :margin-max="32"> <MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
<div ref="el" class="vvcocwet" :class="{ wide: !narrow }"> <div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
<div class="header"> <div class="header">
<div class="title">{{ $ts.settings }}</div> <div class="title">
<MkA v-if="narrow" to="/settings">{{ $ts.settings }}</MkA>
<template v-else>{{ $ts.settings }}</template>
</div>
<div v-if="childInfo" class="subtitle">{{ childInfo.title }}</div> <div v-if="childInfo" class="subtitle">{{ childInfo.title }}</div>
</div> </div>
<div class="body"> <div class="body">
@ -12,7 +15,7 @@
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu> <MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
</div> </div>
</div> </div>
<div class="main"> <div v-if="!(narrow && page == null)" class="main">
<div class="bkzroven"> <div class="bkzroven">
<component :is="component" :ref="el => pageChanged(el)" :key="page" v-bind="pageProps"/> <component :is="component" :ref="el => pageChanged(el)" :key="page" v-bind="pageProps"/>
</div> </div>
@ -23,7 +26,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue'; import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import MkInfo from '@/components/ui/info.vue'; import MkInfo from '@/components/ui/info.vue';
import MkSuperMenu from '@/components/ui/super-menu.vue'; import MkSuperMenu from '@/components/ui/super-menu.vue';
@ -46,10 +49,18 @@ const indexInfo = {
}; };
const INFO = ref(indexInfo); const INFO = ref(indexInfo);
const page = ref(props.initialPage); const page = ref(props.initialPage);
const narrow = ref(false);
const view = ref(null); const view = ref(null);
const el = ref<HTMLElement | null>(null); const el = ref<HTMLElement | null>(null);
const childInfo = ref(null); const childInfo = ref(null);
const narrow = ref(false);
const NARROW_THRESHOLD = 600;
const ro = new ResizeObserver((entries, observer) => {
if (entries.length === 0) return;
narrow.value = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
});
const menuDef = computed(() => [{ const menuDef = computed(() => [{
title: i18n.ts.basicSettings, title: i18n.ts.basicSettings,
items: [{ items: [{
@ -240,12 +251,18 @@ watch(() => props.initialPage, () => {
}); });
onMounted(() => { onMounted(() => {
narrow.value = el.value.offsetWidth < 800; ro.observe(el.value);
narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
if (!narrow.value) { if (!narrow.value) {
page.value = 'profile'; page.value = props.initialPage || 'profile';
} }
}); });
onUnmounted(() => {
ro.disconnect();
});
const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified)); const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
const pageChanged = (page) => { const pageChanged = (page) => {
@ -267,6 +284,7 @@ defineExpose({
font-weight: bold; font-weight: bold;
> .title { > .title {
display: block;
width: 34%; width: 34%;
} }