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