client/src/App.vue

   1 <template lang="pug">
   2 #app
   3   // modal "welcome" will be filled in the selected language
   4   #modalWelcome
   5   Language
   6   Settings(:settings="settings")
   7   ContactForm
   8   .container
   9     .row(v-show="$route.path == '/'")
  10       // Header (on index only)
  11       header
  12         .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  13           header
  14             img(src="./assets/images/index/unicorn.svg")
  15             .info-container
  16               p vchess.club {{ $lang }}
  17             img(src="./assets/images/index/wildebeest.svg")
  18     .row
  19       // Menu (top of page): TODO how to organize it ?
  20       nav
  21         router-link(to="/") Home
  22         | &nbsp;|&nbsp;
  23         router-link(to="/about") About
  24         | &nbsp;|&nbsp;
  25         router-link(to="/test") Test
  26       router-view
  27 </template>
  28
  29 <script>
  30 // See https://stackoverflow.com/a/35417159
  31 import ContactForm from "@/components/ContactForm.vue";
  32 import Language from "@/components/Language.vue";
  33 import Settings from "@/components/Settings.vue";
  34 export default {
  35   data: function() {
  36     return {
  37       settings: {}, //TODO
  38     };
  39   },
  40   components: {
  41     ContactForm,
  42     Language,
  43     Settings,
  44   },
  45 };
  46 </script>
  47
  48 <style lang="sass">
  49 #app
  50   font-family: "Avenir", Helvetica, Arial, sans-serif
  51   -webkit-font-smoothing: antialiased
  52   -moz-osx-font-smoothing: grayscale
  53   text-align: center
  54   color: #2c3e50
  55
  56 #nav
  57   padding: 30px
  58   a
  59     font-weight: bold
  60     color: #2c3e50
  61     &.router-link-exact-active
  62       color: #42b983
  63 </style>