From cf8a7f93d5b67163272bb75064b090d82a6700e9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 3 Mar 2023 08:48:52 +0900
Subject: [PATCH] :art:
---
packages/frontend/src/components/MkWindow.vue | 2 +-
packages/frontend/src/directives/container.ts | 21 +++++++++++++++++++
packages/frontend/src/directives/index.ts | 2 ++
packages/frontend/src/pages/my-lists/list.vue | 2 +-
packages/frontend/src/ui/deck/column.vue | 2 +-
packages/frontend/src/ui/universal.vue | 2 +-
6 files changed, 27 insertions(+), 4 deletions(-)
create mode 100644 packages/frontend/src/directives/container.ts
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index f7565ca59f..e7ad2b9a43 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -23,7 +23,7 @@
<button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button>
</span>
</div>
- <div :class="$style.content">
+ <div v-container :class="$style.content">
<slot></slot>
</div>
</div>
diff --git a/packages/frontend/src/directives/container.ts b/packages/frontend/src/directives/container.ts
new file mode 100644
index 0000000000..a8a93eb9be
--- /dev/null
+++ b/packages/frontend/src/directives/container.ts
@@ -0,0 +1,21 @@
+import { Directive } from 'vue';
+
+const map = new WeakMap<HTMLElement, ResizeObserver>();
+
+export default {
+ mounted(el: HTMLElement, binding, vn) {
+ const ro = new ResizeObserver((entries, observer) => {
+ el.style.setProperty('--containerHeight', el.offsetHeight + 'px');
+ });
+ ro.observe(el);
+ map.set(el, ro);
+ },
+
+ unmounted(el, binding, vn) {
+ const ro = map.get(el);
+ if (ro) {
+ ro.disconnect();
+ map.delete(el);
+ }
+ },
+} as Directive;
diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts
index a690fd6c42..854f0a544e 100644
--- a/packages/frontend/src/directives/index.ts
+++ b/packages/frontend/src/directives/index.ts
@@ -11,6 +11,7 @@ import clickAnime from './click-anime';
import panel from './panel';
import adaptiveBorder from './adaptive-border';
import adaptiveBg from './adaptive-bg';
+import container from './container';
export default function(app: App) {
app.directive('userPreview', userPreview);
@@ -25,4 +26,5 @@ export default function(app: App) {
app.directive('panel', panel);
app.directive('adaptive-border', adaptiveBorder);
app.directive('adaptive-bg', adaptiveBg);
+ app.directive('container', container);
}
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index 037d00d8ff..205434971d 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -128,7 +128,7 @@ definePageMetadata(computed(() => list ? {
<style lang="scss" module>
.main {
- min-height: calc(100vh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
+ min-height: calc(var(--containerHeight) - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
}
.userItem {
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 38ee37de27..e895847bd9 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -22,7 +22,7 @@
<span :class="$style.title"><slot name="header"></slot></span>
<button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
</header>
- <div v-show="active" ref="body" :class="$style.body">
+ <div v-show="active" ref="body" v-container :class="$style.body">
<slot></slot>
</div>
</section>
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index eef423bdd9..11d1c85e38 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -2,7 +2,7 @@
<div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
- <MkStickyContainer :class="$style.contents">
+ <MkStickyContainer v-container :class="$style.contents">
<template #header><XStatusBars :class="$style.statusbars"/></template>
<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
<div :class="$style.content" style="container-type: inline-size;">