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