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                     img(src="./assets/images/index/unicorn.svg")
  14                     .info-container
  15                         p vchess.club {{ $lang }}
  16                     img(src="./assets/images/index/wildebeest.svg")
  17     .row
  18       // Menu (top of page):
  19       // shared: Home + flags, userMenu
  20             // variant: hall, problems, rules, my games + settings
  21             nav
  22                 label.drawer-toggle(for="drawerControl")
  23                 input#drawerControl.drawer(type="checkbox")
  24                 #menuBar
  25                     label.drawer-close(for="drawerControl")
  26                     router-link(v-if="$route.path != '/'" to="/")
  27                         | Home
  28                     router-link(:href="getLink('/hall')")
  29                         | getLink function : suffix ==> /variant + suffix
  30                         =translations["Hall"]
  31                     router-link(href="#tabGames")
  32                         =translations["My games"]
  33                     router-link(href="#rules")
  34                         =translations["Rules"]
  35                     router-link(href="#problems")
  36                         =translations["Problems"]
  37                     #userMenu.clickable.right-menu(onClick="doClick('modalUser')")
  38                         .info-container
  39                             if !user.email
  40                                 p
  41                                     span Login
  42                                     span.icon-user
  43                             else
  44                                 p
  45                                     span Update
  46                                     span.icon-user
  47                     #flagMenu.clickable.right-menu(onClick="doClick('modalLang')")
  48                     img(src="/images/flags/" + lang + ".svg")
  49                 #settings.clickable(v-show="display!='index'" onClick="doClick('modalSettings')")
  50                     i(data-feather="settings")
  51     .row
  52             router-view
  53         .row
  54             footer
  55                 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
  56                     a(href="https://github.com/yagu0/vchess") Source code
  57                     p.clickable(onClick="doClick('modalContact')")
  58                         = translations["Contact form"]
  59 </template>
  60
  61 <script>
  62 // See https://stackoverflow.com/a/35417159
  63 import ContactForm from "@/components/ContactForm.vue";
  64 import Language from "@/components/Language.vue";
  65 import Settings from "@/components/Settings.vue";
  66 export default {
  67   data: function() {
  68     return {
  69       settings: {}, //TODO
  70     };
  71   },
  72   components: {
  73     ContactForm,
  74     Language,
  75     Settings,
  76   },
  77 };
  78 </script>
  79
  80 <style lang="sass">
  81 #app
  82   font-family: "Avenir", Helvetica, Arial, sans-serif
  83   -webkit-font-smoothing: antialiased
  84   -moz-osx-font-smoothing: grayscale
  85   text-align: center
  86   color: #2c3e50
  87
  88 #nav
  89   padding: 30px
  90   a
  91     font-weight: bold
  92     color: #2c3e50
  93     &.router-link-exact-active
  94       color: #42b983
  95 </style>