From 0a295e1bb0b6216a81f9e852fc28dea7f796fb99 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:23:50 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../frontend/src/components/MkPageWindow.vue | 11 +-
.../src/pages/custom-emojis-manager.vue | 120 ++++----
packages/frontend/src/pages/timeline.vue | 8 +-
.../frontend/src/pages/welcome.entrance.a.vue | 254 ++++++++--------
packages/frontend/src/style.scss | 14 +
packages/frontend/src/ui/deck/column.vue | 1 -
packages/frontend/src/ui/deck/main-column.vue | 7 +-
packages/frontend/src/ui/minimum.vue | 3 +-
packages/frontend/src/ui/universal.vue | 254 ++++++++--------
packages/frontend/src/ui/visitor.vue | 273 ++++--------------
packages/frontend/src/ui/zen.vue | 36 ++-
11 files changed, 393 insertions(+), 588 deletions(-)
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 67b3165ade..51f19faf29 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</template>
- <div ref="contents" :class="$style.root" style="container-type: inline-size;">
+ <div :class="$style.root" class="_pageContainer">
<RouterView :key="reloadCount" :router="windowRouter"/>
</div>
</MkWindow>
@@ -31,13 +31,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue';
import { url } from '@@/js/config.js';
-import { getScrollContainer } from '@@/js/scroll.js';
import type { PageMetadata } from '@/page.js';
import RouterView from '@/components/global/RouterView.vue';
import MkWindow from '@/components/MkWindow.vue';
import { popout as _popout } from '@/utility/popout.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
-import { useScrollPositionManager } from '@/nirax.js';
import { i18n } from '@/i18n.js';
import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
import { openingWindowsCount } from '@/os.js';
@@ -58,7 +56,6 @@ const emit = defineEmits<{
const routerFactory = useRouterFactory();
const windowRouter = routerFactory(props.initialPath);
-const contents = shallowRef<HTMLElement | null>(null);
const pageMetadata = ref<null | PageMetadata>(null);
const windowEl = shallowRef<InstanceType<typeof MkWindow>>();
const history = ref<{ path: string; key: string; }[]>([{
@@ -177,8 +174,6 @@ function popout() {
windowEl.value?.close();
}
-useScrollPositionManager(() => getScrollContainer(contents.value), windowRouter);
-
onMounted(() => {
analytics.page({
path: props.initialPath,
@@ -202,9 +197,7 @@ defineExpose({
<style lang="scss" module>
.root {
- overscroll-behavior: contain;
-
- min-height: 100%;
+ height: 100%;
background: var(--MI_THEME-bg);
--MI-margin: var(--MI-marginHalf);
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 35a46e4dd9..46e7a3d05e 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -4,73 +4,71 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div>
- <MkStickyContainer>
- <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
- <MkSpacer :contentMax="900">
- <div class="ogwlenmc">
- <div v-if="tab === 'local'" class="local">
- <MkInput v-model="query" :debounce="true" type="search" autocapitalize="off">
+<MkStickyContainer>
+ <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+ <MkSpacer :contentMax="900">
+ <div class="ogwlenmc">
+ <div v-if="tab === 'local'" class="local">
+ <MkInput v-model="query" :debounce="true" type="search" autocapitalize="off">
+ <template #prefix><i class="ti ti-search"></i></template>
+ <template #label>{{ i18n.ts.search }}</template>
+ </MkInput>
+ <MkSwitch v-model="selectMode" style="margin: 8px 0;">
+ <template #label>Select mode</template>
+ </MkSwitch>
+ <div v-if="selectMode" class="_buttons">
+ <MkButton inline @click="selectAll">Select all</MkButton>
+ <MkButton inline @click="setCategoryBulk">Set category</MkButton>
+ <MkButton inline @click="setTagBulk">Set tag</MkButton>
+ <MkButton inline @click="addTagBulk">Add tag</MkButton>
+ <MkButton inline @click="removeTagBulk">Remove tag</MkButton>
+ <MkButton inline @click="setLicenseBulk">Set License</MkButton>
+ <MkButton inline danger @click="delBulk">Delete</MkButton>
+ </div>
+ <MkPagination ref="emojisPaginationComponent" :pagination="pagination">
+ <template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
+ <template #default="{items}">
+ <div class="ldhfsamy">
+ <button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
+ <img :src="emoji.url" class="img" :alt="emoji.name"/>
+ <div class="body">
+ <div class="name _monospace">{{ emoji.name }}</div>
+ <div class="info">{{ emoji.category }}</div>
+ </div>
+ </button>
+ </div>
+ </template>
+ </MkPagination>
+ </div>
+
+ <div v-else-if="tab === 'remote'" class="remote">
+ <FormSplit>
+ <MkInput v-model="queryRemote" :debounce="true" type="search" autocapitalize="off">
<template #prefix><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts.search }}</template>
</MkInput>
- <MkSwitch v-model="selectMode" style="margin: 8px 0;">
- <template #label>Select mode</template>
- </MkSwitch>
- <div v-if="selectMode" class="_buttons">
- <MkButton inline @click="selectAll">Select all</MkButton>
- <MkButton inline @click="setCategoryBulk">Set category</MkButton>
- <MkButton inline @click="setTagBulk">Set tag</MkButton>
- <MkButton inline @click="addTagBulk">Add tag</MkButton>
- <MkButton inline @click="removeTagBulk">Remove tag</MkButton>
- <MkButton inline @click="setLicenseBulk">Set License</MkButton>
- <MkButton inline danger @click="delBulk">Delete</MkButton>
- </div>
- <MkPagination ref="emojisPaginationComponent" :pagination="pagination">
- <template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
- <template #default="{items}">
- <div class="ldhfsamy">
- <button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
- <img :src="emoji.url" class="img" :alt="emoji.name"/>
- <div class="body">
- <div class="name _monospace">{{ emoji.name }}</div>
- <div class="info">{{ emoji.category }}</div>
- </div>
- </button>
- </div>
- </template>
- </MkPagination>
- </div>
-
- <div v-else-if="tab === 'remote'" class="remote">
- <FormSplit>
- <MkInput v-model="queryRemote" :debounce="true" type="search" autocapitalize="off">
- <template #prefix><i class="ti ti-search"></i></template>
- <template #label>{{ i18n.ts.search }}</template>
- </MkInput>
- <MkInput v-model="host" :debounce="true">
- <template #label>{{ i18n.ts.host }}</template>
- </MkInput>
- </FormSplit>
- <MkPagination :pagination="remotePagination">
- <template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
- <template #default="{items}">
- <div class="ldhfsamy">
- <div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
- <img :src="getProxiedImageUrl(emoji.url, 'emoji')" class="img" :alt="emoji.name"/>
- <div class="body">
- <div class="name _monospace">{{ emoji.name }}</div>
- <div class="info">{{ emoji.host }}</div>
- </div>
+ <MkInput v-model="host" :debounce="true">
+ <template #label>{{ i18n.ts.host }}</template>
+ </MkInput>
+ </FormSplit>
+ <MkPagination :pagination="remotePagination">
+ <template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
+ <template #default="{items}">
+ <div class="ldhfsamy">
+ <div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
+ <img :src="getProxiedImageUrl(emoji.url, 'emoji')" class="img" :alt="emoji.name"/>
+ <div class="body">
+ <div class="name _monospace">{{ emoji.name }}</div>
+ <div class="info">{{ emoji.host }}</div>
</div>
</div>
- </template>
- </MkPagination>
- </div>
+ </div>
+ </template>
+ </MkPagination>
</div>
- </MkSpacer>
- </MkStickyContainer>
-</div>
+ </div>
+ </MkSpacer>
+</MkStickyContainer>
</template>
<script lang="ts" setup>
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 68f4b7a26d..b8f5ece02b 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, watch, provide, shallowRef, ref, onMounted, onActivated } from 'vue';
-import { scroll } from '@@/js/scroll.js';
+import { getScrollContainer, scroll } from '@@/js/scroll.js';
import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
import type { MenuItem } from '@/types/menu.js';
import type { BasicTimelineType } from '@/timelines.js';
@@ -56,9 +56,15 @@ import { deepMerge } from '@/utility/merge.js';
import { miLocalStorage } from '@/local-storage.js';
import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js';
import { prefer } from '@/preferences.js';
+import { useScrollPositionManager } from '@/nirax.js';
+import { useRouter } from '@/router/supplier.js';
provide('shouldOmitHeaderTitle', true);
+const router = useRouter();
+
+useScrollPositionManager(() => getScrollContainer(rootEl.value), router);
+
const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>();
const rootEl = shallowRef<HTMLElement>();
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index ebbe27e3d4..9888df02cf 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -4,31 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div v-if="meta" class="rsqzvsbo">
- <MkFeaturedPhotos class="bg"/>
- <XTimeline class="tl"/>
- <div class="shape1"></div>
- <div class="shape2"></div>
- <div class="logo-wrapper">
- <div class="powered-by">Powered by</div>
- <img :src="misskeysvg" class="misskey"/>
+<div v-if="meta" :class="$style.root">
+ <MkFeaturedPhotos :class="$style.bg"/>
+ <XTimeline :class="$style.tl"/>
+ <div :class="$style.shape1"></div>
+ <div :class="$style.shape2"></div>
+ <div :class="$style.logoWrapper">
+ <div :class="$style.poweredBy">Powered by</div>
+ <img :src="misskeysvg" :class="$style.misskey"/>
</div>
- <div class="emojis">
- <MkEmoji :normal="true" :noStyle="true" emoji="๐"/>
- <MkEmoji :normal="true" :noStyle="true" emoji="โค"/>
- <MkEmoji :normal="true" :noStyle="true" emoji="๐"/>
- <MkEmoji :normal="true" :noStyle="true" emoji="๐"/>
- <MkEmoji :normal="true" :noStyle="true" emoji="๐ฎ"/>
- </div>
- <div class="contents">
+ <div :class="$style.contents">
<MkVisitorDashboard/>
</div>
- <div v-if="instances && instances.length > 0" class="federation">
+ <div v-if="instances && instances.length > 0" :class="$style.federation">
<MarqueeText :duration="40">
<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
<!--<MkInstanceCardMini :instance="instance"/>-->
- <img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
- <span class="name _monospace">{{ instance.host }}</span>
+ <img v-if="instance.iconUrl" :class="$style.federationInstanceIcon" :src="getInstanceIcon(instance)" alt=""/>
+ <span class="_monospace">{{ instance.host }}</span>
</MkA>
</MarqueeText>
</div>
@@ -66,122 +59,111 @@ misskeyApiGet('federation/instances', {
});
</script>
-<style lang="scss" scoped>
-.rsqzvsbo {
- > .bg {
- position: fixed;
- top: 0;
- right: 0;
- width: 80vw; // 100%ใใshapeใฎๅน
ใๅผใใฆใใ
- height: 100vh;
- }
+<style lang="scss" module>
+.root {
+ height: 100cqh;
+ overflow: auto;
+ overscroll-behavior: contain;
+}
- > .tl {
- position: fixed;
- top: 0;
- bottom: 0;
- right: 64px;
- margin: auto;
- padding: 128px 0;
- width: 500px;
- height: calc(100% - 256px);
- overflow: hidden;
- -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
- mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+.bg {
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 80vw; // 100%ใใshapeใฎๅน
ใๅผใใฆใใ
+ height: 100vh;
+}
- @media (max-width: 1200px) {
- display: none;
- }
- }
+.tl {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ right: 64px;
+ margin: auto;
+ padding: 128px 0;
+ width: 500px;
+ height: calc(100% - 256px);
+ overflow: hidden;
+ -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+ mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
- > .shape1 {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background: var(--MI_THEME-accent);
- clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
- }
- > .shape2 {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background: var(--MI_THEME-accent);
- clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
- opacity: 0.5;
- }
-
- > .logo-wrapper {
- position: fixed;
- top: 36px;
- left: 36px;
- flex: auto;
- color: #fff;
- user-select: none;
- pointer-events: none;
-
- > .powered-by {
- margin-bottom: 2px;
- }
-
- > .misskey {
- width: 140px;
- @media (max-width: 450px) {
- width: 130px;
- }
- }
- }
-
- > .emojis {
- position: fixed;
- bottom: 32px;
- left: 35px;
-
- > * {
- margin-right: 8px;
- }
-
- @media (max-width: 1200px) {
- display: none;
- }
- }
-
- > .contents {
- position: relative;
- width: min(430px, calc(100% - 32px));
- margin-left: 128px;
- padding: 100px 0 100px 0;
-
- @media (max-width: 1200px) {
- margin: auto;
- }
- }
-
- > .federation {
- position: fixed;
- bottom: 16px;
- left: 0;
- right: 0;
- margin: auto;
- background: var(--MI_THEME-acrylicPanel);
- -webkit-backdrop-filter: var(--MI-blur, blur(15px));
- backdrop-filter: var(--MI-blur, blur(15px));
- border-radius: 999px;
- overflow: clip;
- width: 800px;
- padding: 8px 0;
-
- @media (max-width: 900px) {
- display: none;
- }
+ @media (max-width: 1200px) {
+ display: none;
+ }
+}
+
+.shape1 {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: var(--MI_THEME-accent);
+ clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
+}
+.shape2 {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: var(--MI_THEME-accent);
+ clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
+ opacity: 0.5;
+}
+
+.logoWrapper {
+ position: fixed;
+ top: 36px;
+ left: 36px;
+ flex: auto;
+ color: #fff;
+ user-select: none;
+ pointer-events: none;
+}
+
+.poweredBy {
+ margin-bottom: 2px;
+}
+
+.misskey {
+ width: 120px;
+
+ @media (max-width: 450px) {
+ width: 100px;
+ }
+}
+
+.contents {
+ position: relative;
+ width: min(430px, calc(100% - 32px));
+ margin-left: 128px;
+ padding: 100px 0 100px 0;
+
+ @media (max-width: 1200px) {
+ margin: auto;
+ }
+}
+
+.federation {
+ position: fixed;
+ bottom: 16px;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background: var(--MI_THEME-acrylicPanel);
+ -webkit-backdrop-filter: var(--MI-blur, blur(15px));
+ backdrop-filter: var(--MI-blur, blur(15px));
+ border-radius: 999px;
+ overflow: clip;
+ width: 800px;
+ padding: 8px 0;
+
+ @media (max-width: 900px) {
+ display: none;
}
}
-</style>
-<style lang="scss" module>
.federationInstance {
display: inline-flex;
align-items: center;
@@ -190,13 +172,13 @@ misskeyApiGet('federation/instances', {
margin: 0 10px 0 0;
background: var(--MI_THEME-panel);
border-radius: 999px;
+}
- > :global(.icon) {
- display: inline-block;
- width: 20px;
- height: 20px;
- margin-right: 5px;
- border-radius: 999px;
- }
+.federationInstanceIcon {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+ border-radius: 999px;
}
</style>
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index c449b0e956..68384e80cb 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -170,6 +170,20 @@ rt {
text-align: center;
}
+._pageContainer {
+ container-type: size;
+ contain: strict;
+ overflow: auto;
+ overscroll-behavior: contain;
+}
+
+._page {
+ height: 100cqh;
+ overflow: auto;
+ overflow-y: scroll;
+ overscroll-behavior: contain;
+}
+
._indicatorCircle {
display: inline-block;
width: 1em;
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 7fdf75c026..3358b4e52b 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -358,7 +358,6 @@ function onDrop(ev) {
> .body {
background: var(--MI_THEME-bg) !important;
- overflow-y: scroll !important;
scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
&::-webkit-scrollbar-track {
diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue
index 1ba01a4c8d..5de5d0a866 100644
--- a/packages/frontend/src/ui/deck/main-column.vue
+++ b/packages/frontend/src/ui/deck/main-column.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</template>
- <div ref="contents">
+ <div class="_pageContainer" style="height: 100%;">
<RouterView @contextmenu.stop="onContextmenu"/>
</div>
</XColumn>
@@ -20,7 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { provide, shallowRef, ref } from 'vue';
-import { getScrollContainer } from '@@/js/scroll.js';
import { isLink } from '@@/js/is-link.js';
import XColumn from './column.vue';
import type { Column } from '@/deck.js';
@@ -28,7 +27,6 @@ import type { PageMetadata } from '@/page.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
-import { useScrollPositionManager } from '@/nirax.js';
import { mainRouter } from '@/router/main.js';
import { prefer } from '@/preferences.js';
import { DI } from '@/di.js';
@@ -38,7 +36,6 @@ defineProps<{
isStacked: boolean;
}>();
-const contents = shallowRef<HTMLElement>();
const pageMetadata = ref<null | PageMetadata>(null);
provide(DI.router, mainRouter);
@@ -71,6 +68,4 @@ function onContextmenu(ev: MouseEvent) {
},
}], ev);
}
-
-useScrollPositionManager(() => getScrollContainer(contents.value), mainRouter);
</script>
diff --git a/packages/frontend/src/ui/minimum.vue b/packages/frontend/src/ui/minimum.vue
index 95d564f5a3..ebaa46850c 100644
--- a/packages/frontend/src/ui/minimum.vue
+++ b/packages/frontend/src/ui/minimum.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="$style.root">
- <div style="container-type: inline-size;">
+ <div class="_pageContainer" style="height: 100%;">
<RouterView/>
</div>
@@ -46,6 +46,5 @@ document.documentElement.style.overflowY = 'scroll';
<style lang="scss" module>
.root {
min-height: 100dvh;
- box-sizing: border-box;
}
</style>
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 5b9fbb74ca..28c05ec748 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -7,17 +7,28 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
- <MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
- <template #header>
- <div>
- <XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
- <XAnnouncements v-if="$i"/>
- <XStatusBars :class="$style.statusbars"/>
- </div>
- </template>
- <RouterView/>
- <div :class="$style.spacer"></div>
- </MkStickyContainer>
+ <div :class="$style.contents" @contextmenu.stop="onContextmenu">
+ <div>
+ <XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
+ <XAnnouncements v-if="$i"/>
+ <XStatusBars :class="$style.statusbars"/>
+ </div>
+ <div :class="$style.content" class="_pageContainer">
+ <RouterView/>
+ </div>
+ <div v-if="isMobile" ref="navFooter" :class="$style.nav">
+ <button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
+ <button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
+ <button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
+ <i :class="$style.navButtonIcon" class="ti ti-bell"></i>
+ <span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
+ <span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
+ </span>
+ </button>
+ <button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
+ <button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
+ </div>
+ </div>
<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
<XWidgets/>
@@ -25,19 +36,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<button v-if="!isDesktop && !pageMetadata?.needWideArea && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
- <div v-if="isMobile" ref="navFooter" :class="$style.nav">
- <button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
- <button :class="$style.navButton" class="_button" @click="isRoot ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
- <button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
- <i :class="$style.navButtonIcon" class="ti ti-bell"></i>
- <span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
- <span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
- </span>
- </button>
- <button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
- <button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
- </div>
-
<Transition
:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterActive : ''"
:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
@@ -102,7 +100,6 @@ import { CURRENT_STICKY_BOTTOM } from '@@/js/const.js';
import { isLink } from '@@/js/is-link.js';
import XCommon from './_common_/common.vue';
import type { Ref } from 'vue';
-import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import type { PageMetadata } from '@/page.js';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import * as os from '@/os.js';
@@ -112,7 +109,6 @@ import { $i } from '@/i.js';
import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
import { deviceKind } from '@/utility/device-kind.js';
import { miLocalStorage } from '@/local-storage.js';
-import { useScrollPositionManager } from '@/nirax.js';
import { mainRouter } from '@/router/main.js';
import { prefer } from '@/preferences.js';
import { shouldSuggestRestoreBackup } from '@/preferences/utility.js';
@@ -139,7 +135,6 @@ window.addEventListener('resize', () => {
const pageMetadata = ref<null | PageMetadata>(null);
const widgetsShowing = ref(false);
const navFooter = shallowRef<HTMLElement>();
-const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
provide(DI.router, mainRouter);
provideMetadataReceiver((metadataGetter) => {
@@ -203,13 +198,6 @@ const onContextmenu = (ev) => {
}], ev);
};
-function top() {
- contents.value.rootEl.scrollTo({
- top: 0,
- behavior: 'smooth',
- });
-}
-
const navFooterHeight = ref(0);
provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
@@ -226,8 +214,6 @@ watch(navFooter, () => {
}, {
immediate: true,
});
-
-useScrollPositionManager(() => contents.value.rootEl, mainRouter);
</script>
<style>
@@ -313,15 +299,104 @@ $widgets-hide-threshold: 1090px;
}
.contents {
+ display: flex;
+ flex-direction: column;
flex: 1;
height: 100%;
min-width: 0;
- overflow: auto;
- overflow-y: scroll;
- overscroll-behavior: contain;
background: var(--MI_THEME-bg);
- scroll-padding-top: 60px; // TODO: ใกใใใจ่จ็ฎใใ
- scroll-padding-bottom: 60px; // TODO: ใกใใใจ่จ็ฎใใ
+}
+
+.content {
+ flex: 1;
+ min-height: 0;
+}
+
+.nav {
+ padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+ grid-gap: 8px;
+ width: 100%;
+ box-sizing: border-box;
+ background: var(--MI_THEME-bg);
+ border-top: solid 0.5px var(--MI_THEME-divider);
+}
+
+.navButton {
+ position: relative;
+ padding: 0;
+ aspect-ratio: 1;
+ width: 100%;
+ max-width: 60px;
+ margin: auto;
+ border-radius: 100%;
+ background: var(--MI_THEME-panel);
+ color: var(--MI_THEME-fg);
+
+ &:hover {
+ background: var(--MI_THEME-panelHighlight);
+ }
+
+ &:active {
+ background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
+ }
+}
+
+.postButton {
+ composes: navButton;
+ background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
+ color: var(--MI_THEME-fgOnAccent);
+
+ &:hover {
+ background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+ }
+
+ &:active {
+ background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+ }
+}
+
+.navButtonIcon {
+ font-size: 16px;
+ vertical-align: middle;
+}
+
+.navButtonIndicator {
+ position: absolute;
+ top: 0;
+ left: 0;
+ color: var(--MI_THEME-indicator);
+ font-size: 16px;
+
+ &:has(.itemIndicateValueIcon) {
+ animation: none;
+ font-size: 12px;
+ }
+}
+
+.menuDrawerBg {
+ z-index: 1001;
+}
+
+.menuDrawer {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 1001;
+ height: 100dvh;
+ width: 240px;
+ box-sizing: border-box;
+ contain: strict;
+ overflow: auto;
+ overscroll-behavior: contain;
+ background: var(--MI_THEME-navBg);
+}
+
+.statusbars {
+ position: sticky;
+ top: 0;
+ left: 0;
}
.widgets {
@@ -381,101 +456,4 @@ $widgets-hide-threshold: 1090px;
display: none;
}
}
-
-.nav {
- position: fixed;
- z-index: 1000;
- bottom: 0;
- left: 0;
- padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
- grid-gap: 8px;
- width: 100%;
- box-sizing: border-box;
- -webkit-backdrop-filter: var(--MI-blur, blur(24px));
- backdrop-filter: var(--MI-blur, blur(24px));
- background-color: var(--MI_THEME-header);
- border-top: solid 0.5px var(--MI_THEME-divider);
-}
-
-.navButton {
- position: relative;
- padding: 0;
- aspect-ratio: 1;
- width: 100%;
- max-width: 60px;
- margin: auto;
- border-radius: 100%;
- background: var(--MI_THEME-panel);
- color: var(--MI_THEME-fg);
-
- &:hover {
- background: var(--MI_THEME-panelHighlight);
- }
-
- &:active {
- background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
- }
-}
-
-.postButton {
- composes: navButton;
- background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
- color: var(--MI_THEME-fgOnAccent);
-
- &:hover {
- background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
- }
-
- &:active {
- background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
- }
-}
-
-.navButtonIcon {
- font-size: 18px;
- vertical-align: middle;
-}
-
-.navButtonIndicator {
- position: absolute;
- top: 0;
- left: 0;
- color: var(--MI_THEME-indicator);
- font-size: 16px;
-
- &:has(.itemIndicateValueIcon) {
- animation: none;
- font-size: 12px;
- }
-}
-
-.menuDrawerBg {
- z-index: 1001;
-}
-
-.menuDrawer {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 1001;
- height: 100dvh;
- width: 240px;
- box-sizing: border-box;
- contain: strict;
- overflow: auto;
- overscroll-behavior: contain;
- background: var(--MI_THEME-navBg);
-}
-
-.statusbars {
- position: sticky;
- top: 0;
- left: 0;
-}
-
-.spacer {
- height: calc(var(--MI-minBottomSpacing));
-}
</style>
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index 051bfbfa68..c5b7e0663a 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -4,66 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div class="mk-app">
+<div :class="$style.root">
<a v-if="isRoot" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--MI_THEME-panel); color:var(--MI_THEME-fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
- <div v-if="!narrow && !isRoot" class="side">
- <div class="banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
- <div class="dashboard">
+ <div v-if="!narrow && !isRoot" :class="$style.side">
+ <div :class="$style.banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
+ <div :class="$style.dashboard">
<MkVisitorDashboard/>
</div>
</div>
- <div class="main">
- <div v-if="!isRoot" class="header">
- <div v-if="narrow === false" class="wide">
- <MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i> {{ i18n.ts.home }}</MkA>
- <MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i> {{ i18n.ts.timeline }}</MkA>
- <MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i> {{ i18n.ts.explore }}</MkA>
- <MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i> {{ i18n.ts.channel }}</MkA>
- </div>
- <div v-else-if="narrow === true" class="narrow">
- <button class="menu _button" @click="showMenu = true">
- <i class="ti ti-menu-2 icon"></i>
- </button>
- </div>
- </div>
- <div class="contents">
- <main v-if="!isRoot" style="container-type: inline-size;">
- <RouterView/>
- </main>
- <main v-else>
- <RouterView/>
- </main>
+ <div :class="$style.main">
+ <button v-if="!isRoot" :class="$style.homeButton" class="_button" @click="goHome">
+ <i class="ti ti-home"></i>
+ </button>
+ <div :class="$style.content" class="_pageContainer">
+ <RouterView/>
</div>
</div>
-
- <Transition :name="'tray-back'">
- <div
- v-if="showMenu"
- class="menu-back _modalBg"
- @click="showMenu = false"
- @touchstart.passive="showMenu = false"
- ></div>
- </Transition>
-
- <Transition :name="'tray'">
- <div v-if="showMenu" class="menu">
- <MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i>{{ i18n.ts.home }}</MkA>
- <MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i>{{ i18n.ts.timeline }}</MkA>
- <MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i>{{ i18n.ts.explore }}</MkA>
- <MkA to="/announcements" class="link" activeClass="active"><i class="ti ti-speakerphone icon"></i>{{ i18n.ts.announcements }}</MkA>
- <MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i>{{ i18n.ts.channel }}</MkA>
- <div class="divider"></div>
- <MkA to="/pages" class="link" activeClass="active"><i class="ti ti-news icon"></i>{{ i18n.ts.pages }}</MkA>
- <MkA to="/play" class="link" activeClass="active"><i class="ti ti-player-play icon"></i>Play</MkA>
- <MkA to="/gallery" class="link" activeClass="active"><i class="ti ti-icons icon"></i>{{ i18n.ts.gallery }}</MkA>
- <div class="action">
- <button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
- <button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
- </div>
- </div>
- </Transition>
</div>
<XCommon/>
</template>
@@ -75,8 +33,6 @@ import XCommon from './_common_/common.vue';
import type { PageMetadata } from '@/page.js';
import * as os from '@/os.js';
import { instance } from '@/instance.js';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
import { i18n } from '@/i18n.js';
import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
@@ -103,39 +59,11 @@ provideMetadataReceiver((metadataGetter) => {
});
provideReactiveMetadata(pageMetadata);
-const announcements = {
- endpoint: 'announcements',
- limit: 10,
-};
-
-const isTimelineAvailable = ref(instance.policies.ltlAvailable || instance.policies.gtlAvailable);
-
-const showMenu = ref(false);
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
const narrow = ref(window.innerWidth < 1280);
-const keymap = computed(() => {
- return {
- 's': () => {
- mainRouter.push('/search');
- },
- };
-});
-
-function signin() {
- const { dispose } = os.popup(XSigninDialog, {
- autoSet: true,
- }, {
- closed: () => dispose(),
- });
-}
-
-function signup() {
- const { dispose } = os.popup(XSignupDialog, {
- autoSet: true,
- }, {
- closed: () => dispose(),
- });
+function goHome() {
+ mainRouter.push('/');
}
onMounted(() => {
@@ -145,149 +73,64 @@ onMounted(() => {
}, { passive: true });
}
});
-
-defineExpose({
- showMenu: showMenu,
-});
</script>
<style>
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
</style>
-<style lang="scss" scoped>
-.tray-enter-active,
-.tray-leave-active {
- opacity: 1;
- transform: translateX(0);
- transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-enter-from,
-.tray-leave-active {
- opacity: 0;
- transform: translateX(-240px);
-}
-
-.tray-back-enter-active,
-.tray-back-leave-active {
- opacity: 1;
- transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-back-enter-from,
-.tray-back-leave-active {
- opacity: 0;
-}
-
-.mk-app {
+<style lang="scss" module>
+.root {
display: flex;
- min-height: 100vh;
+ height: 100dvh;
+ overflow: clip;
+}
- > .side {
- position: sticky;
- top: 0;
- left: 0;
- width: 500px;
- height: 100vh;
- background: var(--MI_THEME-accent);
+.main {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-width: 0;
+}
- > .banner {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- aspect-ratio: 1.5;
- background-position: center;
- background-size: cover;
- -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
- mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
- }
+.homeButton {
+ position: fixed;
+ z-index: 1000;
+ bottom: 16px;
+ right: 16px;
+ width: 60px;
+ height: 60px;
+ background: var(--MI_THEME-panel);
+ border-radius: 999px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
- > .dashboard {
- position: relative;
- padding: 32px;
- box-sizing: border-box;
- max-height: 100%;
- overflow: auto;
- }
- }
+.side {
+ position: relative;
+ width: 500px;
+ overflow-y: scroll;
+ background: var(--MI_THEME-accent);
+}
- > .main {
- flex: 1;
- min-width: 0;
+.banner {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ aspect-ratio: 1.5;
+ background-position: center;
+ background-size: cover;
+ -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+}
- > .header {
- background: var(--MI_THEME-panel);
+.dashboard {
+ padding: 32px;
+}
- > .wide {
- line-height: 50px;
- padding: 0 16px;
-
- > .link {
- padding: 0 16px;
- }
- }
-
- > .narrow {
- > .menu {
- padding: 16px;
- }
- }
- }
- }
-
- > .menu-back {
- position: fixed;
- z-index: 1001;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- }
-
- > .menu {
- position: fixed;
- z-index: 1001;
- top: 0;
- left: 0;
- width: 240px;
- height: 100vh;
- background: var(--MI_THEME-panel);
-
- > .link {
- display: block;
- padding: 16px;
-
- > .icon {
- margin-right: 1em;
- }
- }
-
- > .divider {
- margin: 8px auto;
- width: calc(100% - 32px);
- border-top: solid 0.5px var(--MI_THEME-divider);
- }
-
- > .action {
- padding: 16px;
-
- > button {
- display: block;
- width: 100%;
- padding: 10px;
- box-sizing: border-box;
- text-align: center;
- border-radius: 999px;
-
- &._button {
- background: var(--MI_THEME-panel);
- }
-
- &:first-child {
- margin-bottom: 16px;
- }
- }
- }
- }
+.content {
+ display: flex;
+ flex-direction: column;
+ height: 100dvh;
}
</style>
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 99248abecf..45524d1fbb 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -4,21 +4,23 @@ 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 class="_pageContainer" 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>
@@ -54,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 {
@@ -76,7 +75,6 @@ document.documentElement.style.overflowY = 'scroll';
}
.button {
- position: fixed !important;
padding: 0;
aspect-ratio: 1;
width: 100%;