Mercurial > gemma

annotate client/src/application/Sidebar.vue @ 627:afd5595c8d8b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: border radius sidebar
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 11 Sep 2018 17:31:07 +0200
parents d4fa28bfa6ec
children 8278b2fb0c33
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
2 <div :class="sidebarStyle">
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
3 <div :class="menuStyle">
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
4 <router-link to="/" class="text-body d-flex flex-row nav-link">
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
5 <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
6 <div v-if="isSysAdmin">
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
7 <hr/>
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
8 <div class="nav-link d-flex menupadding text-muted">Administration</div>
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
9 <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
10 <i class="fa fa-address-card-o align-self-center navicon"></i>Users
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
11 </router-link>
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
12 </div>
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
13 </div>
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 </div>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 </template>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 <script>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 import { mapGetters } from "vuex";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 name: "sidebar",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 computed: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 ...mapGetters("user", ["isSysAdmin"]),
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 ...mapGetters("application", ["sidebarCollapsed"]),
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 menuStyle() {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
26 return {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 menu: true,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 nav: true,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 "flex-column": true
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
30 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 sidebarStyle() {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 return {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34 "ui-element": true,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 sidebar: true,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
36 overlay: true,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
37 sidebarcollapsed: this.sidebarCollapsed,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 sidebarextended: !this.sidebarCollapsed,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 shadow: true
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
42 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 </script>
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 <style lang="scss">
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 @import "./assets/application.scss";
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 .router-link-exact-active {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 background-color: #f2f2f2;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 .navicon {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 margin-right: $small-offset;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 }
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 .menu {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 padding-top: 5vh;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 }
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 .sidebar {
626
d4fa28bfa6ec fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents: 621
diff changeset
62 top: 1rem;
d4fa28bfa6ec fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents: 621
diff changeset
63 left: 1rem;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 background-color: #ffffff;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65 padding-top: $large-offset;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 opacity: 0.96;
627
afd5595c8d8b fix: border radius sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 626
diff changeset
67 border-radius: 0.5rem;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 .overlay {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 position: absolute;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 z-index: -1;
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 .sidebarcollapsed {
626
d4fa28bfa6ec fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents: 621
diff changeset
76 display: none;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 }
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 .sidebarextended {
626
d4fa28bfa6ec fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents: 621
diff changeset
80 display: block;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 </style>