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')")
  28                 | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }}
  29               #divSettings.clickable(onClick="window.doClick('modalSettings')")
  30                 span {{ st.tr["Settings"] }}
  31                 img(src="/images/icons/settings.svg")
  32     router-view
  33   .row
  34     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  35       footer
  36         router-link.menuitem(to="/about") {{ st.tr["About"] }}
  37         a.menuitem(href="https://github.com/yagu0/vchess")
  38           span {{ st.tr["Code"] }}
  39           img(src="/images/icons/github.svg")
  40         router-link.menuitem(to="/news") {{ st.tr["News"] }}
  41         p.clickable(onClick="window.doClick('modalContact')")
  42           | {{ st.tr["Contact"] }}
  43 </template>
  44
  45 <script>
  46 import ContactForm from "@/components/ContactForm.vue";
  47 import Settings from "@/components/Settings.vue";
  48 import UpsertUser from "@/components/UpsertUser.vue";
  49 import { store } from "@/store.js";
  50 export default {
  51   components: {
  52     ContactForm,
  53     Settings,
  54     UpsertUser
  55   },
  56   data: function() {
  57     return {
  58       st: store.state
  59     };
  60   },
  61   methods: {
  62     hideDrawer: function(e) {
  63       e.preventDefault(); //TODO: why is this needed?
  64       document.getElementsByClassName("drawer")[0].checked = false;
  65     }
  66   }
  67 };
  68 </script>
  69
  70 <style lang="sass">
  71 html, *
  72   font-family: "Open Sans", Arial, sans-serif
  73   --a-link-color: darkred
  74   --a-visited-color: darkred
  75
  76 body
  77   padding: 0
  78   min-width: 320px
  79   --fore-color: #1c1e10 //#2c3e50
  80   //--back-color: #f2f2f2
  81   background-image: radial-gradient(white, #e6e6ff) //lavender)
  82
  83 #app
  84   -webkit-font-smoothing: antialiased
  85   -moz-osx-font-smoothing: grayscale
  86
  87 .container
  88   // 45px is footer height
  89   min-height: calc(100vh - 45px)
  90   overflow: hidden
  91   padding: 0
  92   margin: 0
  93
  94 .row > div
  95   padding: 0
  96
  97 header
  98   width: 100%
  99   display: flex
 100   align-items: center
 101   justify-content: center
 102   margin: 0 auto
 103
 104 .clickable
 105   cursor: pointer
 106
 107 .text-center
 108   text-align: center
 109
 110 .bold
 111   font-weight: bold
 112
 113 .clearer
 114   clear: both
 115
 116 .button-group
 117   margin: 0
 118
 119 input[type="checkbox"]:focus
 120   outline: 0
 121
 122 input[type=checkbox]:checked:before
 123   top: -5px;
 124   height: 18px
 125
 126 table
 127   display: block
 128   padding: 0
 129   tr > td
 130     cursor: pointer
 131   th, td
 132     padding: 5px
 133
 134 #divSettings
 135   padding: 0 10px 0 0
 136   height: 100%
 137   & > span
 138     vertical-align: middle
 139   & > img
 140     padding: 0
 141     height: 24px
 142     vertical-align: middle
 143
 144 @media screen and (max-width: 767px)
 145   table
 146     tr > th, td
 147       font-size: 14px
 148
 149 nav
 150   width: 100%
 151   margin: 0
 152   padding: 0
 153   & > #menuBar
 154     width: 100%
 155     padding: 0
 156     @media screen and (min-width: 768px)
 157       & > #leftMenu
 158         padding: 0
 159         width: 50%
 160         display: inline-flex
 161         align-items: center
 162         justify-content: flex-start
 163         & > a
 164           display: inline-block
 165           color: #2c3e50
 166           &.router-link-exact-active
 167             color: #42b983
 168       & > #rightMenu
 169         padding: 0
 170         width: 50%
 171         display: inline-flex
 172         align-items: center
 173         justify-content: flex-end
 174         & > div
 175           display: inline-block
 176     @media screen and (max-width: 767px)
 177       & > #leftMenu
 178         margin-top: 42px
 179         padding-bottom: 5px
 180         & > a
 181           color: #2c3e50
 182           &.router-link-exact-active
 183             color: #42b983
 184       & > #rightMenu
 185         padding-top: 5px
 186         border-top: 1px solid darkgrey
 187
 188 @media screen and (max-width: 767px)
 189   nav
 190     height: 42px
 191     border: none
 192     & > label.drawer-toggle
 193       cursor: pointer
 194       position: absolute
 195       top: 0
 196       left: 5px
 197       line-height: 42px
 198       height: 42px
 199       padding: 0
 200     & > label.drawer-toggle:before
 201       font-size: 42px
 202     & > #menuBar
 203       z-index: 5000 //to hide currently selected piece if any
 204
 205 [type="checkbox"].drawer+*
 206   right: -767px
 207
 208 [type=checkbox].drawer+* .drawer-close
 209   top: 0
 210   left: 5px
 211   padding: 0
 212   height: 50px
 213   width: 50px
 214   line-height: 50px
 215
 216 [type=checkbox].drawer+* .drawer-close:before
 217   font-size: 50px
 218
 219 @media screen and (max-width: 767px)
 220   .button-group
 221     flex-direction: row
 222     button:not(:first-child)
 223       border-left: 1px solid var(--button-group-border-color)
 224       border-top: 0
 225
 226 footer
 227   height: 45px
 228   border: 1px solid #ddd
 229   box-sizing: border-box
 230   //background-color: #000033
 231   font-size: 1rem
 232   width: 100%
 233   padding: 0
 234   display: inline-flex
 235   align-items: center
 236   justify-content: center
 237   & > .router-link-exact-active
 238     color: #42b983 !important
 239     text-decoration: none
 240   & > .menuitem
 241     margin: 0 12px
 242     display: inline-flex;
 243     align-self: center;
 244     &:link
 245       color: #2c3e50
 246     &:visited, &:hover
 247       color: #2c3e50
 248       text-decoration: none
 249     & > img
 250       height: 1.2em
 251       display: inline-block
 252       margin-left: 5px
 253   & > p
 254     display: inline-block
 255     margin: 0 12px
 256
 257 @media screen and (max-width: 767px)
 258   footer
 259     border: none
 260
 261 // Styles for diagrams and board (partial).
 262 // TODO: where to put that ?
 263
 264 .light-square-diag
 265   background-color: #e5e5ca
 266
 267 .dark-square-diag
 268   background-color: #6f8f57
 269
 270 div.board
 271   float: left
 272   height: 0
 273   display: inline-block
 274   position: relative
 275
 276 div.board8
 277   width: 12.5%
 278   padding-bottom: 12.5%
 279
 280 div.board10
 281   width: 10%
 282   padding-bottom: 10%
 283
 284 div.board11
 285   width: 9.09%
 286   padding-bottom: 9.1%
 287
 288 img.piece
 289   width: 100%
 290
 291 img.piece, img.mark-square
 292   max-width: 100%
 293   height: auto
 294   display: block
 295
 296 img.mark-square
 297   opacity: 0.6
 298   width: 76%
 299   position: absolute
 300   top: 12%
 301   left: 12%
 302   opacity: .7
 303
 304 .in-shadow
 305   filter: brightness(50%)
 306 </style>