Mercurial > gemma

comparison client/src/components/App.vue @ 1573:761e8744e1f3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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"),