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 import { processModalClick } from "./utils/modalClick.js";
  49 export default {
  50   components: {
  51     ContactForm,
  52     Settings,
  53     UpsertUser
  54   },
  55   data: function() {
  56     return {
  57       st: store.state
  58     };
  59   },
  60   mounted: function() {
  61     let dialogs = document.querySelectorAll("div[role='dialog']");
  62     dialogs.forEach(d => {
  63       d.addEventListener("click", processModalClick);
  64     });
  65   },
  66   methods: {
  67     hideDrawer: function(e) {
  68       e.preventDefault(); //TODO: why is this needed?
  69       document.getElementsByClassName("drawer")[0].checked = false;
  70     }
  71   }
  72 };
  73 </script>
  74
  75 <style lang="sass">
  76 html, *
  77   font-family: "Open Sans", Arial, sans-serif
  78   --a-link-color: black
  79   --a-visited-color: black
  80
  81 body
  82   padding: 0
  83   min-width: 320px
  84   --fore-color: #1c1e10 //#2c3e50
  85   //--back-color: #f2f2f2
  86   background-image: radial-gradient(white, #e6e6ff) //lavender)
  87
  88 #app
  89   -webkit-font-smoothing: antialiased
  90   -moz-osx-font-smoothing: grayscale
  91
  92 .container
  93   // 45px is footer height
  94   min-height: calc(100vh - 45px)
  95   overflow: hidden
  96   padding: 0
  97   margin: 0
  98
  99 .row > div
 100   padding: 0
 101
 102 header
 103   width: 100%
 104   display: flex
 105   align-items: center
 106   justify-content: center
 107   margin: 0 auto
 108
 109 .clickable
 110   cursor: pointer
 111
 112 .text-center
 113   text-align: center
 114
 115 .bold
 116   font-weight: bold
 117
 118 .clearer
 119   clear: both
 120
 121 .button-group
 122   margin: 0
 123
 124 input[type="checkbox"]:focus
 125   outline: 0
 126
 127 input[type=checkbox]:checked:before
 128   top: -5px;
 129   height: 18px
 130
 131 table
 132   display: block
 133   padding: 0
 134   tr > td
 135     cursor: pointer
 136   th, td
 137     padding: 5px
 138
 139 #divSettings
 140   padding: 0 10px 0 0
 141   height: 100%
 142   & > span
 143     vertical-align: middle
 144   & > img
 145     padding: 0
 146     height: 24px
 147     vertical-align: middle
 148
 149 @media screen and (max-width: 767px)
 150   table
 151     tr > th, td
 152       font-size: 14px
 153
 154 nav
 155   width: 100%
 156   margin: 0
 157   padding: 0
 158   & > #menuBar
 159     width: 100%
 160     padding: 0
 161     @media screen and (min-width: 768px)
 162       & > #leftMenu
 163         padding: 0
 164         width: 50%
 165         display: inline-flex
 166         align-items: center
 167         justify-content: flex-start
 168         & > a
 169           display: inline-block
 170           color: #2c3e50
 171           &.router-link-exact-active
 172             color: #42b983
 173       & > #rightMenu
 174         padding: 0
 175         width: 50%
 176         display: inline-flex
 177         align-items: center
 178         justify-content: flex-end
 179         & > div
 180           display: inline-block
 181     @media screen and (max-width: 767px)
 182       & > #leftMenu
 183         margin-top: 42px
 184         padding-bottom: 5px
 185         & > a
 186           color: #2c3e50
 187           &.router-link-exact-active
 188             color: #42b983
 189       & > #rightMenu
 190         padding-top: 5px
 191         border-top: 1px solid darkgrey
 192
 193 @media screen and (max-width: 767px)
 194   nav
 195     height: 42px
 196     border: none
 197     & > label.drawer-toggle
 198       cursor: pointer
 199       position: absolute
 200       top: 0
 201       left: 5px
 202       line-height: 42px
 203       height: 42px
 204       padding: 0
 205     & > label.drawer-toggle:before
 206       font-size: 42px
 207     & > #menuBar
 208       z-index: 5000 //to hide currently selected piece if any
 209
 210 [type="checkbox"].drawer+*
 211   right: -767px
 212
 213 [type=checkbox].drawer+* .drawer-close
 214   top: 0
 215   left: 5px
 216   padding: 0
 217   height: 50px
 218   width: 50px
 219   line-height: 50px
 220
 221 [type=checkbox].drawer+* .drawer-close:before
 222   font-size: 50px
 223
 224 @media screen and (max-width: 767px)
 225   .button-group
 226     flex-direction: row
 227     button:not(:first-child)
 228       border-left: 1px solid var(--button-group-border-color)
 229       border-top: 0
 230
 231 footer
 232   height: 45px
 233   border: 1px solid #ddd
 234   box-sizing: border-box
 235   //background-color: #000033
 236   font-size: 1rem
 237   width: 100%
 238   padding: 0
 239   display: inline-flex
 240   align-items: center
 241   justify-content: center
 242   & > .router-link-exact-active
 243     color: #42b983 !important
 244     text-decoration: none
 245   & > .menuitem
 246     display: inline-block
 247     margin: 0 12px
 248     &:link
 249       color: #2c3e50
 250     &:visited, &:hover
 251       color: #2c3e50
 252       text-decoration: none
 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>