Mercurial > gemma

comparison client/src/application/Topbar.vue @ 585:ef307bd6b5d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: restructured client application To make the application more accessible for developers, the structure was reorganized. Instead of sticking to technical terminology, the application terminology is according to the domain: I.e. "map" contains everything regarding map (including store).
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 07 Sep 2018 11:13:56 +0200
parents
children 53b7a46c53a7
comparison
equal deleted inserted replaced
584:8b66a10aaf8a 585:ef307bd6b5d8
1 <template>
2 <div class="topbar d-flex flex-row justify-content-between">
3 <div>
4 <i @click="toggleSidebar" class="ui-element menubutton fa fa-bars"></i>
5 </div>
6 <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer">
7 <div class="input-group-prepend">
8 <span class="input-group-text searchlabel" for="search">
9 <i class="fa fa-search"></i>
10 </span>
11 </div>
12 <input id="search" type="text" class="form-control ui-element search searchbar">
13 </div>
14 <Layers v-if="routeName != 'usermanagement'"></Layers>
15 </div>
16 </template>
17
18 <style lang="scss">
19 @import "./assets/application.scss";
20
21 .menubutton {
22 background-color: white;
23 padding: 0.5rem;
24 }
25
26 .searchcontainer {
27 margin-left: 20vw;
28 margin-right: auto;
29 width: 50vw !important;
30 height: 39px;
31 border-radius: 0.25rem;
32 }
33
34 .searchbar {
35 margin-left: auto;
36 margin-right: auto;
37 height: 50px;
38 }
39
40 .topbar {
41 padding-top: 2vh;
42 margin-right: 1vw;
43 margin-left: 0;
44 }
45
46 .logout {
47 font-size: x-large;
48 }
49 </style>
50
51
52 <script>
53 import Layers from "../layers/Layers";
54
55 export default {
56 name: "topbar",
57 components: {
58 Layers: Layers
59 },
60 methods: {
61 toggleSidebar() {
62 this.$store.commit("application/toggleSidebar");
63 }
64 },
65 computed: {
66 routeName() {
67 const routeName = this.$route.name;
68 console.log(routeName);
69 return routeName;
70 }
71 }
72 };
73 </script>