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