Mercurial > gemma
annotate client/src/components/Topbar.vue @ 556:09d8e5483851
fix: Layout for users and user details edited
User's role is now rendered as icon
sizing flaws removed
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 03 Sep 2018 14:21:31 +0200 |
parents | f66116b3a249 |
children | fb5d9d5ff320 |
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 } |
556
09d8e5483851
fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents:
555
diff
changeset
|
32 .menubutton { |
09d8e5483851
fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents:
555
diff
changeset
|
33 cursor: pointer; |
09d8e5483851
fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents:
555
diff
changeset
|
34 } |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
35 .searchcontainer { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
36 margin-left: auto; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
37 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
38 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
39 .usermanagement { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
40 margin-left: auto; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
41 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
42 .logout { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
43 position: relative; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
44 top: 3px; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
45 font-size: x-large; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
46 font-weight: bold; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
47 margin-right: $offset; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
48 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
49 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
50 .userpic { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
51 margin-right: 0.5rem; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
52 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
53 .username { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
54 font-weight: bold; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
55 margin-right: 1.5rem; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
56 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
57 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
58 .searchlabel { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
59 color: #aaaaaa; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
60 position: relative; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
61 top: 2px; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
62 font-size: x-large; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
63 margin-right: $small-offset; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
64 } |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
65 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
66 .searchbar { |
551
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
550
diff
changeset
|
67 width: 30vw; |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
68 border: 1px solid; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
69 border-color: #aaaaaa; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
70 border-radius: 10px; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
71 padding-left: 1rem; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
72 padding-right: 1rem; |
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 </style> |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
75 |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
76 |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
77 <script> |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
78 import { mapGetters } from "vuex"; |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
79 |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
80 export default { |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
81 name: "topbar", |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
82 methods: { |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
83 toggleSidebar() { |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
84 this.$store.commit("application/toggleSidebar"); |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
85 }, |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
86 logoff() { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
87 this.$store.commit("user/clear_auth"); |
555
f66116b3a249
fix: Reset collapse state of sidebar
Thomas Junk <thomas.junk@intevation.de>
parents:
551
diff
changeset
|
88 this.$store.commit("application/resetSidebar"); |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
89 this.$router.push("/login"); |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
90 } |
550
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
91 }, |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
92 computed: { |
06907c875077
refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
93 ...mapGetters("user", ["userinfo"]) |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
94 } |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
95 }; |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
96 </script> |