mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-25 06:49:23 +01:00
Code Issues Projects Releases Wiki Activity

Menu resizable (#206)

Browse Source 
* Makes side menu resizable

* Fixes hiding of side menu

* Adds mobile menu

* Adds missing file
This commit is contained in:
Amir Raminfar
2019-12-11 13:23:24 -08:00
committed by GitHub
parent 05b26bea9c
commit 1b4a4e626a
5 changed files with 165 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
assets/App.vue
View File

@@ -1,27 +1,32 @@
<template lang="html">
<div class="columns is-marginless">
<side-menu></side-menu>
<div class="column is-offset-3-tablet is-offset-2-widescreen is-9-tablet is-10-widescreen is-paddingless">
<splitpanes>
<pane>
<router-view></router-view>
</pane>
<pane v-for="other in activeContainers" :key="other.id">
<scrollable-view>
<template v-slot:header>
<div class="name columns is-marginless">
<span class="column">{{ other.name }}</span>
<span class="column is-narrow">
<button class="delete is-medium" @click="removeActiveContainer(other)"></button>
</span>
</div>
</template>
<log-viewer-with-source :id="other.id"></log-viewer-with-source>
</scrollable-view>
</pane>
</splitpanes>
</div>
</div>
<main>
<mobile-menu v-if="mobileWidth"></mobile-menu>
<splitpanes>
<pane min-size="10" size="15" v-if="!mobileWidth">
<side-menu></side-menu>
</pane>
<pane size="85">
<splitpanes>
<pane>
<router-view></router-view>
</pane>
<pane v-for="other in activeContainers" :key="other.id">
<scrollable-view>
<template v-slot:header>
<div class="name columns is-marginless">
<span class="column">{{ other.name }}</span>
<span class="column is-narrow">
<button class="delete is-medium" @click="removeActiveContainer(other)"></button>
</span>
</div>
</template>
<log-viewer-with-source :id="other.id"></log-viewer-with-source>
</scrollable-view>
</pane>
</splitpanes>
</pane>
</splitpanes>
</main>
</template>
<script>
@@ -31,12 +36,14 @@ import { Splitpanes, Pane } from "splitpanes";
import LogViewerWithSource from "./components/LogViewerWithSource";
import ScrollableView from "./components/ScrollableView";
import SideMenu from "./components/SideMenu";
import MobileMenu from "./components/MobileMenu";
export default {
name: "App",
components: {
LogViewerWithSource,
SideMenu,
MobileMenu,
ScrollableView,
Splitpanes,
Pane
@@ -58,7 +65,7 @@ export default {
this.title = `${this.containers.length} containers`;
},
computed: {
...mapState(["containers", "activeContainers"])
...mapState(["containers", "activeContainers", "mobileWidth"])
},
methods: {
...mapActions({
@@ -85,5 +92,8 @@ export default {
::v-deep .splitpanes__splitter {
min-width: 4px;
background: #666;
&:hover {
background: rgb(255, 221, 87);
}
}
</style>