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"