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')")
  28                 | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }}
  29               #divSettings.clickable(onClick="window.doClick('modalSettings')")
  30                 span {{ st.tr["Settings"] }}
  31                 img(src="/images/icons/settings.svg")
  32     router-view
  33   .row
  34     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  35       footer
  36         router-link.menuitem(to="/about") {{ st.tr["About"] }}
  37         router-link.menuitem#newsMenu(to="/news") {{ st.tr["News"] }}
  38         a.menuitem(href="https://discord.gg/a9ZFKBe")
  39           span Discord
  40           img(src="/images/icons/discord.svg")
  41         a.menuitem(href="https://github.com/yagu0/vchess")
  42           span {{ st.tr["Code"] }}
  43           img(src="/images/icons/github.svg")
  44         p.clickable(onClick="window.doClick('modalContact')")
  45           | {{ st.tr["Contact"] }}
  46 </template>
  47
  48 <script>
  49 import ContactForm from "@/components/ContactForm.vue";
  50 import Settings from "@/components/Settings.vue";
  51 import UpsertUser from "@/components/UpsertUser.vue";
  52 import { store } from "@/store.js";
  53 import { ajax } from "@/utils/ajax.js";
  54 export default {
  55   components: {
  56     ContactForm,
  57     Settings,
  58     UpsertUser
  59   },
  60   data: function() {
  61     return { st: store.state };
  62   },
  63   mounted: function() {
  64     ajax(
  65       "/newsts",
  66       "GET",
  67       {
  68         success: (res) => {
  69           if (this.st.user.newsRead < res.timestamp)
  70             document.getElementById("newsMenu").classList.add("somenews");
  71         }
  72       }
  73     );
  74   },
  75   methods: {
  76     hideDrawer: function(e) {
  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: darkred
  88   --a-visited-color: darkred
  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 .bold
 125   font-weight: bold
 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 #divSettings
 149   padding: 0 10px 0 0
 150   height: 100%
 151   & > span
 152     vertical-align: middle
 153   & > img
 154     padding: 0
 155     height: 1.2em
 156     vertical-align: middle
 157
 158 @media screen and (max-width: 767px)
 159   table
 160     tr > th, td
 161       font-size: 14px
 162
 163 nav
 164   width: 100%
 165   margin: 0
 166   padding: 0
 167   & > #menuBar
 168     width: 100%
 169     padding: 0
 170     @media screen and (min-width: 768px)
 171       & > #leftMenu
 172         padding: 0
 173         width: 50%
 174         display: inline-flex
 175         align-items: center
 176         justify-content: flex-start
 177         & > a
 178           display: inline-block
 179           color: #2c3e50
 180           &.router-link-exact-active
 181             color: #42b983
 182       & > #rightMenu
 183         padding: 0
 184         width: 50%
 185         display: inline-flex
 186         align-items: center
 187         justify-content: flex-end
 188         & > div
 189           display: inline-block
 190     @media screen and (max-width: 767px)
 191       & > #leftMenu
 192         margin-top: 42px
 193         padding-bottom: 5px
 194         & > a
 195           color: #2c3e50
 196           &.router-link-exact-active
 197             color: #42b983
 198       & > #rightMenu
 199         padding-top: 5px
 200         border-top: 1px solid darkgrey
 201
 202 @media screen and (max-width: 767px)
 203   nav
 204     height: 42px
 205     border: none
 206     & > label.drawer-toggle
 207       cursor: pointer
 208       position: absolute
 209       top: 0
 210       left: 5px
 211       line-height: 42px
 212       height: 42px
 213       padding: 0
 214     & > label.drawer-toggle:before
 215       font-size: 42px
 216     & > #menuBar
 217       z-index: 5000 //to hide currently selected piece if any
 218
 219 [type="checkbox"].drawer+*
 220   right: -767px
 221
 222 [type=checkbox].drawer+* .drawer-close
 223   top: 0
 224   left: 5px
 225   padding: 0
 226   height: 50px
 227   width: 50px
 228   line-height: 50px
 229
 230 [type=checkbox].drawer+* .drawer-close:before
 231   font-size: 50px
 232
 233 @media screen and (max-width: 767px)
 234   .button-group
 235     flex-direction: row
 236     button:not(:first-child)
 237       border-left: 1px solid var(--button-group-border-color)
 238       border-top: 0
 239
 240 footer
 241   height: 45px
 242   border: 1px solid #ddd
 243   box-sizing: border-box
 244   //background-color: #000033
 245   font-size: 1rem
 246   width: 100%
 247   padding: 0
 248   display: inline-flex
 249   align-items: center
 250   justify-content: center
 251   & > .router-link-exact-active
 252     color: #42b983 !important
 253     text-decoration: none
 254   & > .menuitem
 255     margin: 0 12px
 256     display: inline-flex;
 257     align-self: center;
 258     &:link
 259       color: #2c3e50
 260     &:visited, &:hover
 261       color: #2c3e50
 262       text-decoration: none
 263     & > img
 264       height: 1.2em
 265       display: inline-block
 266       margin-left: 5px
 267   & > p
 268     display: inline-block
 269     margin: 0 12px
 270
 271 @media screen and (max-width: 767px)
 272   footer
 273     border: none
 274
 275 @media screen and (max-width: 420px)
 276   footer
 277     height: 55px
 278     display: block
 279     padding: 5px 0
 280
 281 .menuitem.somenews
 282   animation: blinkNews 1s infinite;
 283   color: red
 284   &:link, &:visited, &:hover
 285     color: red
 286
 287 @keyframes blinkNews
 288   0%, 49%
 289     background-color: yellow
 290     padding: 3px
 291   50%, 100%
 292     background-color: grey
 293     padding: 3px
 294
 295 // Styles for diagrams and board (partial).
 296 // TODO: where to put that ?
 297
 298 .light-square-diag
 299   background-color: #e5e5ca
 300
 301 .dark-square-diag
 302   background-color: #6f8f57
 303
 304 div.board
 305   float: left
 306   height: 0
 307   display: inline-block
 308   position: relative
 309
 310 div.board8
 311   width: 12.5%
 312   padding-bottom: 12.5%
 313
 314 div.board10
 315   width: 10%
 316   padding-bottom: 10%
 317
 318 div.board11
 319   width: 9.09%
 320   padding-bottom: 9.1%
 321
 322 img.piece
 323   width: 100%
 324
 325 img.piece, img.mark-square
 326   max-width: 100%
 327   height: auto
 328   display: block
 329
 330 img.mark-square
 331   opacity: 0.6
 332   width: 76%
 333   position: absolute
 334   top: 12%
 335   left: 12%
 336   opacity: .7
 337
 338 .in-shadow
 339   filter: brightness(50%)
 340 </style>