client/src/App.vue

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