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
   7   ContactForm
   8   UpsertUser
   9   .container
  10     .row(v-show="$route.path == '/'")
  11       // Header (on index only ?!)
  12       header
  13         .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  14           img(src="./assets/images/index/unicorn.svg")
  15           .info-container
  16             p vchess.club
  17           img(src="./assets/images/index/wildebeest.svg")
  18     .row
  19       // Menu (top of page):
  20       // shared: Home + flags, userMenu
  21       // variant: hall, problems, rules, my games + settings
  22       nav
  23         label.drawer-toggle(for="drawerControl")
  24         input#drawerControl.drawer(type="checkbox")
  25         #menuBar
  26           label.drawer-close(for="drawerControl")
  27           router-link(to="/")
  28             // select options all variants + filter possible (as in problems)
  29             | Home
  30           router-link(to="/myGames")
  31             | {{ st.tr["My games"] }}
  32           router-link(to="/rules")
  33             // Boxes OK for rules/Atomic/ ...etc
  34             | {{ st.tr["Rules"] }}
  35           router-link(to="/problems")
  36             | {{ st.tr["Problems"] }}
  37           #userMenu.clickable.right-menu(onClick="doClick('modalUser')")
  38             .info-container
  39               p
  40                 span {{ !st.user.id ? "Login" : "Update" }}
  41                 span.icon-user
  42           #flagMenu.clickable.right-menu(onClick="doClick('modalLang')")
  43           img(src="/images/flags/" + lang + ".svg")
  44         #settings.clickable(onClick="doClick('modalSettings')")
  45           | Settings
  46           i(data-feather="settings")
  47     .row
  48       router-view
  49     .row
  50       footer
  51         .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
  52           a(href="https://github.com/yagu0/vchess") Source code
  53           p.clickable(onClick="doClick('modalContact')")
  54             | {{ st.tr["Contact form"] }}
  55   //my-game(:game-ref="gameRef" :mode="mode" :settings="settings" @game-over="archiveGame")
  56   //// TODO: add only the necessary icons to mini-css custom build
  57   //script(src="//unpkg.com/feather-icons")
  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 import UpsertUser from "@/components/UpsertUser.vue";
  66 import { store } from "./store.js";
  67 export default {
  68   components: {
  69     ContactForm,
  70     Language,
  71     Settings,
  72     UpsertUser,
  73   },
  74   data: function() {
  75     return {
  76       st: store.state,
  77     };
  78   },
  79 };
  80 </script>
  81
  82 <style lang="sass">
  83 #app
  84   font-family: "Avenir", Helvetica, Arial, sans-serif
  85   -webkit-font-smoothing: antialiased
  86   -moz-osx-font-smoothing: grayscale
  87   text-align: center
  88   color: #2c3e50
  89
  90 #nav
  91   padding: 30px
  92   a
  93     font-weight: bold
  94     color: #2c3e50
  95     &.router-link-exact-active
  96       color: #42b983
  97 </style>