Mercurial > gemma
annotate client/src/components/Sidebar.vue @ 551:89bc8111563a
refac: Layout adjustments
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 31 Aug 2018 14:12:00 +0200 |
parents | 06907c875077 |
children | fa4f623e3ca6 |
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> |