Mercurial > gemma
comparison client/src/components/App.vue @ 1573:761e8744e1f3
WAMOS CHRISTMAS EDITION. ACTIVATE WITH VUE_APP_LET_IT_SNOW = true in your configuration
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 13 Dec 2018 09:15:41 +0100 |
parents | 0ded4c56978e |
children | a86fd6f62a57 |
comparison
equal
deleted
inserted
replaced
1572:056a86b24be2 | 1573:761e8744e1f3 |
---|---|
1 <template> | 1 <template> |
2 <div id="app" class="main"> | 2 <div id="app" class="main"> |
3 <div v-if="$options.LETITSNOW" id="particles-js"></div> | |
3 <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> | 4 <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> |
4 <div class="topbar d-flex pt-3 mx-3"> | 5 <div class="topbar d-flex pt-3 mx-3"> |
5 <div class="mr-auto d-flex"> | 6 <div class="mr-auto d-flex"> |
6 <Sidebar :routeName="routeName"></Sidebar> | 7 <Sidebar :routeName="routeName"></Sidebar> |
7 <div class="d-flex flex-column ml-3" style="max-width: 600px"> | 8 <div class="d-flex flex-column ml-3" style="max-width: 600px"> |
55 -webkit-font-smoothing: antialiased; | 56 -webkit-font-smoothing: antialiased; |
56 -moz-osx-font-smoothing: grayscale; | 57 -moz-osx-font-smoothing: grayscale; |
57 text-align: center; | 58 text-align: center; |
58 color: #2c3e50; | 59 color: #2c3e50; |
59 } | 60 } |
61 | |
62 #particles-js { | |
63 position: absolute; | |
64 width: 100%; | |
65 height: 100%; | |
66 background: linear-gradient( | |
67 to bottom, | |
68 rgba(117, 114, 113, 0.8) 10%, | |
69 rgba(40, 49, 77, 0.8) 30%, | |
70 rgba(29, 35, 71, 0.8) 50%, | |
71 rgba(19, 25, 28, 0.8) 80%, | |
72 rgba(15, 14, 14, 0.8) 100% | |
73 ), | |
74 url(https://38media.tumblr.com/tumblr_m00c3czJkM1qbukryo1_500.gif); | |
75 background-repeat: no-repeat; | |
76 background-size: cover; | |
77 background-position: 50% 50%; | |
78 } | |
60 </style> | 79 </style> |
61 | 80 |
62 <script> | 81 <script> |
63 /* This is Free Software under GNU Affero General Public License v >= 3.0 | 82 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
64 * without warranty, see README.md and license for details. | 83 * without warranty, see README.md and license for details. |
73 * Author(s): | 92 * Author(s): |
74 * Thomas Junk <thomas.junk@intevation.de> | 93 * Thomas Junk <thomas.junk@intevation.de> |
75 * Markus Kottländer <markus.kottlaender@intevation.de> | 94 * Markus Kottländer <markus.kottlaender@intevation.de> |
76 */ | 95 */ |
77 import { mapState } from "vuex"; | 96 import { mapState } from "vuex"; |
97 import "particles.js"; | |
78 | 98 |
79 export default { | 99 export default { |
80 name: "app", | 100 name: "app", |
81 computed: { | 101 computed: { |
82 ...mapState("user", ["isAuthenticated"]), | 102 ...mapState("user", ["isAuthenticated"]), |
83 ...mapState("application", ["contextBoxContent"]), | 103 ...mapState("application", ["contextBoxContent"]), |
84 routeName() { | 104 routeName() { |
85 const routeName = this.$route.name; | 105 const routeName = this.$route.name; |
86 return routeName; | 106 return routeName; |
87 } | 107 } |
108 }, | |
109 LETITSNOW: process.env.VUE_APP_LET_IT_SNOW, | |
110 mounted() { | |
111 if (!this.$options.LETITSNOW) return; | |
112 /* eslint-disable */ | |
113 particlesJS("particles-js", { | |
114 particles: { | |
115 number: { | |
116 value: 200, | |
117 density: { | |
118 enable: true, | |
119 value_area: 800 | |
120 } | |
121 }, | |
122 color: { | |
123 value: "#ffffff" | |
124 }, | |
125 shape: { | |
126 type: "image", | |
127 stroke: { | |
128 width: 3, | |
129 color: "#fff" | |
130 }, | |
131 polygon: { | |
132 nb_sides: 5 | |
133 }, | |
134 image: { | |
135 src: | |
136 "http://www.dynamicdigital.us/wp-content/uploads/2013/02/starburst_white_300_drop_2.png", | |
137 width: 100, | |
138 height: 100 | |
139 } | |
140 }, | |
141 opacity: { | |
142 value: 0.7, | |
143 random: false, | |
144 anim: { | |
145 enable: false, | |
146 speed: 1, | |
147 opacity_min: 0.1, | |
148 sync: false | |
149 } | |
150 }, | |
151 size: { | |
152 value: 5, | |
153 random: true, | |
154 anim: { | |
155 enable: false, | |
156 speed: 20, | |
157 size_min: 0.1, | |
158 sync: false | |
159 } | |
160 }, | |
161 line_linked: { | |
162 enable: false, | |
163 distance: 50, | |
164 color: "#ffffff", | |
165 opacity: 0.6, | |
166 width: 1 | |
167 }, | |
168 move: { | |
169 enable: true, | |
170 speed: 5, | |
171 direction: "bottom", | |
172 random: true, | |
173 straight: false, | |
174 out_mode: "out", | |
175 bounce: false, | |
176 attract: { | |
177 enable: true, | |
178 rotateX: 300, | |
179 rotateY: 1200 | |
180 } | |
181 } | |
182 }, | |
183 interactivity: { | |
184 detect_on: "canvas", | |
185 events: { | |
186 onhover: { | |
187 enable: true, | |
188 mode: "bubble" | |
189 }, | |
190 onclick: { | |
191 enable: true, | |
192 mode: "repulse" | |
193 }, | |
194 resize: true | |
195 }, | |
196 modes: { | |
197 grab: { | |
198 distance: 150, | |
199 line_linked: { | |
200 opacity: 1 | |
201 } | |
202 }, | |
203 bubble: { | |
204 distance: 200, | |
205 size: 40, | |
206 duration: 2, | |
207 opacity: 8, | |
208 speed: 3 | |
209 }, | |
210 repulse: { | |
211 distance: 200, | |
212 duration: 0.2 | |
213 }, | |
214 push: { | |
215 particles_nb: 4 | |
216 }, | |
217 remove: { | |
218 particles_nb: 2 | |
219 } | |
220 } | |
221 }, | |
222 retina_detect: true | |
223 }); | |
224 /* eslint-enable */ | |
88 }, | 225 }, |
89 components: { | 226 components: { |
90 Profiles: () => import("./fairway/Profiles"), | 227 Profiles: () => import("./fairway/Profiles"), |
91 Infobar: () => import("./fairway/Infobar"), | 228 Infobar: () => import("./fairway/Infobar"), |
92 Pdftool: () => import("./Pdftool"), | 229 Pdftool: () => import("./Pdftool"), |