Mercurial > gemma

annotate client/src/components/Sidebar.vue @ 556:09d8e5483851

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 fa4f623e3ca6
children fb5d9d5ff320
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>
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
9 <router-link class="text-body d-flex flex-row nav-link" to="users">
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>
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 </div>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 </template>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 <script>
158
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
18 import { mapGetters } from "vuex";
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
19
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 export default {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 name: "sidebar",
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 computed: {
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
23 ...mapGetters("user", ["isSysAdmin"]),
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
24 ...mapGetters("application", ["sidebarCollapsed"]),
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
25 menuStyle() {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
26 return {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
27 menu: true,
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
28 nav: true,
556
09d8e5483851 fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents: 554
diff changeset
29 "flex-column": true
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
30 };
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
31 },
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 sidebarStyle() {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 return {
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
34 sidebar: true,
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
35 overlay: true,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
36 sidebarcollapsed: this.sidebarCollapsed,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
37 sidebarextended: !this.sidebarCollapsed,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
38 shadow: true
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 };
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
42 };
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 </script>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 <style lang="scss">
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 @import "../assets/application.scss";
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47
554
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
48 .router-link-exact-active {
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
49 background-color: #f2f2f2;
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
50 }
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
51
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
52 .navicon {
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
53 margin-right: $small-offset;
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
54 }
fa4f623e3ca6 feat: Icons for menu navigation
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
55
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
56 .menu {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
57 height: 90%;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
58 }
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
59
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 .sidebar {
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
61 margin-top: $topbarheight;
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
62 background-color: #ffffff;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 padding-top: $large-offset;
551
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 550
diff changeset
64 height: 100vh-$topbarheight;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
67 .overlay {
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
68 position: absolute;
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
69 z-index: 1;
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
70 }
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
71
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 .sidebarcollapsed {
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
73 transition: $transition;
556
09d8e5483851 fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents: 554
diff changeset
74 left: -250px;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 .sidebarextended {
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
78 transition: $transition;
556
09d8e5483851 fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents: 554
diff changeset
79 left: 0;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 </style>