Mercurial > gemma
annotate client/src/components/Topbar.vue @ 555:f66116b3a249
fix: Reset collapse state of sidebar
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 03 Sep 2018 12:57:33 +0200 |
parents | 89bc8111563a |
children | 09d8e5483851 |
rev | line source |
---|---|
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
2 <div class="topbar shadow-sm d-flex flex-row justify-content-between"> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
3 <div class="align-self-center"> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
4 <i @click="toggleSidebar" class="menubutton fa fa-bars"></i> |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
5 </div> |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
6 <div class="searchcontainer align-self-center"> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
7 <label class="searchlabel" for="search"> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
8 <i class="fa fa-search"></i> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
9 </label> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
10 <input id="search" type="text" class="search searchbar"> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
11 </div> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
12 <div class="align-self-center usermanagement"> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
13 <img class="userpic" src="../assets/user.png"> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
14 <span class="username">{{ userinfo }}</span> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
15 <span class="logout" @click="logoff"> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
16 <i class="fa fa-power-off"></i> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
17 </span> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
18 </div> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
19 </div> |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
20 </template> |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
21 |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
22 <style lang="scss"> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
23 @import "../assets/application.scss"; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
24 .topbar { |
551
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
550
diff
changeset
|
25 position: absolute; |
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
550
diff
changeset
|
26 width: 100vw; |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
27 height: $topbarheight; |
551
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
550
diff
changeset
|
28 min-height: 40px; |
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
550
diff
changeset
|
29 background-color: white; |
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
550
diff
changeset
|
30 z-index: 100; |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
31 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
32 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
33 .searchcontainer { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
34 margin-left: auto; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
35 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
36 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
37 .usermanagement { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
38 margin-left: auto; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
39 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
40 .logout { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
41 position: relative; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
42 top: 3px; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
43 font-size: x-large; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
44 font-weight: bold; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
45 margin-right: $offset; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
46 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
47 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
48 .userpic { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
49 margin-right: 0.5rem; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
50 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
51 .username { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
52 font-weight: bold; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
53 margin-right: 1.5rem; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
54 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
55 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
56 .searchlabel { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
57 color: #aaaaaa; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
58 position: relative; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
59 top: 2px; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
60 font-size: x-large; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
61 margin-right: $small-offset; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
62 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
63 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
64 .searchbar { |
551
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
550
diff
changeset
|
65 width: 30vw; |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
66 border: 1px solid; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
67 border-color: #aaaaaa; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
68 border-radius: 10px; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
69 padding-left: 1rem; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
70 padding-right: 1rem; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
71 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
72 </style> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
73 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
74 |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
75 <script> |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
76 import { mapGetters } from "vuex"; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
77 |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
78 export default { |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
79 name: "topbar", |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
80 methods: { |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
81 toggleSidebar() { |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
82 this.$store.commit("application/toggleSidebar"); |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
83 }, |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
84 logoff() { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
85 this.$store.commit("user/clear_auth"); |
555
f66116b3a249
fix: Reset collapse state of sidebar
Thomas Junk <thomas.junk@intevation.de>
parents:
551
diff
changeset
|
86 this.$store.commit("application/resetSidebar"); |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
87 this.$router.push("/login"); |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
88 } |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
89 }, |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
90 computed: { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
91 ...mapGetters("user", ["userinfo"]) |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
92 } |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
93 }; |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
94 </script> |