summaryrefslogtreecommitdiff
path: root/packages/frontend/src/ui/zen.vue
diff options
context:
space:
mode:
authorHazelnoot <acomputerdog@gmail.com>2025-03-25 16:14:53 -0400
committerHazelnoot <acomputerdog@gmail.com>2025-03-25 16:14:53 -0400
commitd8908ef2d8fa84d8e0fc1d30ab90a600a3d88054 (patch)
tree0c8d3e0385ce7021c7187ef8b608f1abd87496e5 /packages/frontend/src/ui/zen.vue
parentmerge: enhance: Update de-DE.yml (!949) (diff)
parentenhance(frontend): 設定の移行を手動でトリガーできるように (diff)
downloadsharkey-d8908ef2d8fa84d8e0fc1d30ab90a600a3d88054.tar.gz
sharkey-d8908ef2d8fa84d8e0fc1d30ab90a600a3d88054.tar.bz2
sharkey-d8908ef2d8fa84d8e0fc1d30ab90a600a3d88054.zip
merge upstream
Diffstat (limited to 'packages/frontend/src/ui/zen.vue')
-rw-r--r--packages/frontend/src/ui/zen.vue52
1 files changed, 26 insertions, 26 deletions
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 757aa6669d..66b4496827 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -4,46 +4,50 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div :class="showBottom ? $style.rootWithBottom : $style.root">
- <div style="container-type: inline-size;">
- <RouterView/>
+<div :class="$style.root">
+ <div :class="$style.contents">
+ <div style="flex: 1; min-height: 0;">
+ <RouterView/>
+ </div>
+
+ <!--
+ デッキUIが設定されている場合はデッキUIに戻れるようにする (ただし?zenが明示された場合は表示しない)
+ See https://github.com/misskey-dev/misskey/issues/10905
+ -->
+ <div v-if="showBottom" :class="$style.bottom">
+ <button v-tooltip="i18n.ts.goToMisskey" :class="['_button', '_shadow', $style.button]" @click="goToMisskey"><i class="ti ti-home"></i></button>
+ </div>
</div>
<XCommon/>
</div>
-
-<!--
- デッキUIが設定されている場合はデッキUIに戻れるようにする (ただし?zenが明示された場合は表示しない)
- See https://github.com/misskey-dev/misskey/issues/10905
--->
-<div v-if="showBottom" :class="$style.bottom">
- <button v-tooltip="i18n.ts.goToMisskey" :class="['_button', '_shadow', $style.button]" @click="goToMisskey"><i class="ti ti-home"></i></button>
-</div>
</template>
<script lang="ts" setup>
import { computed, provide, ref } from 'vue';
-import XCommon from './_common_/common.vue';
-import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
import { instanceName, ui } from '@@/js/config.js';
+import XCommon from './_common_/common.vue';
+import type { PageMetadata } from '@/page.js';
+import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
import { i18n } from '@/i18n.js';
-import { mainRouter } from '@/router/main.js';
+import { mainRouter } from '@/router.js';
+import { DI } from '@/di.js';
const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
const pageMetadata = ref<null | PageMetadata>(null);
-const showBottom = !(new URLSearchParams(location.search)).has('zen') && ui === 'deck';
+const showBottom = !(new URLSearchParams(window.location.search)).has('zen') && ui === 'deck';
-provide('router', mainRouter);
+provide(DI.router, mainRouter);
provideMetadataReceiver((metadataGetter) => {
const info = metadataGetter();
pageMetadata.value = info;
if (pageMetadata.value) {
if (isRoot.value && pageMetadata.value.title === instanceName) {
- document.title = pageMetadata.value.title;
+ window.document.title = pageMetadata.value.title;
} else {
- document.title = `${pageMetadata.value.title} | ${instanceName}`;
+ window.document.title = `${pageMetadata.value.title} | ${instanceName}`;
}
}
});
@@ -52,19 +56,16 @@ provideReactiveMetadata(pageMetadata);
function goToMisskey() {
window.location.href = '/';
}
-
-document.documentElement.style.overflowY = 'scroll';
</script>
<style lang="scss" module>
.root {
- min-height: 100dvh;
- box-sizing: border-box;
}
-.rootWithBottom {
- min-height: calc(100dvh - (60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px)));
- box-sizing: border-box;
+.contents {
+ display: flex;
+ flex-direction: column;
+ height: 100dvh;
}
.bottom {
@@ -74,7 +75,6 @@ document.documentElement.style.overflowY = 'scroll';
}
.button {
- position: fixed !important;
padding: 0;
aspect-ratio: 1;
width: 100%;