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#flagContainer(onClick="doClick('modalLang')")
  43                 img(v-if="!!st.lang"
  44                   :src="require(`@/assets/images/flags/${st.lang}.svg`)")
  45     router-view
  46     .row
  47       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  48         footer
  49           a(href="https://github.com/yagu0/vchess") {{ st.tr["Source code"] }}
  50           p.clickable(onClick="doClick('modalContact')")
  51             | {{ st.tr["Contact form"] }}
  52   //my-game(:game-ref="gameRef" :mode="mode" :settings="settings" @game-over="archiveGame")
  53   //// TODO: add only the necessary icons to mini-css custom build
  54   //script(src="//unpkg.com/feather-icons")
  55 </template>
  56
  57 <script>
  58 // See https://stackoverflow.com/a/35417159
  59 import ContactForm from "@/components/ContactForm.vue";
  60 import Language from "@/components/Language.vue";
  61 import Settings from "@/components/Settings.vue";
  62 import UpsertUser from "@/components/UpsertUser.vue";
  63 import { store } from "./store.js";
  64 export default {
  65   components: {
  66     ContactForm,
  67     Language,
  68     Settings,
  69     UpsertUser,
  70   },
  71   data: function() {
  72     return {
  73       st: store.state,
  74     };
  75   },
  76 };
  77 </script>
  78
  79 <style lang="sass">
  80 #app
  81   font-family: "Avenir", Helvetica, Arial, sans-serif
  82   -webkit-font-smoothing: antialiased
  83   -moz-osx-font-smoothing: grayscale
  84
  85 .container
  86   @media screen and (max-width: 767px)
  87     padding: 0
  88
  89 .row > div
  90   padding: 0
  91
  92 .nopadding
  93   padding: 0
  94
  95 #modalWelcome
  96   max-width: 767px
  97   @media screen and (max-width: 767px)
  98     max-width: 100vw
  99   img
 100     width: 75%
 101     @media screen and (max-width: 767px)
 102       width: 100%
 103       max-width: 552px
 104   ul
 105     list-style-type: none
 106   // TODO: bad practice, shouldn't use table to align things...
 107   table.list-table
 108     width: 300px
 109     margin: 0 auto
 110     border: 0
 111     tbody
 112       border: 0
 113       tr
 114         border: 0
 115         margin: 0
 116         padding: 0
 117         td
 118           padding: 0
 119           text-align: left
 120           border: 0
 121
 122 header
 123   width: 100%
 124   display: flex
 125   align-items: center
 126   justify-content: center
 127   margin: 0 auto
 128   & > img
 129     width: 30px
 130     height: 30px
 131
 132 .clickable
 133   cursor: pointer
 134
 135 nav
 136   width: 100%
 137   margin: 0
 138   padding: 0
 139   & > #menuBar
 140     width: 100%
 141     padding: 0
 142     & > #leftMenu
 143       padding: 0
 144       width: 50%
 145       display: inline-flex
 146       align-items: center
 147       justify-content: flex-start
 148       & > a
 149         display: inline-block
 150         color: #2c3e50
 151         &.router-link-exact-active
 152           color: #42b983
 153     & > #rightMenu
 154       padding: 0
 155       width: 50%
 156       display: inline-flex
 157       align-items: center
 158       justify-content: flex-end
 159       & > div
 160         display: inline-block
 161         &#flagContainer
 162           display: inline-flex
 163         & > img
 164           padding: 0
 165           width: 36px
 166           height: 27px
 167
 168 // TODO: drawer, until 600px wide OK (seemingly)
 169 // After, zone where left and right just go on top of another
 170 // Then, on narrow screen put everything on one line
 171 [type="checkbox"].drawer+*
 172   right: -767px
 173
 174 footer
 175   //background-color: #000033
 176   font-size: 1rem
 177   width: 100%
 178   display: inline-flex
 179   align-items: center
 180   justify-content: center
 181   & > a
 182     display: inline-block
 183     margin: 0 10px 0 0
 184     &:link
 185       color: #2c3e50
 186     &:hover
 187       text-decoration: none
 188   & > p
 189     display: inline-block
 190     margin: 0 0 0 10px
 191 </style>