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, forum (ext. link)
  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               // TODO: parametric URL, "forumURL"
  26               a(href="https://forum.vchess.club")
  27                 | {{ st.tr["Forum"] }}
  28             #rightMenu
  29               .clickable(onClick="doClick('modalUser')")
  30                 | {{ st.user.id > 0 ? "Update" : "Login" }}
  31               .clickable(onClick="doClick('modalSettings')")
  32                 | {{ st.tr["Settings"] }}
  33               .clickable#flagContainer(onClick="doClick('modalLang')")
  34                 img(v-if="!!st.lang" :src="flagImage")
  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           router-link.menuitem(to="/about") {{ st.tr["About"] }}
  40           p.clickable(onClick="doClick('modalContact')")
  41             | {{ st.tr["Contact"] }}
  42   // TODO: add only the necessary icons to mini-css custom build
  43   //script(src="//unpkg.com/feather-icons")
  44 </template>
  45
  46 <script>
  47 // See https://stackoverflow.com/a/35417159
  48 import ContactForm from "@/components/ContactForm.vue";
  49 import Language from "@/components/Language.vue";
  50 import Settings from "@/components/Settings.vue";
  51 import UpsertUser from "@/components/UpsertUser.vue";
  52 import { store } from "./store.js";
  53 export default {
  54   components: {
  55     ContactForm,
  56     Language,
  57     Settings,
  58     UpsertUser,
  59   },
  60   data: function() {
  61     return {
  62       st: store.state,
  63     };
  64   },
  65   computed: {
  66     flagImage: function() {
  67       return `/images/flags/${this.st.lang}.svg`;
  68     },
  69   },
  70 };
  71 </script>
  72
  73 <style lang="sass">
  74 #app
  75   font-family: "Avenir", Helvetica, Arial, sans-serif
  76   -webkit-font-smoothing: antialiased
  77   -moz-osx-font-smoothing: grayscale
  78
  79 .container
  80   @media screen and (max-width: 767px)
  81     padding: 0
  82
  83 .row > div
  84   padding: 0
  85
  86 .nopadding
  87   padding: 0
  88
  89 header
  90   width: 100%
  91   display: flex
  92   align-items: center
  93   justify-content: center
  94   margin: 0 auto
  95   & > img
  96     width: 30px
  97     height: 30px
  98
  99 .clickable
 100   cursor: pointer
 101
 102 nav
 103   width: 100%
 104   margin: 0
 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         &#flagContainer
 129           display: inline-flex
 130         & > img
 131           padding: 0
 132           width: 36px
 133           height: 27px
 134
 135 // TODO: drawer, until 600px wide OK (seemingly)
 136 // After, zone where left and right just go on top of another
 137 // Then, on narrow screen put everything on one line
 138 [type="checkbox"].drawer+*
 139   right: -767px
 140
 141 footer
 142   //background-color: #000033
 143   font-size: 1rem
 144   width: 100%
 145   padding-left: 0
 146   padding-right: 0
 147   display: inline-flex
 148   align-items: center
 149   justify-content: center
 150   & > .menuitem
 151     display: inline-block
 152     margin: 0 10px 0 0
 153     &:link
 154       color: #2c3e50
 155     &:hover
 156       text-decoration: none
 157   & > p
 158     display: inline-block
 159     margin: 0 0 0 10px
 160 </style>