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         .left-part
  36           router-link.menuitem(to="/about") {{ st.tr["About"] }}
  37           router-link.menuitem(to="/faq") F.A.Q.
  38           p.menuitem.clickable(onClick="window.doClick('modalContact')")
  39             | {{ st.tr["Contact"] }}
  40         .right-part
  41           a.menuitem(href="https://discord.gg/a9ZFKBe")
  42             span Discord
  43             img.first(src="/images/icons/discord.svg")
  44           a.menuitem(href="https://github.com/yagu0/vchess")
  45             span {{ st.tr["Code"] }}
  46             img(src="/images/icons/github.svg")
  47           //a.menuitem(href="https://www.facebook.com/Variants-Chess-Club-112565840437886")
  48             img(src="/images/icons/facebook.svg")
  49           //a.menuitem(href="https://twitter.com/VchessC")
  50             img(src="/images/icons/twitter.svg")
  51 </template>
  52
  53 <script>
  54 import ContactForm from "@/components/ContactForm.vue";
  55 import Settings from "@/components/Settings.vue";
  56 import UpsertUser from "@/components/UpsertUser.vue";
  57 import { store } from "@/store.js";
  58 import { ajax } from "@/utils/ajax.js";
  59 export default {
  60   components: {
  61     ContactForm,
  62     Settings,
  63     UpsertUser
  64   },
  65   data: function() {
  66     return { st: store.state };
  67   },
  68   computed: {
  69     userName: function() {
  70       return (
  71         this.st.user.id > 0
  72           ? (this.st.user.name || "@nonymous")
  73           : "Login"
  74       );
  75     }
  76   },
  77   methods: {
  78     hideDrawer: function(e) {
  79       e.preventDefault(); //TODO: why is this needed?
  80       document.getElementsByClassName("drawer")[0].checked = false;
  81     }
  82   }
  83 };
  84 </script>
  85
  86 <style lang="sass">
  87 html, *
  88   font-family: "Open Sans", Arial, sans-serif
  89   --a-link-color: darkred
  90   --a-visited-color: darkred
  91   --card-back-color: #f4f6f6
  92   --button-back-color: #d1d5d5
  93   --table-body-back-color: #f8f8f8
  94
  95 body
  96   padding: 0
  97   min-width: 320px
  98   --fore-color: #1c1e10 //#2c3e50
  99   //--back-color: #f2f2f2
 100   background-image: radial-gradient(white, #e6e6ff) //lavender)
 101
 102 #app
 103   -webkit-font-smoothing: antialiased
 104   -moz-osx-font-smoothing: grayscale
 105
 106 .container
 107   // 45px is footer height
 108   min-height: calc(100vh - 45px)
 109   overflow: hidden
 110   padding: 0
 111   margin: 0
 112
 113 .row > div
 114   padding: 0
 115
 116 a
 117   text-decoration: underline
 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           text-decoration: none
 189           color: #2c3e50
 190           &.router-link-exact-active
 191             color: #388e3c
 192       & > #rightMenu
 193         padding: 0
 194         width: 50%
 195         display: inline-flex
 196         align-items: center
 197         justify-content: flex-end
 198         & > div
 199           display: inline-block
 200     @media screen and (max-width: 767px)
 201       & > #leftMenu
 202         margin-top: 42px
 203         padding-bottom: 5px
 204         & > a
 205           text-decoration: none
 206           color: #2c3e50
 207           &.router-link-exact-active
 208             color: #388e3c
 209       & > #rightMenu
 210         padding-top: 5px
 211         border-top: 1px solid darkgrey
 212
 213 @media screen and (max-width: 767px)
 214   nav
 215     height: 42px
 216     border: none
 217     & > label.drawer-toggle
 218       cursor: pointer
 219       position: absolute
 220       top: 0
 221       left: 5px
 222       line-height: 42px
 223       height: 42px
 224       padding: 0
 225     & > label.drawer-toggle:before
 226       font-size: 42px
 227     & > #menuBar
 228       z-index: 5000 //to hide currently selected piece if any
 229
 230 [type="checkbox"].drawer+*
 231   right: -767px
 232
 233 [type=checkbox].drawer+* .drawer-close
 234   top: 0
 235   left: 5px
 236   padding: 0
 237   height: 50px
 238   width: 50px
 239   line-height: 50px
 240
 241 [type=checkbox].drawer+* .drawer-close:before
 242   font-size: 50px
 243
 244 @media screen and (max-width: 767px)
 245   .button-group
 246     flex-direction: row
 247     button:not(:first-child)
 248       border-left: 1px solid var(--button-group-border-color)
 249       border-top: 0
 250
 251 footer
 252   .left-part
 253     display: inline-flex
 254     justify-content: flex-end
 255     width: 50%
 256     & > p
 257       display: inline-block
 258       margin: 0 12px
 259     @media screen and (max-width: 500px)
 260       display: block
 261       width: 100%
 262       margin-bottom: 7px
 263       text-align: center
 264   .right-part
 265     display: inline-flex
 266     justify-content: flex-start
 267     width: 50%
 268     @media screen and (max-width: 500px)
 269       display: block
 270       width: 100%
 271       text-align: center
 272   height: 45px
 273   border: 1px solid #ddd
 274   box-sizing: border-box
 275   //background-color: #000033
 276   font-size: 1rem
 277   width: 100%
 278   padding: 0
 279   display: inline-flex
 280   align-items: center
 281   & > .left-part > .router-link-exact-active
 282     color: #388e3c !important
 283     text-decoration: none
 284 footer .menuitem
 285   margin: 0 12px
 286   display: inline-flex
 287   align-self: center
 288   &:link
 289     color: #2c3e50
 290     text-decoration: none
 291   &:visited, &:hover
 292     color: #2c3e50
 293     text-decoration: none
 294 footer > .right-part > a.menuitem > img
 295   display: inline-block
 296   height: 1.3em
 297   margin: 0 5px
 298   //height: 1.5em
 299   //margin: 0
 300   //&.first
 301     @media screen and (min-width: 501px)
 302       margin-left: 5px
 303
 304 @media screen and (max-width: 767px)
 305   footer
 306     border: none
 307
 308 @media screen and (max-width: 500px)
 309   .container
 310     min-height: calc(100vh - 67px)
 311   footer
 312     height: 67px
 313     display: block
 314     padding: 5px 0
 315 </style>