Mercurial > gemma
diff 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 |
line wrap: on
line diff
--- a/client/src/components/App.vue Wed Dec 12 19:21:02 2018 +0100 +++ b/client/src/components/App.vue Thu Dec 13 09:15:41 2018 +0100 @@ -1,5 +1,6 @@ <template> <div id="app" class="main"> + <div v-if="$options.LETITSNOW" id="particles-js"></div> <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> <div class="topbar d-flex pt-3 mx-3"> <div class="mr-auto d-flex"> @@ -57,6 +58,24 @@ text-align: center; color: #2c3e50; } + +#particles-js { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient( + to bottom, + rgba(117, 114, 113, 0.8) 10%, + rgba(40, 49, 77, 0.8) 30%, + rgba(29, 35, 71, 0.8) 50%, + rgba(19, 25, 28, 0.8) 80%, + rgba(15, 14, 14, 0.8) 100% + ), + url(https://38media.tumblr.com/tumblr_m00c3czJkM1qbukryo1_500.gif); + background-repeat: no-repeat; + background-size: cover; + background-position: 50% 50%; +} </style> <script> @@ -75,6 +94,7 @@ * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; +import "particles.js"; export default { name: "app", @@ -86,6 +106,123 @@ return routeName; } }, + LETITSNOW: process.env.VUE_APP_LET_IT_SNOW, + mounted() { + if (!this.$options.LETITSNOW) return; + /* eslint-disable */ + particlesJS("particles-js", { + particles: { + number: { + value: 200, + density: { + enable: true, + value_area: 800 + } + }, + color: { + value: "#ffffff" + }, + shape: { + type: "image", + stroke: { + width: 3, + color: "#fff" + }, + polygon: { + nb_sides: 5 + }, + image: { + src: + "http://www.dynamicdigital.us/wp-content/uploads/2013/02/starburst_white_300_drop_2.png", + width: 100, + height: 100 + } + }, + opacity: { + value: 0.7, + random: false, + anim: { + enable: false, + speed: 1, + opacity_min: 0.1, + sync: false + } + }, + size: { + value: 5, + random: true, + anim: { + enable: false, + speed: 20, + size_min: 0.1, + sync: false + } + }, + line_linked: { + enable: false, + distance: 50, + color: "#ffffff", + opacity: 0.6, + width: 1 + }, + move: { + enable: true, + speed: 5, + direction: "bottom", + random: true, + straight: false, + out_mode: "out", + bounce: false, + attract: { + enable: true, + rotateX: 300, + rotateY: 1200 + } + } + }, + interactivity: { + detect_on: "canvas", + events: { + onhover: { + enable: true, + mode: "bubble" + }, + onclick: { + enable: true, + mode: "repulse" + }, + resize: true + }, + modes: { + grab: { + distance: 150, + line_linked: { + opacity: 1 + } + }, + bubble: { + distance: 200, + size: 40, + duration: 2, + opacity: 8, + speed: 3 + }, + repulse: { + distance: 200, + duration: 0.2 + }, + push: { + particles_nb: 4 + }, + remove: { + particles_nb: 2 + } + } + }, + retina_detect: true + }); + /* eslint-enable */ + }, components: { Profiles: () => import("./fairway/Profiles"), Infobar: () => import("./fairway/Infobar"),