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