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 a
 120   text-decoration: underline
 121
 122 header
 123   width: 100%
 124   display: flex
 125   align-items: center
 126   justify-content: center
 127   margin: 0 auto
 128
 129 .clickable
 130   cursor: pointer
 131
 132 .text-center
 133   text-align: center
 134
 135 .bold
 136   font-weight: bold
 137
 138 .clearer
 139   clear: both
 140
 141 .button-group
 142   margin: 0
 143
 144 input[type="checkbox"]:focus
 145   outline: 0
 146
 147 input[type=checkbox]:checked:before
 148   top: -5px;
 149   height: 18px
 150
 151 table
 152   display: block
 153   padding: 0
 154   tr > td
 155     cursor: pointer
 156   th, td
 157     padding: 5px
 158
 159 #divSettings
 160   padding: 0 10px 0 0
 161   height: 100%
 162   & > span
 163     padding-right: 5px
 164     vertical-align: middle
 165   & > img
 166     padding: 0
 167     height: 1.2em
 168     vertical-align: middle
 169
 170 @media screen and (max-width: 767px)
 171   table
 172     tr > th, td
 173       font-size: 14px
 174
 175 nav
 176   width: 100%
 177   margin: 0
 178   padding: 0
 179   & > #menuBar
 180     width: 100%
 181     padding: 0
 182     @media screen and (min-width: 768px)
 183       & > #leftMenu
 184         padding: 0
 185         width: 50%
 186         display: inline-flex
 187         align-items: center
 188         justify-content: flex-start
 189         & > a
 190           display: inline-block
 191           text-decoration: none
 192           color: #2c3e50
 193           &.router-link-exact-active
 194             color: #42b983
 195       & > #rightMenu
 196         padding: 0
 197         width: 50%
 198         display: inline-flex
 199         align-items: center
 200         justify-content: flex-end
 201         & > div
 202           display: inline-block
 203     @media screen and (max-width: 767px)
 204       & > #leftMenu
 205         margin-top: 42px
 206         padding-bottom: 5px
 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       text-decoration: none
 270     &:visited, &:hover
 271       color: #2c3e50
 272       text-decoration: none
 273     & > img
 274       height: 1.2em
 275       display: inline-block
 276       margin-left: 5px
 277   & > p
 278     display: inline-block
 279     margin: 0 12px
 280
 281 @media screen and (max-width: 767px)
 282   footer
 283     border: none
 284
 285 @media screen and (max-width: 420px)
 286   .container
 287     min-height: calc(100vh - 55px)
 288   footer
 289     height: 55px
 290     display: block
 291     padding: 5px 0
 292
 293 .menuitem.somenews
 294   color: red
 295   &:link, &:visited, &:hover
 296     color: red
 297
 298 // Styles for diagrams and board (partial).
 299 // TODO: where to put that ?
 300
 301 .light-square-diag
 302   background-color: #e5e5ca
 303
 304 .dark-square-diag
 305   background-color: #6f8f57
 306
 307 div.board
 308   user-select: none
 309   float: left
 310   height: 0
 311   display: inline-block
 312   position: relative
 313
 314 div.board5
 315   width: 20%
 316   padding-bottom: 20%
 317
 318 div.board8
 319   width: 12.5%
 320   padding-bottom: 12.5%
 321
 322 div.board9
 323   width: 11.1%
 324   padding-bottom: 11.1%
 325
 326 div.board10
 327   width: 10%
 328   padding-bottom: 10%
 329
 330 div.board11
 331   width: 9.09%
 332   padding-bottom: 9.09%
 333
 334 div.board12
 335   width: 8.33%
 336   padding-bottom: 8.33%
 337
 338 img.piece
 339   width: 100%
 340
 341 img.piece, img.mark-square, img.circle-square
 342   max-width: 100%
 343   height: auto
 344   display: block
 345
 346 img.mark-square
 347   opacity: .7
 348   width: 76%
 349   position: absolute
 350   top: 12%
 351   left: 12%
 352
 353 img.circle-square
 354   opacity: 0.7
 355   width: 100%
 356   position: absolute
 357   top: 0
 358   left: 0
 359
 360 .in-shadow
 361   filter: brightness(50%)
 362 </style>