Recv/public/src/App.vue

<template>
  <div id="app">
    <div v-cloak>
      <div class="notificationContainer">
        <div class="notification" :class="{ error: notification != null && notification.error }" v-if="notification != null" @click.prevent="hideNotification">
          <span class="message">{{ notification.message }}</span>
        </div>
      </div>

      <div class="content">
        <div class="logo">
          <img src="/images/logo.png">
        </div>

        <router-view></router-view>
      </div>

      <div class="disclaimer">
        {{ $t('disclaimer') }}
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import shared from './shared';


if (typeof customMessages !== 'undefined')
{
  _.merge(messages, customMessages);

  if (customMessages.hasOwnProperty('allLocales'))
  {
    for (var key in messages)
    {
      if (key !== 'allLocales' && messages.hasOwnProperty(key))
        _.merge(messages[key], customMessages.allLocales);
    }
  }
}


export default {
  name: 'app',
  data () {
    return {
      notification: null
    }
  },

  created()
  {
    var self = this;
    document.title = self.$i18n.t('title');

    self.notificationTimer = null;

    shared.$on('showNotification', (message, error) =>
    {
      var self = this;
      self.notification = {
        message: message,
        error: error
      };

      if (self.notificationTimer != null)
        clearTimeout(self.notificationTimer);

      self.notificationTimer = setTimeout(() =>
      {
        self.notification = null;
        self.notificationTimer = null;
      }, 5000);
    });

    shared.$on('hideNotification', () =>
    {
      var self = this;
      self.notification = null;

      if (self.notificationTimer != null)
      {
        clearTimeout(self.notificationTimer);
        self.notificationTimer = null;
      }
    });
  }
}
</script>

<style lang="scss">
@import '../../node_modules/purecss/build/base.css';
@import '../../node_modules/purecss/build/buttons.css';
@import '../../node_modules/purecss/build/forms.css';
@import '../../node_modules/purecss/build/grids.css';

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('/fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}


body
{
  background-color: #f0f0f0;
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
}

#app
{
  margin-left: auto;
  margin-right: auto;
  max-width: 768px;
}

.content
{
  background-color: white;
  margin: 2rem;
  padding: 2rem;
  box-shadow: 0 0 15px #c0c0c0;
}


.notificationContainer
{
  position: fixed;
  top: 1.5rem;
  z-index: 666;
  width: 512px;
  left: 50%;
}


.notification
{
  background: #d5e8f6;
  border: solid 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px #c0c0c0;
  color: black;
  cursor: pointer;
  padding: .5em;
  margin-bottom: 2rem;

  position: relative;
  left: -50%;
}

.notification .message
{
  white-space: pre;
}

.notification.error
{
  background: #973a38;
}


.logo
{
  margin-bottom: 2rem;
  text-align: center;
}

.disclaimer
{
  font-size: 8pt;
  text-align: center;
}
</style>