Mercurial > gemma
changeset 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 | 056a86b24be2 |
children | df975eb2e80e |
files | client/package.json client/src/components/App.vue client/yarn.lock |
diffstat | 3 files changed, 143 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Wed Dec 12 19:21:02 2018 +0100 +++ b/client/package.json Thu Dec 13 09:15:41 2018 +0100 @@ -33,6 +33,7 @@ "glob-all": "^3.1.0", "locale2": "^2.2.0", "ol": "^5.3.0", + "particles.js": "^2.0.0", "path": "^0.12.7", "prettier": "^1.15.3", "purgecss-webpack-plugin": "^1.4.0",
--- 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"),
--- a/client/yarn.lock Wed Dec 12 19:21:02 2018 +0100 +++ b/client/yarn.lock Thu Dec 13 09:15:41 2018 +0100 @@ -8008,6 +8008,11 @@ resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3" integrity sha1-/CidTtiZMRlGDBViUyYs3I3mW/M= +particles.js@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/particles.js/-/particles.js-2.0.0.tgz#21386c4328d6c7f96780a201e96eedfc09c736f6" + integrity sha1-IThsQyjWx/lngKIB6W7t/AnHNvY= + pascalcase@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"