Mercurial > gemma

annotate client/src/components/Sidebar.vue @ 581:fb5d9d5ff320

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: UI redesign
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 06 Sep 2018 17:42:28 +0200
parents 09d8e5483851
children 93e90f6be2ad
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
2 <div :class="sidebarStyle">
554
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
3 <div :class="menuStyle">
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
4 <router-link to="/" class="text-body d-flex flex-row nav-link">
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
5 <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
285
8e22d1f16f81 refactor: better variable naming
Thomas Junk <thomas.junk@intevation.de>
parents: 284
diff changeset
6 <div v-if="isSysAdmin">
494
ab5d2cf65f3c fix: A visual diference of the admin section
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
7 <hr/>
554
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
8 <div class="nav-link d-flex menupadding text-muted">Administration</div>
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
9 <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
554
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
10 <i class="fa fa-address-card-o align-self-center navicon"></i>Users
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
11 </router-link>
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
12 </div>
554
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
13 </div>
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
14 <User></User>
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 </div>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 </template>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 <script>
158
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
19 import { mapGetters } from "vuex";
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
20 import User from "../components/User";
158
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
21
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 export default {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 name: "sidebar",
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
24 components: {
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
25 User: User
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
26 },
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 computed: {
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
28 ...mapGetters("user", ["isSysAdmin"]),
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
29 ...mapGetters("application", ["sidebarCollapsed"]),
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
30 menuStyle() {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
31 return {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
32 menu: true,
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
33 nav: true,
556
09d8e5483851 fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents: 554
diff changeset
34 "flex-column": true
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
35 };
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
36 },
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
37 sidebarStyle() {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 return {
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
39 "ui-element": true,
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
40 sidebar: true,
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
41 overlay: true,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
42 sidebarcollapsed: this.sidebarCollapsed,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
43 sidebarextended: !this.sidebarCollapsed,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
44 shadow: true
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 };
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 };
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 </script>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 <style lang="scss">
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 @import "../assets/application.scss";
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53
554
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
54 .router-link-exact-active {
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
55 background-color: #f2f2f2;
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
56 }
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
57
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
58 .navicon {
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
59 margin-right: $small-offset;
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
60 }
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
61
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
62 .menu {
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
63 padding-top: 10vh;
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
64 height: 90%;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
65 }
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
66
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 .sidebar {
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
68 top: 0;
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
69 background-color: #ffffff;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 padding-top: $large-offset;
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
71 height: 100vh;
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
72 opacity: 0.96;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
75 .overlay {
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
76 position: absolute;
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 556
diff changeset
77 z-index: -1;
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
78 }
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
79
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 .sidebarcollapsed {
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
81 transition: $transition;
556
09d8e5483851 fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents: 554
diff changeset
82 left: -250px;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
83 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
85 .sidebarextended {
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
86 transition: $transition;
556
09d8e5483851 fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents: 554
diff changeset
87 left: 0;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
88 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
89 </style>