client/src/App.vue

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