diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/ui/container.vue | 16 |
1 files changed, 14 insertions, 2 deletions
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; |