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       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  12         // Header (on index only)
  13         header
  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       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  20         // Menu (top of page):
  21         // Left: home, variants, mygames, problems
  22         // Right: usermenu, settings, flag
  23         nav
  24           label.drawer-toggle(for="drawerControl")
  25           input#drawerControl.drawer(type="checkbox")
  26           #menuBar
  27             label.drawer-close(for="drawerControl")
  28             #leftMenu
  29               router-link(to="/")
  30                 | {{ st.tr["Home"] }}
  31               router-link(to="/variants")
  32                 | {{ st.tr["Variants"] }}
  33               router-link(to="/mygames")
  34                 | {{ st.tr["My games"] }}
  35               router-link(to="/problems")
  36                 | {{ st.tr["Problems"] }}
  37             #rightMenu
  38               .clickable(onClick="doClick('modalUser')")
  39                 | {{ !st.user.id ? "Login" : "Update" }}
  40               .clickable(onClick="doClick('modalSettings')")
  41                 | {{ st.tr["Settings"] }}
  42               .clickable(onClick="doClick('modalLang')")
  43                 img(v-if="!!st.lang"
  44                   :src="require(`@/assets/images/flags/${st.lang}.svg`)")
  45     .row
  46       router-view
  47     .row
  48       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  49         footer
  50           a(href="https://github.com/yagu0/vchess") {{ st.tr["Source code"] }}
  51           p.clickable(onClick="doClick('modalContact')")
  52             | {{ st.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 import UpsertUser from "@/components/UpsertUser.vue";
  64 import { store } from "./store.js";
  65 export default {
  66   components: {
  67     ContactForm,
  68     Language,
  69     Settings,
  70     UpsertUser,
  71   },
  72   data: function() {
  73     return {
  74       st: store.state,
  75     };
  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
  86 .container
  87   @media screen and (max-width: 767px)
  88     padding: 0
  89
  90 header
  91   width: 100%
  92   display: flex
  93   align-items: center
  94   justify-content: center
  95   margin: 0 auto
  96   & > img
  97     width: 30px
  98     height: 30px
  99
 100 .clickable
 101   cursor: pointer
 102
 103 nav
 104   width: 100%
 105   padding: 0
 106   & > #menuBar
 107     width: 100%
 108     padding: 0
 109     & > #leftMenu
 110       padding: 0
 111       width: 50%
 112       display: inline-flex
 113       align-items: center
 114       justify-content: flex-start
 115       & > a
 116         display: inline-block
 117         color: #2c3e50
 118         &.router-link-exact-active
 119           color: #42b983
 120     & > #rightMenu
 121       padding: 0
 122       width: 50%
 123       display: inline-flex
 124       align-items: center
 125       justify-content: flex-end
 126       & > div
 127         display: inline-block
 128         & > img
 129           padding: 0
 130           width: 30px
 131           height: 30px
 132
 133 // TODO: drawer, until 600px wide OK (seemingly)
 134 // After, zone where left and right just go on top of another
 135 // Then, on narrow screen put everything on one line
 136 [type="checkbox"].drawer+*
 137   right: -767px
 138
 139 footer
 140   //background-color: #000033
 141   font-size: 1rem
 142   width: 100%
 143   display: inline-flex
 144   align-items: center
 145   justify-content: center
 146   & > a
 147     display: inline-block
 148     margin: 0 10px 0 0
 149     &:link
 150       color: #2c3e50
 151     &:hover
 152       text-decoration: none
 153   & > p
 154     display: inline-block
 155     margin: 0 0 0 10px
 156 </style>