Mercurial > gemma
annotate client/src/App.vue @ 691:d643ff60f607
Client: improve style of waterway axis.
* Add label and circle style to waterway axis via WFS.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 20 Sep 2018 14:33:34 +0200 |
parents | 83081ba6c9c1 |
children | badbc0207418 |
rev | line source |
---|---|
3 | 1 <template> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
2 <div id="app" class="main"> |
649
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
3 <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
4 <div class="topcontainer"> |
649
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
5 <Topbar :routeName="routeName"></Topbar> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
6 </div> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
7 <div class="midcontainer d-flex flex-row"> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
8 <div class="leftcontainer"> |
649
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
9 <Sidebar></Sidebar> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
10 </div> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
11 <div class="middle"> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
12 |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
13 </div> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
14 <div class="rightcontainer"> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
15 |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
16 </div> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
17 </div> |
626
d4fa28bfa6ec
fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents:
621
diff
changeset
|
18 <div class="bottomcontainer d-flex flex-row align-items-end"> |
649
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
19 <Userbar></Userbar> |
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
20 <Linetool v-if="routeName != 'usermanagement'"></Linetool> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
21 </div> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
22 </div> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
23 <div class="d-flex flex-column"> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
24 <router-view/> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
25 </div> |
581 | 26 </div> |
3 | 27 </template> |
28 | |
29 <style lang="scss"> | |
161
b7ac2e4f9c5c
feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents:
30
diff
changeset
|
30 html { |
b7ac2e4f9c5c
feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents:
30
diff
changeset
|
31 height: 100%; |
539
924490b3395b
refac: Loginmask reworked
Thomas Junk <thomas.junk@intevation.de>
parents:
161
diff
changeset
|
32 width: 100%; |
924490b3395b
refac: Loginmask reworked
Thomas Junk <thomas.junk@intevation.de>
parents:
161
diff
changeset
|
33 margin: 0 auto; |
161
b7ac2e4f9c5c
feat: collapsible sidebar
Thomas Junk <thomas.junk@intevation.de>
parents:
30
diff
changeset
|
34 } |
17
7d242100af46
Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents:
13
diff
changeset
|
35 body { |
542
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
539
diff
changeset
|
36 height: 100%; |
505656a9947f
refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
539
diff
changeset
|
37 width: 100%; |
17
7d242100af46
Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents:
13
diff
changeset
|
38 background-color: #efefef !important; |
7d242100af46
Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents:
13
diff
changeset
|
39 } |
7d242100af46
Adjusted the look and feel of the login page according to ISC
Thomas Junk <thomas.junk@intevation.de>
parents:
13
diff
changeset
|
40 |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
41 .topcontainer { |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
42 height: 10vh; |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
43 } |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
44 |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
45 .bottomcontainer { |
626
d4fa28bfa6ec
fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents:
621
diff
changeset
|
46 height: 10vh; |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
47 } |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
48 |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
49 .midcontainer { |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
50 height: 80vh; |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
51 } |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
52 |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
53 .rightcontainer { |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
54 width: 20vw; |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
55 } |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
56 |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
57 .leftcontainer { |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
58 width: 20vw; |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
59 } |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
60 |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
61 .middle { |
631
13bccabbf7c5
fix: usermenu or sidebar trigger arrangement of user/userdetailsview
Thomas Junk <thomas.junk@intevation.de>
parents:
626
diff
changeset
|
62 width: 60vw; |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
63 } |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
64 |
581 | 65 .userinterface { |
66 position: absolute; | |
67 top: 0; | |
68 left: 0; | |
69 height: 100vh; | |
70 width: 100vw; | |
71 z-index: 4; | |
72 pointer-events: none; | |
73 } | |
74 | |
3 | 75 #app { |
581 | 76 height: 100vh; |
77 width: 100vw; | |
3 | 78 font-family: "Avenir", Helvetica, Arial, sans-serif; |
79 -webkit-font-smoothing: antialiased; | |
80 -moz-osx-font-smoothing: grayscale; | |
81 text-align: center; | |
82 color: #2c3e50; | |
83 } | |
84 </style> | |
551
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
85 |
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
86 <script> |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
581
diff
changeset
|
87 import Sidebar from "./application/Sidebar"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
581
diff
changeset
|
88 import Topbar from "./application/Topbar"; |
553
f41c74b8af9c
fix: Sidebar/Topmenu only visible when logged in
Thomas Junk <thomas.junk@intevation.de>
parents:
551
diff
changeset
|
89 import { mapGetters } from "vuex"; |
641
14dfab4e6e32
refac: rename application/user to application/userbar to improve naming consistency
Thomas Junk <thomas.junk@intevation.de>
parents:
631
diff
changeset
|
90 import Userbar from "./application/Userbar"; |
649
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
91 import Linetool from "./application/Linetool"; |
553
f41c74b8af9c
fix: Sidebar/Topmenu only visible when logged in
Thomas Junk <thomas.junk@intevation.de>
parents:
551
diff
changeset
|
92 |
551
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
93 export default { |
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
94 name: "app", |
553
f41c74b8af9c
fix: Sidebar/Topmenu only visible when logged in
Thomas Junk <thomas.junk@intevation.de>
parents:
551
diff
changeset
|
95 computed: { |
649
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
96 ...mapGetters("user", ["isAuthenticated"]), |
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
97 routeName() { |
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
98 const routeName = this.$route.name; |
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
99 return routeName; |
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
100 } |
553
f41c74b8af9c
fix: Sidebar/Topmenu only visible when logged in
Thomas Junk <thomas.junk@intevation.de>
parents:
551
diff
changeset
|
101 }, |
551
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
102 components: { |
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
103 Sidebar, |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
590
diff
changeset
|
104 Topbar, |
649
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
105 Userbar, |
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
641
diff
changeset
|
106 Linetool |
551
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
107 } |
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
108 }; |
89bc8111563a
refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents:
542
diff
changeset
|
109 </script> |