Mercurial > gemma
annotate client/src/application/Sidebar.vue @ 585:ef307bd6b5d8
refac: restructured client application
To make the application more accessible for developers, the structure was reorganized.
Instead of sticking to technical terminology, the application terminology is according to the domain:
I.e. "map" contains everything regarding map (including store).
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 07 Sep 2018 11:13:56 +0200 |
parents | |
children | b17a4482d07d |
rev | line source |
---|---|
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
2 <div :class="sidebarStyle"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
3 <div :class="menuStyle"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
4 <router-link to="/" class="text-body d-flex flex-row nav-link"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
5 <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
6 <div v-if="isSysAdmin"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
7 <hr/> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
8 <div class="nav-link d-flex menupadding text-muted">Administration</div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
9 <router-link class="text-body d-flex flex-row nav-link" to="usermanagement"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
10 <i class="fa fa-address-card-o align-self-center navicon"></i>Users |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
11 </router-link> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
12 </div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
13 </div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
14 <User></User> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
15 </div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
16 </template> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
17 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
18 <script> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
19 import { mapGetters } from "vuex"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
20 import User from "./User"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
21 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
22 export default { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
23 name: "sidebar", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
24 components: { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 User: User |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
27 computed: { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
28 ...mapGetters("user", ["isSysAdmin"]), |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
29 ...mapGetters("application", ["sidebarCollapsed"]), |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
30 menuStyle() { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 return { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
32 menu: true, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
33 nav: true, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
34 "flex-column": true |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
35 }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
36 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
37 sidebarStyle() { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 return { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 "ui-element": true, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
40 sidebar: true, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
41 overlay: true, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
42 sidebarcollapsed: this.sidebarCollapsed, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
43 sidebarextended: !this.sidebarCollapsed, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
44 shadow: true |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
45 }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
46 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
47 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
48 }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
49 </script> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
50 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
51 <style lang="scss"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
52 @import "./assets/application.scss"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
53 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
54 .router-link-exact-active { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
55 background-color: #f2f2f2; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
56 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
57 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
58 .navicon { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
59 margin-right: $small-offset; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
60 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
61 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
62 .menu { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
63 padding-top: 5vh; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
64 height: 90%; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
65 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
66 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
67 .sidebar { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
68 top: 0; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
69 background-color: #ffffff; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
70 padding-top: $large-offset; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
71 height: 100vh; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
72 opacity: 0.96; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
73 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
74 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
75 .overlay { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
76 position: absolute; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
77 z-index: -1; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
78 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
79 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
80 .sidebarcollapsed { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
81 transition: $transition; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
82 left: -250px; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
83 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
84 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
85 .sidebarextended { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
86 transition: $transition; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
87 left: 0; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
88 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
89 </style> |