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