Mercurial > gemma
view client/src/App.vue @ 935:430d52c2f6ef
client: move layer isolines to be drawn at the top
* Move layer isolones to be drawn last (and thus being "on top")
so that the bottleneck (position) layer will not interfere that much
with the colours. It also allows to set a white background with high
opacity on the bottleneck polygon in order to get highly visible
isolines.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Mon, 08 Oct 2018 17:20:42 +0200 |
parents | d7ae7338872d |
children | d7f34791b18d |
line wrap: on
line source
<template> <div id="app" class="main"> <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> <div class="topcontainer"> <Topbar :routeName="routeName"></Topbar> </div> <div class="midcontainer d-flex flex-row"> <div class="leftcontainer"> <Sidebar></Sidebar> </div> <div class="middle"> </div> <div class="rightcontainer"> </div> </div> <div class="bottomcontainer d-flex flex-row align-items-end"> <Userbar></Userbar> <Morphtool v-if="routeName == 'mainview'"></Morphtool> <Linetool v-if="routeName == 'mainview'"></Linetool> </div> </div> <div class="d-flex flex-column"> <router-view/> </div> </div> </template> <style lang="scss"> html { height: 100%; width: 100%; margin: 0 auto; } body { height: 100%; width: 100%; background-color: #efefef !important; } .topcontainer { height: 10vh; } .bottomcontainer { height: 10vh; } .midcontainer { height: 80vh; } .rightcontainer { width: 20vw; } .leftcontainer { width: 20vw; } .middle { width: 60vw; } .userinterface { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 4; pointer-events: none; } #app { height: 100vh; width: 100vw; font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } </style> <script> import Sidebar from "./application/Sidebar"; import Topbar from "./application/Topbar"; import { mapGetters } from "vuex"; import Userbar from "./application/Userbar"; import Linetool from "./application/Linetool"; import Morphtool from "./application/Morphtool"; export default { name: "app", computed: { ...mapGetters("user", ["isAuthenticated"]), routeName() { const routeName = this.$route.name; return routeName; } }, components: { Sidebar, Topbar, Userbar, Linetool, Morphtool } }; </script>