WIP: Improve admin dashboard

This commit is contained in:
syuilo
2020-08-13 17:58:16 +09:00
parent c59d7d941a
commit ed17636fb9
3 changed files with 71 additions and 13 deletions

View File

@ -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;