Mercurial > gemma
view client/src/application/Topbar.vue @ 666:4c36b0e39d78
feat: prepareProfile converts geoJSON to diagram data.
PrepareProfile assumes data given in geoJSON format.
It extracts heigth and width information for the diagram and
transposes every coordinate given relative to the first coordinate
in the first set.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 18 Sep 2018 13:43:24 +0200 |
parents | 83081ba6c9c1 |
children | 3e2eeb215d0e |
line wrap: on
line source
<template> <div class="topbar d-flex flex-row justify-content-between"> <div @click="toggleSidebar"> <i class="ui-element menubutton fa fa-bars"></i> </div> <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer"> <div class="input-group-prepend shadow"> <span class="input-group-text searchlabel" for="search"> <i class="fa fa-search"></i> </span> </div> <input id="search" type="text" class="form-control ui-element search searchbar"> </div> <div v-if="routeName != 'usermanagement'"> <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> </div> <Layers v-if="routeName != 'usermanagement'"></Layers> </div> </template> <style lang="scss"> .splitscreen { background-color: white; padding: $small-offset; margin-right: $small-offset; margin-left: $offset; border-radius: $border-radius; height: $icon-width; width: $icon-height; } .menubutton { background-color: white; padding: $small-offset; border-radius: $border-radius; margin-left: $offset; height: $icon-width; width: $icon-height; } .searchcontainer { margin-left: 20vw; margin-right: auto; width: 50vw !important; height: 39px; border-radius: 0.25rem; } .searchbar { margin-left: auto; margin-right: auto; height: 50px; } .topbar { padding-top: $offset; margin-right: $offset; } .logout { font-size: x-large; } </style> <script> import Layers from "../layers/Layers"; export default { name: "topbar", components: { Layers: Layers }, props: ["routeName"], methods: { toggleSidebar() { this.$store.commit("application/toggleSidebar"); }, splitScreen() { this.$store.commit("application/toggleSplitScreen"); } } }; </script>