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(@click="hideDrawer")
  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               a(href="https://forum.vchess.club")
  26                 | {{ st.tr["Forum"] }}
  27             #rightMenu
  28               .clickable(onClick="doClick('modalUser')")
  29                 | {{ st.user.id > 0 ? "Update" : "Login" }}
  30               .clickable(onClick="doClick('modalSettings')")
  31                 | {{ st.tr["Settings"] }}
  32               .clickable#flagContainer(onClick="doClick('modalLang')")
  33                 img(v-if="!!st.lang" :src="flagImage")
  34     router-view
  35     .row
  36       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  37         footer
  38           router-link.menuitem(to="/about") {{ st.tr["About"] }}
  39           p.clickable(onClick="doClick('modalContact')")
  40             | {{ st.tr["Contact"] }}
  41   // TODO: add only the necessary icons to mini-css custom build
  42   //script(src="//unpkg.com/feather-icons")
  43 </template>
  44
  45 <script>
  46 // See https://stackoverflow.com/a/35417159
  47 import ContactForm from "@/components/ContactForm.vue";
  48 import Language from "@/components/Language.vue";
  49 import Settings from "@/components/Settings.vue";
  50 import UpsertUser from "@/components/UpsertUser.vue";
  51 import { store } from "./store.js";
  52 export default {
  53   components: {
  54     ContactForm,
  55     Language,
  56     Settings,
  57     UpsertUser,
  58   },
  59   data: function() {
  60     return {
  61       st: store.state,
  62     };
  63   },
  64   computed: {
  65     flagImage: function() {
  66       return `/images/flags/${this.st.lang}.svg`;
  67     },
  68   },
  69   methods: {
  70     hideDrawer: function(e) {
  71       if (e.target.innerText == "Forum")
  72         return; //external link
  73       e.preventDefault(); //TODO: why is this needed?
  74       document.getElementsByClassName("drawer")[0].checked = false;
  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 .row > div
  91   padding: 0
  92
  93 .nopadding
  94   padding: 0
  95
  96 header
  97   width: 100%
  98   display: flex
  99   align-items: center
 100   justify-content: center
 101   margin: 0 auto
 102   & > img
 103     width: 30px
 104     height: 30px
 105
 106 .clickable
 107   cursor: pointer
 108
 109 nav
 110   width: 100%
 111   margin: 0
 112   padding: 0
 113   & > #menuBar
 114     width: 100%
 115     padding: 0
 116     & > #leftMenu
 117       padding: 0
 118       width: 50%
 119       display: inline-flex
 120       align-items: center
 121       justify-content: flex-start
 122       & > a
 123         display: inline-block
 124         color: #2c3e50
 125         &.router-link-exact-active
 126           color: #42b983
 127     & > #rightMenu
 128       padding: 0
 129       width: 50%
 130       display: inline-flex
 131       align-items: center
 132       justify-content: flex-end
 133       & > div
 134         display: inline-block
 135         &#flagContainer
 136           display: inline-flex
 137         & > img
 138           padding: 0
 139           width: 36px
 140           height: 27px
 141
 142 [type="checkbox"].drawer+*
 143   right: -767px
 144
 145 #menuBar
 146   label.drawer-close
 147     top: 50px
 148
 149 footer
 150   //background-color: #000033
 151   font-size: 1rem
 152   width: 100%
 153   padding-left: 0
 154   padding-right: 0
 155   display: inline-flex
 156   align-items: center
 157   justify-content: center
 158   & > .menuitem
 159     display: inline-block
 160     margin: 0 10px 0 0
 161     &:link
 162       color: #2c3e50
 163     &:hover
 164       text-decoration: none
 165   & > p
 166     display: inline-block
 167     margin: 0 0 0 10px
 168 </style>