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         router-link.menuitem(to="/about") {{ st.tr["About"] }}
  36         router-link.menuitem(to="/faq") F.A.Q.
  37         a.menuitem(href="https://discord.gg/a9ZFKBe")
  38           img.first(src="/images/icons/discord.svg")
  39         a.menuitem(href="https://github.com/yagu0/vchess")
  40           img(src="/images/icons/github.svg")
  41         a.menuitem(href="https://www.facebook.com/Variants-Chess-Club-112565840437886")
  42           img(src="/images/icons/facebook.svg")
  43         a.menuitem(href="https://twitter.com/VchessC")
  44           img.last(src="/images/icons/twitter.svg")
  45         p.clickable(onClick="window.doClick('modalContact')")
  46           | {{ st.tr["Contact"] }}
  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-right: 5px
 157     vertical-align: middle
 158   & > img
 159     padding: 0
 160     height: 1.2em
 161     vertical-align: middle
 162
 163 @media screen and (max-width: 767px)
 164   table
 165     tr > th, td
 166       font-size: 14px
 167
 168 nav
 169   width: 100%
 170   margin: 0
 171   padding: 0
 172   & > #menuBar
 173     width: 100%
 174     padding: 0
 175     @media screen and (min-width: 768px)
 176       & > #leftMenu
 177         padding: 0
 178         width: 50%
 179         display: inline-flex
 180         align-items: center
 181         justify-content: flex-start
 182         & > a
 183           display: inline-block
 184           text-decoration: none
 185           color: #2c3e50
 186           &.router-link-exact-active
 187             color: #388e3c
 188       & > #rightMenu
 189         padding: 0
 190         width: 50%
 191         display: inline-flex
 192         align-items: center
 193         justify-content: flex-end
 194         & > div
 195           display: inline-block
 196     @media screen and (max-width: 767px)
 197       & > #leftMenu
 198         margin-top: 42px
 199         padding-bottom: 5px
 200         & > a
 201           text-decoration: none
 202           color: #2c3e50
 203           &.router-link-exact-active
 204             color: #388e3c
 205       & > #rightMenu
 206         padding-top: 5px
 207         border-top: 1px solid darkgrey
 208
 209 @media screen and (max-width: 767px)
 210   nav
 211     height: 42px
 212     border: none
 213     & > label.drawer-toggle
 214       cursor: pointer
 215       position: absolute
 216       top: 0
 217       left: 5px
 218       line-height: 42px
 219       height: 42px
 220       padding: 0
 221     & > label.drawer-toggle:before
 222       font-size: 42px
 223     & > #menuBar
 224       z-index: 5000 //to hide currently selected piece if any
 225
 226 [type="checkbox"].drawer+*
 227   right: -767px
 228
 229 [type=checkbox].drawer+* .drawer-close
 230   top: 0
 231   left: 5px
 232   padding: 0
 233   height: 50px
 234   width: 50px
 235   line-height: 50px
 236
 237 [type=checkbox].drawer+* .drawer-close:before
 238   font-size: 50px
 239
 240 @media screen and (max-width: 767px)
 241   .button-group
 242     flex-direction: row
 243     button:not(:first-child)
 244       border-left: 1px solid var(--button-group-border-color)
 245       border-top: 0
 246
 247 footer
 248   height: 45px
 249   border: 1px solid #ddd
 250   box-sizing: border-box
 251   //background-color: #000033
 252   font-size: 1rem
 253   width: 100%
 254   padding: 0
 255   display: inline-flex
 256   align-items: center
 257   justify-content: center
 258   & > .router-link-exact-active
 259     color: #388e3c !important
 260     text-decoration: none
 261   & > .menuitem
 262     margin: 0 12px
 263     display: inline-flex;
 264     align-self: center;
 265     &:link
 266       color: #2c3e50
 267       text-decoration: none
 268     &:visited, &:hover
 269       color: #2c3e50
 270       text-decoration: none
 271     & > img
 272       height: 1.5em
 273       display: inline-block
 274       margin: 0
 275       &.first
 276         margin-left: 5px
 277       &.last
 278         margin-right: 5px
 279   & > p
 280     display: inline-block
 281     margin: 0 12px
 282
 283 @media screen and (max-width: 767px)
 284   footer
 285     border: none
 286
 287 @media screen and (max-width: 420px)
 288   .container
 289     min-height: calc(100vh - 55px)
 290   footer
 291     height: 55px
 292     display: block
 293     padding: 5px 0
 294 </style>