This commit is contained in:
syuilo 2021-02-16 22:49:37 +09:00
parent 911dedf3d7
commit 9c1e42cc9b
2 changed files with 45 additions and 40 deletions

View file

@ -121,8 +121,8 @@
</footer>
</main>
<XSide class="side" ref="side"/>
<div class="side">
<XSide class="side" ref="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
<div class="side widgets" :class="{ sideViewOpening }">
<XWidgets/>
</div>
@ -193,6 +193,7 @@ export default defineComponent({
featuredChannels: null,
currentChannel: null,
menuDef: sidebarDef,
sideViewOpening: false,
instanceName,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, farStar, faAt, faLink, faEllipsisH, faGlobe, faComments, faEnvelope,
};
@ -564,6 +565,12 @@ export default defineComponent({
> .side {
width: 350px;
border-left: solid 1px var(--divider);
&.widgets.sideViewOpening {
@media (max-width: 1400px) {
display: none;
}
}
}
}
</style>

View file

@ -1,6 +1,5 @@
<template>
<div class="qvzfzxam _narrow_" v-if="component">
<div class="container">
<div class="mrajymqm _narrow_" v-if="component">
<header class="header" @contextmenu.prevent.stop="onContextmenu">
<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
<XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/>
@ -8,7 +7,6 @@
</header>
<component :is="component" v-bind="props" :ref="changePage"/>
</div>
</div>
</template>
<script lang="ts">
@ -64,6 +62,7 @@ export default defineComponent({
const { component, props } = resolve(path);
this.component = component;
this.props = props;
this.$emit('open');
},
back() {
@ -74,6 +73,7 @@ export default defineComponent({
this.path = null;
this.component = null;
this.props = {};
this.$emit('close');
},
onContextmenu(e) {
@ -114,13 +114,12 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.qvzfzxam {
.mrajymqm {
$header-height: 54px; // TODO:
--section-padding: 16px;
--margin: var(--marginHalf);
> .container {
height: 100%;
overflow: auto;
box-sizing: border-box;
@ -156,6 +155,5 @@ export default defineComponent({
}
}
}
}
</style>