Mercurial > gemma
view 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 source
<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"> <Sidebar :routeName="routeName"></Sidebar> <div class="d-flex flex-column ml-3" style="max-width: 600px"> <Search v-if="routeName == 'mainview'"></Search> <Contextbox v-if="routeName == 'mainview'"></Contextbox> </div> </div> <div class="ml-auto d-flex"> <div class="d-flex flex-column align-items-end"> <Profiles v-if="routeName == 'mainview'"></Profiles> <Pdftool v-if="routeName == 'mainview'"></Pdftool> </div> <div class="d-flex flex-column align-items-end"> <Identify v-if="routeName == 'mainview'"></Identify> <Layers v-if="routeName == 'mainview'"></Layers> </div> <Toolbar v-if="routeName == 'mainview'"></Toolbar> </div> </div> <div class="flex-fill"></div> <div class="d-flex flex-row align-items-end"> <Infobar v-if="routeName == 'mainview'"></Infobar> </div> <Zoom v-if="routeName == 'mainview'"></Zoom> </div> <div class="d-flex flex-column"><router-view /></div> <vue-snotify></vue-snotify> </div> </template> <style lang="scss" scoped> .userinterface { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 4; pointer-events: none; } .topbar { position: relative; z-index: 2; } #app { height: 100vh; width: 100vw; font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 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> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; import "particles.js"; export default { name: "app", computed: { ...mapState("user", ["isAuthenticated"]), ...mapState("application", ["contextBoxContent"]), routeName() { const routeName = this.$route.name; 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"), Pdftool: () => import("./Pdftool"), Zoom: () => import("./Zoom"), Identify: () => import("./Identify"), Layers: () => import("./layers/Layers"), Sidebar: () => import("./Sidebar"), Search: () => import("./Search"), Contextbox: () => import("./Contextbox"), Toolbar: () => import("./toolbar/Toolbar") } }; </script>