Mercurial > gemma
view client/src/components/Splitscreen.vue @ 2551:298087ae22b3
client: splitscreen: fixed z-index and animation bug
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 08 Mar 2019 09:23:56 +0100 |
parents | 9bf6b767a56a |
children | cea572694617 |
line wrap: on
line source
<template> <div :class="[ 'splitscreen bg-white d-flex flex-column ui-element', { show: showSplitscreen } ]" > <UIBoxHeader :icon="config.icon" :title="config.title" :closeCallback="close" :collapseCallback="collapse" /> <div class="d-flex flex-fill"> <transition name="fade"> <div class="loading d-flex justify-content-center align-items-center" v-if="splitscreenLoading" > <font-awesome-icon icon="spinner" spin /> </div> </transition> <component :is="config.component" /> </div> </div> </template> <style lang="sass" scoped> .splitscreen position: absolute bottom: -50vh left: 0 right: 0 height: 50vh overflow: hidden z-index: 1 transition: bottom 0.3s &.show bottom: 0 .loading background: rgba(255, 255, 255, 0.96) position: absolute z-index: 99 top: 34px right: 0 bottom: 0 left: 0 </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): * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; export default { components: { Fairwayprofile: () => import("@/components/fairway/Fairwayprofile") }, computed: { ...mapState("application", [ "splitscreen", "showSplitscreen", "splitscreenLoading" ]), config() { return this.splitscreen || { title: "", icon: "", component: "" }; } }, methods: { collapse() { this.$store.commit("application/showSplitscreen", false); if (this.config.collapseCallback) this.config.collapseCallback(); }, close() { this.$store.commit("application/showSplitscreen", false); if (this.config.closeCallback) this.config.closeCallback(); } } }; </script>