From ed17636fb9852263b33e37fe9cc6eb20d2aafbc8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 13 Aug 2020 17:58:16 +0900
Subject: WIP: Improve admin dashboard

---
 src/client/components/ui/container.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

(limited to 'src/client/components/ui/container.vue')

diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index 41b05544cc..247bfdbb9e 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable }" v-size="{ max: [380], el: resizeBaseEl }">
-	<header v-if="showHeader">
+<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380], el: resizeBaseEl }">
+	<header v-if="showHeader" ref="header">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
 		<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
@@ -62,6 +62,18 @@ export default Vue.extend({
 			faAngleUp, faAngleDown
 		};
 	},
+	mounted() {
+		this.$watch('showBody', showBody => {
+			this.$el.style.minHeight = `${this.$refs.header.offsetHeight}px`;
+			if (showBody) {
+				this.$el.style.flexBasis = `auto`;
+			} else {
+				this.$el.style.flexBasis = `${this.$refs.header.offsetHeight}px`;
+			}
+		}, {
+			immediate: true
+		});
+	},
 	methods: {
 		toggleContent(show: boolean) {
 			if (!this.bodyTogglable) return;
-- 
cgit v1.2.3-freya