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, problems, mygames
  12         // Right: usermenu, settings, flag
  13         nav
  14           label.drawer-toggle(for="drawerControl")
  15           input#drawerControl.drawer(type="checkbox")
  16           #menuBar(@click="hideDrawer($event)")
  17             label.drawer-close(for="drawerControl")
  18             #leftMenu
  19               router-link(to="/")
  20                 | {{ st.tr["Hall"] }}
  21               router-link(to="/mygames")
  22                 | {{ st.tr["My games"] }}
  23               router-link(to="/variants")
  24                 | {{ st.tr["Variants"] }}
  25               router-link(to="/problems")
  26                 | {{ st.tr["Problems"] }}
  27             #rightMenu
  28               .clickable(onClick="window.doClick('modalUser')")
  29                 | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }}
  30               .clickable(onClick="window.doClick('modalSettings')")
  31                 | {{ st.tr["Settings"] }}
  32               .clickable#flagContainer(onClick="window.doClick('modalLang')")
  33                 img(
  34                   v-if="!!st.lang"
  35                   :src="flagImage"
  36                 )
  37     router-view
  38   .row
  39     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  40       footer
  41         router-link.menuitem(to="/about") {{ st.tr["About"] }}
  42         router-link.menuitem(to="/news") {{ st.tr["News"] }}
  43         p.clickable(onClick="window.doClick('modalContact')")
  44           | {{ st.tr["Contact"] }}
  45 </template>
  46
  47 <script>
  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 import { processModalClick } from "./utils/modalClick.js";
  54 export default {
  55   components: {
  56     ContactForm,
  57     Language,
  58     Settings,
  59     UpsertUser
  60   },
  61   data: function() {
  62     return {
  63       st: store.state
  64     };
  65   },
  66   computed: {
  67     flagImage: function() {
  68       return `/images/flags/${this.st.lang}.svg`;
  69     }
  70   },
  71   mounted: function() {
  72     let dialogs = document.querySelectorAll("div[role='dialog']");
  73     dialogs.forEach(d => {
  74       d.addEventListener("click", processModalClick);
  75     });
  76   },
  77   methods: {
  78     hideDrawer: function(e) {
  79       if (e.target.innerText == "Forum") return; //external link
  80       e.preventDefault(); //TODO: why is this needed?
  81       document.getElementsByClassName("drawer")[0].checked = false;
  82     }
  83   }
  84 };
  85 </script>
  86
  87 <style lang="sass">
  88 html, *
  89   font-family: "Open Sans", Arial, sans-serif
  90   --a-link-color: black
  91   --a-visited-color: black
  92
  93 body
  94   padding: 0
  95   min-width: 320px
  96   --fore-color: #1c1e10 //#2c3e50
  97   //--back-color: #f2f2f2
  98   background-image: radial-gradient(white, #e6e6ff) //lavender)
  99
 100 #app
 101   -webkit-font-smoothing: antialiased
 102   -moz-osx-font-smoothing: grayscale
 103
 104 .container
 105   // 45px is footer height
 106   min-height: calc(100vh - 45px)
 107   overflow: hidden
 108   padding: 0
 109   margin: 0
 110
 111 .row > div
 112   padding: 0
 113
 114 header
 115   width: 100%
 116   display: flex
 117   align-items: center
 118   justify-content: center
 119   margin: 0 auto
 120
 121 .clickable
 122   cursor: pointer
 123
 124 .text-center
 125   text-align: center
 126
 127 .clearer
 128   clear: both
 129
 130 .button-group
 131   margin: 0
 132
 133 input[type="checkbox"]:focus
 134   outline: 0
 135
 136 input[type=checkbox]:checked:before
 137   top: -5px;
 138   height: 18px
 139
 140 table
 141   display: block
 142   padding: 0
 143   tr > td
 144     cursor: pointer
 145   th, td
 146     padding: 5px
 147
 148 @media screen and (max-width: 767px)
 149   table
 150     tr > th, td
 151       font-size: 14px
 152
 153 nav
 154   width: 100%
 155   margin: 0
 156   padding: 0
 157   & > #menuBar
 158     width: 100%
 159     padding: 0
 160     @media screen and (min-width: 768px)
 161       & > #leftMenu
 162         padding: 0
 163         width: 50%
 164         display: inline-flex
 165         align-items: center
 166         justify-content: flex-start
 167         & > a
 168           display: inline-block
 169           color: #2c3e50
 170           &.router-link-exact-active
 171             color: #42b983
 172       & > #rightMenu
 173         padding: 0
 174         width: 50%
 175         display: inline-flex
 176         align-items: center
 177         justify-content: flex-end
 178         & > div
 179           display: inline-block
 180           &#flagContainer
 181             display: inline-flex
 182           & > img
 183             padding: 0
 184             width: 36px
 185             height: 27px
 186     @media screen and (max-width: 767px)
 187       & > #leftMenu
 188         margin-top: 42px
 189         padding-bottom: 5px
 190         & > a
 191           color: #2c3e50
 192           &.router-link-exact-active
 193             color: #42b983
 194       & > #rightMenu
 195         padding-top: 5px
 196         border-top: 1px solid darkgrey
 197         & > div
 198           &#flagContainer
 199             display: inline-flex
 200           & > img
 201             padding: 0
 202             width: 36px
 203             height: 27px
 204
 205 @media screen and (max-width: 767px)
 206   nav
 207     height: 42px
 208     border: none
 209     & > label.drawer-toggle
 210       cursor: pointer
 211       font-size: 32px
 212       position: absolute
 213       top: -22px
 214       //padding: -5px 0 0 10px
 215     & > #menuBar
 216       z-index: 5000 //to hide currently selected piece if any
 217
 218 [type="checkbox"].drawer+*
 219   right: -767px
 220
 221 [type=checkbox].drawer+* .drawer-close
 222   top: -10px
 223   left: var(--universal-margin)
 224   right: 0
 225
 226 [type=checkbox].drawer+* .drawer-close:before
 227   font-size: 50px
 228
 229 @media screen and (max-width: 767px)
 230   .button-group
 231     flex-direction: row
 232     button:not(:first-child)
 233       border-left: 1px solid var(--button-group-border-color)
 234       border-top: 0
 235
 236 footer
 237   height: 45px
 238   border: 1px solid #ddd
 239   box-sizing: border-box
 240   //background-color: #000033
 241   font-size: 1rem
 242   width: 100%
 243   padding: 0
 244   display: inline-flex
 245   align-items: center
 246   justify-content: center
 247   & > .router-link-exact-active
 248     color: #42b983 !important
 249     text-decoration: none
 250   & > .menuitem
 251     display: inline-block
 252     margin: 0 12px
 253     &:link
 254       color: #2c3e50
 255     &:visited, &:hover
 256       color: #2c3e50
 257       text-decoration: none
 258   & > p
 259     display: inline-block
 260     margin: 0 12px
 261
 262 @media screen and (max-width: 767px)
 263   footer
 264     border: none
 265
 266 // Styles for diagrams and board (partial).
 267 // TODO: where to put that ?
 268
 269 .light-square-diag
 270   background-color: #e5e5ca
 271
 272 .dark-square-diag
 273   background-color: #6f8f57
 274
 275 div.board
 276   float: left
 277   height: 0
 278   display: inline-block
 279   position: relative
 280
 281 div.board8
 282   width: 12.5%
 283   padding-bottom: 12.5%
 284
 285 div.board10
 286   width: 10%
 287   padding-bottom: 10%
 288
 289 div.board11
 290   width: 9.09%
 291   padding-bottom: 9.1%
 292
 293 img.piece
 294   width: 100%
 295
 296 img.piece, img.mark-square
 297   max-width: 100%
 298   height: auto
 299   display: block
 300
 301 img.mark-square
 302   opacity: 0.6
 303   width: 76%
 304   position: absolute
 305   top: 12%
 306   left: 12%
 307   opacity: .7
 308
 309 .in-shadow
 310   filter: brightness(50%)
 311 </style>