Mercurial > gemma

annotate client/src/components/Sidebar.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 fa4f623e3ca6
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">
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
3 <nav :class="menuStyle">
523
e86d6e016bbb refac: Sidebar menu entries are now adjusted to the left
Thomas Junk <thomas.junk@intevation.de>
parents: 494
diff changeset
4 <router-link to="/" class="d-flex nav-link">Riverbed Morphology</router-link>
e86d6e016bbb refac: Sidebar menu entries are now adjusted to the left
Thomas Junk <thomas.junk@intevation.de>
parents: 494
diff changeset
5 <a class="d-flex nav-link" href="#">Link</a>
e86d6e016bbb refac: Sidebar menu entries are now adjusted to the left
Thomas Junk <thomas.junk@intevation.de>
parents: 494
diff changeset
6 <a class="d-flex nav-link" href="#">Link</a>
285
8e22d1f16f81 refactor: better variable naming
Thomas Junk <thomas.junk@intevation.de>
parents: 284
diff changeset
7 <div v-if="isSysAdmin">
494
ab5d2cf65f3c fix: A visual diference of the admin section
Thomas Junk <thomas.junk@intevation.de>
parents: 389
diff changeset
8 <hr/>
523
e86d6e016bbb refac: Sidebar menu entries are now adjusted to the left
Thomas Junk <thomas.junk@intevation.de>
parents: 494
diff changeset
9 <div class="d-flex menupadding text-muted">Administration</div>
e86d6e016bbb refac: Sidebar menu entries are now adjusted to the left
Thomas Junk <thomas.junk@intevation.de>
parents: 494
diff changeset
10 <router-link class="d-flex nav-link" to="users">Users</router-link>
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
11 </div>
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
12 </nav>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
13 </div>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 </template>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 <script>
158
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
17 import { mapGetters } from "vuex";
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
18
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 export default {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 name: "sidebar",
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 computed: {
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
22 ...mapGetters("user", ["isSysAdmin"]),
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
23 ...mapGetters("application", ["sidebarCollapsed"]),
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
24 menuStyle() {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
25 return {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
26 menu: true,
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
27 nav: true,
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
28 "flex-column": true,
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
29 "visibility-extended": !this.sidebarCollapsed,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
30 "visibility-collapsed": this.sidebarCollapsed
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
31 };
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
32 },
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
33 collapseStyle() {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
34 return {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
35 collapser: true,
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
36 collapserextended: !this.sidebarCollapsed,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
37 collapsercollapsed: this.sidebarCollapsed
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
38 };
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
39 },
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 sidebarStyle() {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 return {
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
42 sidebar: true,
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
43 overlay: true,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
44 sidebarcollapsed: this.sidebarCollapsed,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
45 sidebarextended: !this.sidebarCollapsed,
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
46 shadow: true
117
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 }
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 </script>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 <style lang="scss">
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 @import "../assets/application.scss";
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
56 $sidebar-full-width: 210px;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
57 $collapser-left-offset: 170px;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
58 $sidebar-collapsed-width: 0px;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
59
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
60 .collapser {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
61 position: absolute;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
62 top: 0px;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
63 z-index: 1000;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
64 background-color: #ffffff;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
65 font-size: 24px;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
66 }
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
67
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
68 .collapserextended {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
69 left: $collapser-left-offset;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
70 transition: $transition;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
71 }
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
72
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
73 .collapsercollapsed {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
74 left: 3px;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
75 transition: $transition;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
76 }
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
78 .menu {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
79 height: 90%;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
80 }
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
81 .visibility-extended {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
82 opacity: 100;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
83 transition: $transition-slow;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
84 }
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
85 .visibility-collapsed {
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
86 opacity: 0;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
87 transition: $transition-fast;
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
88 }
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
89
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90 .sidebar {
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 523
diff changeset
91 margin-top: $topbarheight;
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
92 background-color: #ffffff;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
93 padding-top: $large-offset;
551
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 550
diff changeset
94 height: 100vh-$topbarheight;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
97 .overlay {
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
98 position: absolute;
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
99 z-index: 1;
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
100 }
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents: 277
diff changeset
101
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 .sidebarcollapsed {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 width: $sidebar-collapsed-width;
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
104 transition: $transition;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
105 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
106
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107 .sidebarextended {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
108 width: $sidebar-full-width;
161
b7ac2e4f9c5c feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 160
diff changeset
109 transition: $transition;
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
110 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
111 </style>