client/src/App.vue

   1 <template lang="pug">
   2 #app
   3   Language
   4   Settings
   5   ContactForm
   6   UpsertUser
   7   .container
   8     .row
   9       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  10         // Menu (top of page):
  11         // Left: hall, variants, mygames, problems
  12         // Right: usermenu, settings, flag
  13         nav
  14           label.drawer-toggle(for="drawerControl")
  15           input#drawerControl.drawer(type="checkbox")
  16           #menuBar
  17             label.drawer-close(for="drawerControl")
  18             #leftMenu
  19               router-link(to="/")
  20                 | {{ st.tr["Hall"] }}
  21               router-link(to="/variants")
  22                 | {{ st.tr["Variants"] }}
  23               router-link(to="/mygames")
  24                 | {{ st.tr["My games"] }}
  25               router-link(to="/problems")
  26                 | {{ st.tr["Problems"] }}
  27             #rightMenu
  28               .clickable(onClick="doClick('modalUser')")
  29                 | {{ !st.user.id ? "Login" : "Update" }}
  30               .clickable(onClick="doClick('modalSettings')")
  31                 | {{ st.tr["Settings"] }}
  32               .clickable#flagContainer(onClick="doClick('modalLang')")
  33                 img(v-if="!!st.lang"
  34                   :src="require(`@/assets/images/flags/${st.lang}.svg`)")
  35     router-view
  36     .row
  37       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  38         footer
  39           a(href="https://github.com/yagu0/vchess") {{ st.tr["Source code"] }}
  40           p.clickable(onClick="doClick('modalContact')")
  41             | {{ st.tr["Contact form"] }}
  42   //my-game(:game-ref="gameRef" :mode="mode" :settings="settings" @game-over="archiveGame")
  43   //// TODO: add only the necessary icons to mini-css custom build
  44   //script(src="//unpkg.com/feather-icons")
  45 </template>
  46
  47 <script>
  48 // See https://stackoverflow.com/a/35417159
  49 import ContactForm from "@/components/ContactForm.vue";
  50 import Language from "@/components/Language.vue";
  51 import Settings from "@/components/Settings.vue";
  52 import UpsertUser from "@/components/UpsertUser.vue";
  53 import { store } from "./store.js";
  54 export default {
  55   components: {
  56     ContactForm,
  57     Language,
  58     Settings,
  59     UpsertUser,
  60   },
  61   data: function() {
  62     return {
  63       st: store.state,
  64     };
  65   },
  66 };
  67 </script>
  68
  69 <style lang="sass">
  70 #app
  71   font-family: "Avenir", Helvetica, Arial, sans-serif
  72   -webkit-font-smoothing: antialiased
  73   -moz-osx-font-smoothing: grayscale
  74
  75 .container
  76   @media screen and (max-width: 767px)
  77     padding: 0
  78
  79 .row > div
  80   padding: 0
  81
  82 .nopadding
  83   padding: 0
  84
  85 header
  86   width: 100%
  87   display: flex
  88   align-items: center
  89   justify-content: center
  90   margin: 0 auto
  91   & > img
  92     width: 30px
  93     height: 30px
  94
  95 .clickable
  96   cursor: pointer
  97
  98 nav
  99   width: 100%
 100   margin: 0
 101   padding: 0
 102   & > #menuBar
 103     width: 100%
 104     padding: 0
 105     & > #leftMenu
 106       padding: 0
 107       width: 50%
 108       display: inline-flex
 109       align-items: center
 110       justify-content: flex-start
 111       & > a
 112         display: inline-block
 113         color: #2c3e50
 114         &.router-link-exact-active
 115           color: #42b983
 116     & > #rightMenu
 117       padding: 0
 118       width: 50%
 119       display: inline-flex
 120       align-items: center
 121       justify-content: flex-end
 122       & > div
 123         display: inline-block
 124         &#flagContainer
 125           display: inline-flex
 126         & > img
 127           padding: 0
 128           width: 36px
 129           height: 27px
 130
 131 // TODO: drawer, until 600px wide OK (seemingly)
 132 // After, zone where left and right just go on top of another
 133 // Then, on narrow screen put everything on one line
 134 [type="checkbox"].drawer+*
 135   right: -767px
 136
 137 footer
 138   //background-color: #000033
 139   font-size: 1rem
 140   width: 100%
 141   display: inline-flex
 142   align-items: center
 143   justify-content: center
 144   & > a
 145     display: inline-block
 146     margin: 0 10px 0 0
 147     &:link
 148       color: #2c3e50
 149     &:hover
 150       text-decoration: none
 151   & > p
 152     display: inline-block
 153     margin: 0 0 0 10px
 154 </style>