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-top: 0
 161     padding-bottom: 0
 162     padding-right: 5px
 163     vertical-align: middle
 164   & > img
 165     padding: 0
 166     height: 1.2em
 167     vertical-align: middle
 168
 169 @media screen and (max-width: 767px)
 170   table
 171     tr > th, td
 172       font-size: 14px
 173
 174 nav
 175   width: 100%
 176   margin: 0
 177   padding: 0
 178   & > #menuBar
 179     width: 100%
 180     padding: 0
 181     @media screen and (min-width: 768px)
 182       & > #leftMenu
 183         padding: 0
 184         width: 50%
 185         display: inline-flex
 186         align-items: center
 187         justify-content: flex-start
 188         & > a
 189           display: inline-block
 190           text-decoration: none
 191           color: #2c3e50
 192           &.router-link-exact-active
 193             color: #388e3c
 194       & > #rightMenu
 195         padding: 0
 196         width: 50%
 197         display: inline-flex
 198         align-items: center
 199         justify-content: flex-end
 200         & > div
 201           display: inline-block
 202     @media screen and (max-width: 767px)
 203       & > #leftMenu
 204         margin-top: 42px
 205         padding-bottom: 5px
 206         & > a
 207           text-decoration: none
 208           color: #2c3e50
 209           &.router-link-exact-active
 210             color: #388e3c
 211       & > #rightMenu
 212         padding-top: 5px
 213         border-top: 1px solid darkgrey
 214
 215 @media screen and (max-width: 767px)
 216   nav
 217     height: 42px
 218     border: none
 219     & > label.drawer-toggle
 220       cursor: pointer
 221       position: absolute
 222       top: 0
 223       left: 5px
 224       line-height: 42px
 225       height: 42px
 226       padding: 0
 227     & > label.drawer-toggle:before
 228       font-size: 42px
 229     & > #menuBar
 230       z-index: 5000 //to hide currently selected piece if any
 231
 232 [type="checkbox"].drawer+*
 233   right: -767px
 234
 235 [type=checkbox].drawer+* .drawer-close
 236   top: 0
 237   left: 5px
 238   padding: 0
 239   height: 50px
 240   width: 50px
 241   line-height: 50px
 242
 243 [type=checkbox].drawer+* .drawer-close:before
 244   font-size: 50px
 245
 246 @media screen and (max-width: 767px)
 247   .button-group
 248     flex-direction: row
 249     button:not(:first-child)
 250       border-left: 1px solid var(--button-group-border-color)
 251       border-top: 0
 252
 253 footer
 254   .left-part
 255     display: inline-flex
 256     justify-content: flex-end
 257     width: 50%
 258     & > p
 259       display: inline-block
 260       margin: 0 12px
 261     @media screen and (max-width: 500px)
 262       display: block
 263       width: 100%
 264       margin-bottom: 7px
 265       text-align: center
 266   .right-part
 267     display: inline-flex
 268     justify-content: flex-start
 269     width: 50%
 270     @media screen and (max-width: 500px)
 271       display: block
 272       width: 100%
 273       text-align: center
 274   height: 45px
 275   border: 1px solid #ddd
 276   box-sizing: border-box
 277   //background-color: #000033
 278   font-size: 1rem
 279   width: 100%
 280   padding: 0
 281   display: inline-flex
 282   align-items: center
 283   & > .left-part > .router-link-exact-active
 284     color: #388e3c !important
 285     text-decoration: none
 286 footer .menuitem
 287   margin: 0 12px
 288   display: inline-flex
 289   align-self: center
 290   &:link
 291     color: #2c3e50
 292     text-decoration: none
 293   &:visited, &:hover
 294     color: #2c3e50
 295     text-decoration: none
 296 footer > .right-part > a.menuitem > img
 297   display: inline-block
 298   height: 1.3em
 299   margin: 0 5px
 300   //height: 1.5em
 301   //margin: 0
 302   //&.first
 303     @media screen and (min-width: 501px)
 304       margin-left: 5px
 305
 306 @media screen and (max-width: 767px)
 307   footer
 308     border: none
 309
 310 @media screen and (max-width: 500px)
 311   .container
 312     min-height: calc(100vh - 67px)
 313   footer
 314     height: 67px
 315     display: block
 316     padding: 5px 0
 317 </style>