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
  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(to="/")
  27             // select options all variants + filter possible (as in problems)
  28             | Home
  29           router-link(to="/myGames")
  30             | {{ $tr["My games"] }}
  31           router-link(to="/rules")
  32             // Boxes OK for rules/Atomic/ ...etc
  33             | {{ $tr["Rules"] }}
  34           router-link(to="/problems")
  35             | {{ $tr["Problems"] }}
  36           #userMenu.clickable.right-menu(onClick="doClick('modalUser')")
  37             .info-container
  38               p
  39                 span {{ !$user.email ? "Login" : "Update" }}
  40                 span.icon-user
  41           #flagMenu.clickable.right-menu(onClick="doClick('modalLang')")
  42           img(src="/images/flags/" + lang + ".svg")
  43         #settings.clickable(onClick="doClick('modalSettings')")
  44           i(data-feather="settings")
  45     .row
  46       router-view
  47     .row
  48       footer
  49         .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
  50           a(href="https://github.com/yagu0/vchess") Source code
  51           p.clickable(onClick="doClick('modalContact')")
  52             | {{ $tr["Contact form"] }}
  53   //my-game(:game-ref="gameRef" :mode="mode" :settings="settings" @game-over="archiveGame")
  54   //// TODO: add only the necessary icons to mini-css custom build
  55   //script(src="//unpkg.com/feather-icons")
  56 </template>
  57
  58 <script>
  59 // See https://stackoverflow.com/a/35417159
  60 import ContactForm from "@/components/ContactForm.vue";
  61 import Language from "@/components/Language.vue";
  62 import Settings from "@/components/Settings.vue";
  63 export default {
  64   data: function() {
  65     return {
  66       settings: {}, //TODO
  67     };
  68   },
  69   components: {
  70     ContactForm,
  71     Language,
  72     Settings,
  73   },
  74 };
  75 </script>
  76
  77 <style lang="sass">
  78 #app
  79   font-family: "Avenir", Helvetica, Arial, sans-serif
  80   -webkit-font-smoothing: antialiased
  81   -moz-osx-font-smoothing: grayscale
  82   text-align: center
  83   color: #2c3e50
  84
  85 #nav
  86   padding: 30px
  87   a
  88     font-weight: bold
  89     color: #2c3e50
  90     &.router-link-exact-active
  91       color: #42b983
  92 </style>