Mercurial > gemma
view client/src/components/Main.vue @ 3089:813309225e35
Made 'go vet' happy again.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Sun, 21 Apr 2019 19:02:35 +0200 |
parents | 0233845cadb7 |
children | f6fb8803032f |
line wrap: on
line source
<template> <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate"> <Pane :pane="panes[0]" :class="pane1Classes" /> <template v-if="panes.length === 2"> <Pane :pane="panes[1]" :class="pane2Classes" /> </template> <template v-if="panes.length === 3"> <Pane :pane="panes[2]" class="d-flex wh-50" /> <Pane :pane="panes[1]" class="d-flex wh-50" /> </template> <template v-if="panes.length === 4"> <Pane :pane="panes[1]" class="d-flex wh-50" /> <Pane :pane="panes[3]" class="d-flex wh-50" /> <Pane :pane="panes[2]" class="d-flex wh-50" /> </template> </div> </template> <style lang="sass"> #panes top: -0.5px right: -0.5px bottom: -0.5px left: -0.5px z-index: 1 &.rotate1 flex-wrap: wrap flex-direction: row &.rotate2 flex-wrap: wrap-reverse flex-direction: column &.rotate3 flex-wrap: wrap-reverse flex-direction: row-reverse &.rotate4 flex-wrap: wrap flex-direction: column-reverse .pane border: solid 0.5px #fff background: #fff </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; export default { components: { Pane: () => import("./Pane") }, computed: { ...mapState("application", ["panes", "paneRotate"]), // pane 1 and 2 are the only ones that can have varying size // thats why tehre is no pane3class or pane4class pane1Classes() { if (this.panes.length === 1) return "wh-100"; if (this.panes.length === 2 || this.panes.length === 3) { if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50"; if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100"; } if (this.panes.length === 4) { return "wh-50"; } }, pane2Classes() { if (this.panes.length === 2) { if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50"; if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100"; } else { return "wh-50"; } } } }; </script>