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       router-view
  52         .row
  53             footer
  54                 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
  55                     a(href="https://github.com/yagu0/vchess") Source code
  56                     p.clickable(onClick="doClick('modalContact')")
  57                         = translations["Contact form"]
  58 </template>
  59
  60 <script>
  61 // See https://stackoverflow.com/a/35417159
  62 import ContactForm from "@/components/ContactForm.vue";
  63 import Language from "@/components/Language.vue";
  64 import Settings from "@/components/Settings.vue";
  65 export default {
  66   data: function() {
  67     return {
  68       settings: {}, //TODO
  69     };
  70   },
  71   components: {
  72     ContactForm,
  73     Language,
  74     Settings,
  75   },
  76 };
  77 </script>
  78
  79 <style lang="sass">
  80 #app
  81   font-family: "Avenir", Helvetica, Arial, sans-serif
  82   -webkit-font-smoothing: antialiased
  83   -moz-osx-font-smoothing: grayscale
  84   text-align: center
  85   color: #2c3e50
  86
  87 #nav
  88   padding: 30px
  89   a
  90     font-weight: bold
  91     color: #2c3e50
  92     &.router-link-exact-active
  93       color: #42b983
  94 </style>