App.vue

<template>
  <div>
    <transition name="fadeDownUp">
      <div
        v-if="messages && messages.length > 0"
        class="row over-content"
      >
        <div class="fourteen wide column">
          <div
            v-for="(message, index) in messages"
            :key="'message-' + index"
            :class="['ui', message.level ? message.level : 'info', 'message']"
          >
            <i
              class="close icon"
              aria-hidden="true"
              @click="DISCARD_MESSAGE(message)"
            />
            <div class="header">
              <i
                class="info circle icon"
                aria-hidden="true"
              />
              Informations
            </div>
            <ul class="list">
              {{
                message.comment
              }}
            </ul>
          </div>
        </div>
      </div>
    </transition>

    <AppHeader />

    <div id="content">
      <div
        :class="{ active: loader.isLoading }"
        class="ui inverted dimmer"
      >
        <div class="ui text loader">
          {{ loader.message }}
        </div>
      </div>

      <!-- //* Les views sont injectées ici -->
      <router-view class="page-content" />
    </div>

    <AppFooter />
  </div>
</template>

<script
  type="application/javascript"
  :src="
    baseUrl +
      'resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'
  "
/>

<script>
import { mapMutations, mapState } from 'vuex';

import AppHeader from '@/components/AppHeader';
import AppFooter from '@/components/AppFooter';

export default {
  name: 'App',

  components: {
    AppHeader,
    AppFooter,
  },

  data() {
    return {
      menuIsOpen: false,
      rightMenuIsOpen: true,
      baseUrl: this.$store.state.configuration.BASE_URL,
      width: window.innerWidth > 0 ? window.innerWidth : screen.width,
    };
  },

  computed: {
    ...mapState([
      'user',
      'USER_LEVEL_PROJECTS',
      'configuration',
      'messages',
      'loader',
    ]),
    ...mapState('projects', [
      'projects',
      'project',
    ])
  },

  methods: {
    ...mapMutations(['DISCARD_MESSAGE']),
  },
};
</script>

<style>
@import "./assets/styles/base.css";
@import "./assets/resources/semantic-ui-2.4.2/semantic.min.css";

.vertical {
  flex-direction: column;
  justify-content: center;
}

.leaflet-container {
  background: white !important;
}

.flex {
  display: flex;
}

/* keep above loader */
#menu-dropdown {
  z-index: 1001;
}

@media screen and (max-width: 985px) {
  .abstract{
    display: none !important;
  }
}

@media screen and (min-width: 560px) {
  .mobile {
    display: none !important;
  }
  #app-header {
    min-width: 560px;
  }
  .menu.container {
    width: auto !important;
  }
  .push-right-desktop {
    margin-left: auto;
  }
}

@media screen and (max-width: 590px) {
  .desktop {
    display: none !important;
  }
  div.dropdown-list {
    width: 100vw;
    left: -70px !important; /* should be the same than belows */
  }
  .menu.container a.header {
    width: 70px;
  }
  .menu.container a.header > img {
    margin: 0;
  }
  #menu-dropdown {
    width: calc(100vw - 70px);
    justify-content: space-between;
  }
  #menu-dropdown > span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

.row.over-content {
  position: absolute; /* to display message info over page content */
  z-index: 99;
  opacity: 0.95;
  width: calc(100% - 4em); /* 4em is #content left + right paddings */
  top: calc(61px + 1em); /* 61p. is #app-header height defined in base.css */
  right: 2em; /* 2em is #content left paddings */
}

.fadeDownUp-enter-active {
  animation: fadeInDown .5s;
}
.fadeDownUp-leave-active {
  animation: fadeOutUp .5s;
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.ui.message > .close.icon {
  cursor: pointer;
  position: absolute;
  margin: 0em;
  top: 0.78575em;
  right: 0.5em;
  opacity: 0.7;
  -webkit-transition: opacity 0.1s ease;
  transition: opacity 0.1s ease;
}

</style>