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             img.first(src="/images/icons/discord.svg")
  43           a.menuitem(href="https://github.com/yagu0/vchess")
  44             img(src="/images/icons/github.svg")
  45           a.menuitem(href="https://www.facebook.com/Variants-Chess-Club-112565840437886")
  46             img(src="/images/icons/facebook.svg")
  47           a.menuitem(href="https://twitter.com/VchessC")
  48             img(src="/images/icons/twitter.svg")
  49 </template>
  50
  51 <script>
  52 import ContactForm from "@/components/ContactForm.vue";
  53 import Settings from "@/components/Settings.vue";
  54 import UpsertUser from "@/components/UpsertUser.vue";
  55 import { store } from "@/store.js";
  56 import { ajax } from "@/utils/ajax.js";
  57 export default {
  58   components: {
  59     ContactForm,
  60     Settings,
  61     UpsertUser
  62   },
  63   data: function() {
  64     return { st: store.state };
  65   },
  66   computed: {
  67     userName: function() {
  68       return (
  69         this.st.user.id > 0
  70           ? (this.st.user.name || "@nonymous")
  71           : "Login"
  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   --card-back-color: #f4f6f6
  90   --button-back-color: #d1d5d5
  91   --table-body-back-color: #f8f8f8
  92
  93 body
  94   padding: 0
  95   min-width: 320px
  96   --fore-color: #1c1e10 //#2c3e50
  97   //--back-color: #f2f2f2
  98   background-image: radial-gradient(white, #e6e6ff) //lavender)
  99
 100 #app
 101   -webkit-font-smoothing: antialiased
 102   -moz-osx-font-smoothing: grayscale
 103
 104 .container
 105   // 45px is footer height
 106   min-height: calc(100vh - 45px)
 107   overflow: hidden
 108   padding: 0
 109   margin: 0
 110
 111 .row > div
 112   padding: 0
 113
 114 a
 115   text-decoration: underline
 116
 117 header
 118   width: 100%
 119   display: flex
 120   align-items: center
 121   justify-content: center
 122   margin: 0 auto
 123
 124 .clickable
 125   cursor: pointer
 126
 127 .text-center
 128   text-align: center
 129
 130 .bold
 131   font-weight: bold
 132
 133 .clearer
 134   clear: both
 135
 136 .button-group
 137   margin: 0
 138
 139 input[type="checkbox"]:focus
 140   outline: 0
 141
 142 input[type=checkbox]:checked:before
 143   top: -5px;
 144   height: 18px
 145
 146 table
 147   display: block
 148   padding: 0
 149   tr > td
 150     cursor: pointer
 151   th, td
 152     padding: 5px
 153
 154 #divSettings
 155   padding: 0 10px 0 0
 156   height: 100%
 157   & > span
 158     padding-right: 5px
 159     vertical-align: middle
 160   & > img
 161     padding: 0
 162     height: 1.2em
 163     vertical-align: middle
 164
 165 @media screen and (max-width: 767px)
 166   table
 167     tr > th, td
 168       font-size: 14px
 169
 170 nav
 171   width: 100%
 172   margin: 0
 173   padding: 0
 174   & > #menuBar
 175     width: 100%
 176     padding: 0
 177     @media screen and (min-width: 768px)
 178       & > #leftMenu
 179         padding: 0
 180         width: 50%
 181         display: inline-flex
 182         align-items: center
 183         justify-content: flex-start
 184         & > a
 185           display: inline-block
 186           text-decoration: none
 187           color: #2c3e50
 188           &.router-link-exact-active
 189             color: #388e3c
 190       & > #rightMenu
 191         padding: 0
 192         width: 50%
 193         display: inline-flex
 194         align-items: center
 195         justify-content: flex-end
 196         & > div
 197           display: inline-block
 198     @media screen and (max-width: 767px)
 199       & > #leftMenu
 200         margin-top: 42px
 201         padding-bottom: 5px
 202         & > a
 203           text-decoration: none
 204           color: #2c3e50
 205           &.router-link-exact-active
 206             color: #388e3c
 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   .left-part
 251     display: inline-flex
 252     justify-content: flex-end
 253     width: 50%
 254     & > p
 255       display: inline-block
 256       margin: 0 12px
 257     @media screen and (max-width: 420px)
 258       display: block
 259       width: 100%
 260       margin-bottom: 10px
 261       text-align: center
 262   .right-part
 263     display: inline-flex
 264     justify-content: flex-start
 265     width: 50%
 266     @media screen and (max-width: 420px)
 267       display: block
 268       width: 100%
 269       text-align: center
 270   height: 45px
 271   border: 1px solid #ddd
 272   box-sizing: border-box
 273   //background-color: #000033
 274   font-size: 1rem
 275   width: 100%
 276   padding: 0
 277   display: inline-flex
 278   align-items: center
 279   & > .left-part > .router-link-exact-active
 280     color: #388e3c !important
 281     text-decoration: none
 282 footer .menuitem
 283   margin: 0 12px
 284   display: inline-flex
 285   align-self: center
 286   &:link
 287     color: #2c3e50
 288     text-decoration: none
 289   &:visited, &:hover
 290     color: #2c3e50
 291     text-decoration: none
 292 footer > .right-part > a.menuitem > img
 293   height: 1.5em
 294   display: inline-block
 295   margin: 0
 296   &.first
 297     @media screen and (min-width: 421px)
 298       margin-left: 5px
 299
 300 @media screen and (max-width: 767px)
 301   footer
 302     border: none
 303
 304 @media screen and (max-width: 420px)
 305   .container
 306     min-height: calc(100vh - 70px)
 307   footer
 308     height: 70px
 309     display: block
 310     padding: 5px 0
 311 </style>