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 </template>
  48
  49 <script>
  50 import ContactForm from "@/components/ContactForm.vue";
  51 import Settings from "@/components/Settings.vue";
  52 import UpsertUser from "@/components/UpsertUser.vue";
  53 import { store } from "@/store.js";
  54 import { ajax } from "@/utils/ajax.js";
  55 export default {
  56   components: {
  57     ContactForm,
  58     Settings,
  59     UpsertUser
  60   },
  61   data: function() {
  62     return { st: store.state };
  63   },
  64   computed: {
  65     userName: function() {
  66       return (
  67         this.st.user.id > 0
  68           ? (this.st.user.name || "@nonymous")
  69           : "Login"
  70       );
  71     }
  72   },
  73   methods: {
  74     hideDrawer: function(e) {
  75       e.preventDefault(); //TODO: why is this needed?
  76       document.getElementsByClassName("drawer")[0].checked = false;
  77     }
  78   }
  79 };
  80 </script>
  81
  82 <style lang="sass">
  83 html, *
  84   font-family: "Open Sans", Arial, sans-serif
  85   --a-link-color: darkred
  86   --a-visited-color: darkred
  87   --card-back-color: #f4f6f6
  88   --button-back-color: #d1d5d5
  89   --table-body-back-color: #f8f8f8
  90
  91 body
  92   padding: 0
  93   min-width: 320px
  94   --fore-color: #1c1e10 //#2c3e50
  95   //--back-color: #f2f2f2
  96   background-image: radial-gradient(white, #e6e6ff) //lavender)
  97
  98 #app
  99   -webkit-font-smoothing: antialiased
 100   -moz-osx-font-smoothing: grayscale
 101
 102 .container
 103   // 45px is footer height
 104   min-height: calc(100vh - 45px)
 105   overflow: hidden
 106   padding: 0
 107   margin: 0
 108
 109 .row > div
 110   padding: 0
 111
 112 a
 113   text-decoration: underline
 114
 115 header
 116   width: 100%
 117   display: flex
 118   align-items: center
 119   justify-content: center
 120   margin: 0 auto
 121
 122 .clickable
 123   cursor: pointer
 124
 125 .text-center
 126   text-align: center
 127
 128 .bold
 129   font-weight: bold
 130
 131 .clearer
 132   clear: both
 133
 134 .button-group
 135   margin: 0
 136
 137 input[type="checkbox"]:focus
 138   outline: 0
 139
 140 input[type=checkbox]:checked:before
 141   top: -5px
 142   height: 18px
 143
 144 table
 145   display: block
 146   padding: 0
 147   tr > td
 148     cursor: pointer
 149   th, td
 150     padding: 5px
 151
 152 #divSettings
 153   padding: 0 10px 0 0
 154   height: 100%
 155   & > span
 156     padding-top: 0
 157     padding-bottom: 0
 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: 500px)
 258       display: block
 259       width: 100%
 260       margin-bottom: 7px
 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: 500px)
 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   display: inline-block
 294   height: 1.3em
 295   margin: 0 5px
 296   //height: 1.5em
 297   //margin: 0
 298   //&.first
 299     @media screen and (min-width: 501px)
 300       margin-left: 5px
 301
 302 @media screen and (max-width: 767px)
 303   footer
 304     border: none
 305
 306 @media screen and (max-width: 500px)
 307   .container
 308     min-height: calc(100vh - 67px)
 309   footer
 310     height: 67px
 311     display: block
 312     padding: 5px 0
 313 </style>