Mercurial > gemma

annotate client/src/components/Topbar.vue @ 551:89bc8111563a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: Layout adjustments
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 31 Aug 2018 14:12:00 +0200
parents 06907c875077
children f66116b3a249
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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");
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
86 this.$router.push("/login");
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
87 }
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
88 },
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
89 computed: {
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
90 ...mapGetters("user", ["userinfo"])
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
91 }
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 </script>