client/src/App.vue

   1 <template lang="pug">
   2 #app
   3   Language
   4   Settings
   5   ContactForm
   6   UpsertUser
   7   .container
   8     .row
   9       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  10         // Menu (top of page):
  11         // Left: hall, variants, problems, mygames
  12         // Right: usermenu, settings, flag
  13         nav
  14           label.drawer-toggle(for="drawerControl")
  15           input#drawerControl.drawer(type="checkbox")
  16           #menuBar(@click="hideDrawer($event)")
  17             label.drawer-close(for="drawerControl")
  18             #leftMenu
  19               router-link(to="/")
  20                 | {{ st.tr["Hall"] }}
  21               router-link(to="/variants")
  22                 | {{ st.tr["Variants"] }}
  23               router-link(to="/problems")
  24                 | {{ st.tr["Problems"] }}
  25               router-link(to="/mygames")
  26                 | {{ st.tr["My games"] }}
  27             #rightMenu
  28               .clickable(onClick="doClick('modalUser')")
  29                 | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }}
  30               .clickable(onClick="doClick('modalSettings')")
  31                 | {{ st.tr["Settings"] }}
  32               .clickable#flagContainer(onClick="doClick('modalLang')")
  33                 img(v-if="!!st.lang" :src="flagImage")
  34     router-view
  35   .row
  36     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  37       footer
  38         router-link.menuitem(to="/about") {{ st.tr["About"] }}
  39         router-link.menuitem(to="/news") {{ st.tr["News"] }}
  40         p.clickable(onClick="doClick('modalContact')")
  41           | {{ st.tr["Contact"] }}
  42 </template>
  43
  44 <script>
  45 import ContactForm from "@/components/ContactForm.vue";
  46 import Language from "@/components/Language.vue";
  47 import Settings from "@/components/Settings.vue";
  48 import UpsertUser from "@/components/UpsertUser.vue";
  49 import { store } from "./store.js";
  50 import { processModalClick } from "./utils/modalClick.js";
  51 export default {
  52   components: {
  53     ContactForm,
  54     Language,
  55     Settings,
  56     UpsertUser,
  57   },
  58   data: function() {
  59     return {
  60       st: store.state,
  61     };
  62   },
  63   computed: {
  64     flagImage: function() {
  65       return `/images/flags/${this.st.lang}.svg`;
  66     },
  67   },
  68   mounted: function() {
  69     let dialogs = document.querySelectorAll("div[role='dialog']");
  70     dialogs.forEach(d => {
  71       d.addEventListener("click", processModalClick);
  72     });
  73   },
  74   methods: {
  75     hideDrawer: function(e) {
  76       if (e.target.innerText == "Forum")
  77         return; //external link
  78       e.preventDefault(); //TODO: why is this needed?
  79       document.getElementsByClassName("drawer")[0].checked = false;
  80     },
  81   },
  82 };
  83 </script>
  84
  85 <style lang="sass">
  86 html, *
  87   font-family: "Open Sans", Arial, sans-serif
  88   --a-link-color: black
  89   --a-visited-color: black
  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 header
 113   width: 100%
 114   display: flex
 115   align-items: center
 116   justify-content: center
 117   margin: 0 auto
 118
 119 .clickable
 120   cursor: pointer
 121
 122 .text-center
 123   text-align: center
 124
 125 .clearer
 126   clear: both
 127
 128 .button-group
 129   margin: 0
 130
 131 input[type="checkbox"]:focus
 132   outline: 0
 133
 134 input[type=checkbox]:checked:before
 135   top: -5px;
 136   height: 18px
 137
 138 table
 139   display: block
 140   padding: 0
 141   tr > td
 142     cursor: pointer
 143   th, td
 144     padding: 5px
 145
 146 @media screen and (max-width: 767px)
 147   table
 148     tr > th, td
 149       font-size: 14px
 150
 151 nav
 152   width: 100%
 153   margin: 0
 154   padding: 0
 155   & > #menuBar
 156     width: 100%
 157     padding: 0
 158     @media screen and (min-width: 768px)
 159       & > #leftMenu
 160         padding: 0
 161         width: 50%
 162         display: inline-flex
 163         align-items: center
 164         justify-content: flex-start
 165         & > a
 166           display: inline-block
 167           color: #2c3e50
 168           &.router-link-exact-active
 169             color: #42b983
 170       & > #rightMenu
 171         padding: 0
 172         width: 50%
 173         display: inline-flex
 174         align-items: center
 175         justify-content: flex-end
 176         & > div
 177           display: inline-block
 178           &#flagContainer
 179             display: inline-flex
 180           & > img
 181             padding: 0
 182             width: 36px
 183             height: 27px
 184     @media screen and (max-width: 767px)
 185       & > #leftMenu
 186         margin-top: 42px
 187         padding-bottom: 5px
 188         & > a
 189           color: #2c3e50
 190           &.router-link-exact-active
 191             color: #42b983
 192       & > #rightMenu
 193         padding-top: 5px
 194         border-top: 1px solid darkgrey
 195         & > div
 196           &#flagContainer
 197             display: inline-flex
 198           & > img
 199             padding: 0
 200             width: 36px
 201             height: 27px
 202
 203 @media screen and (max-width: 767px)
 204   nav
 205     height: 42px
 206     border: none
 207     & > label.drawer-toggle
 208       cursor: pointer
 209       font-size: 32px
 210       position: absolute
 211       top: -22px
 212       //padding: -5px 0 0 10px
 213   & > #menuBar
 214     z-index: 5000 //to hide currently selected piece if any
 215
 216 [type="checkbox"].drawer+*
 217   right: -767px
 218
 219 [type=checkbox].drawer+* .drawer-close
 220   top: -10px
 221   left: var(--universal-margin)
 222   right: 0
 223
 224 [type=checkbox].drawer+* .drawer-close:before
 225   font-size: 50px
 226
 227 @media screen and (max-width: 767px)
 228   .button-group
 229     flex-direction: row
 230     button:not(:first-child)
 231       border-left: 1px solid var(--button-group-border-color)
 232       border-top: 0
 233
 234 footer
 235   height: 45px
 236   border: 1px solid #ddd
 237   box-sizing: border-box
 238   //background-color: #000033
 239   font-size: 1rem
 240   width: 100%
 241   padding: 0
 242   display: inline-flex
 243   align-items: center
 244   justify-content: center
 245   & > .router-link-exact-active
 246     color: #42b983 !important
 247     text-decoration: none
 248   & > .menuitem
 249     display: inline-block
 250     margin: 0 12px
 251     &:link
 252       color: #2c3e50
 253     &:visited, &:hover
 254       color: #2c3e50
 255       text-decoration: none
 256   & > p
 257     display: inline-block
 258     margin: 0 12px
 259
 260 @media screen and (max-width: 767px)
 261   footer
 262     border: none
 263
 264 // Styles for diagrams and board (partial).
 265 // TODO: where to put that ?
 266
 267 .light-square-diag
 268   background-color: #e5e5ca
 269
 270 .dark-square-diag
 271   background-color: #6f8f57
 272
 273 div.board
 274   float: left
 275   height: 0
 276   display: inline-block
 277   position: relative
 278
 279 div.board8
 280   width: 12.5%
 281   padding-bottom: 12.5%
 282
 283 div.board10
 284   width: 10%
 285   padding-bottom: 10%
 286
 287 div.board11
 288   width: 9.09%
 289   padding-bottom: 9.1%
 290
 291 img.piece
 292   width: 100%
 293
 294 img.piece, img.mark-square
 295   max-width: 100%
 296   height: auto
 297   display: block
 298
 299 img.mark-square
 300   opacity: 0.6
 301   width: 76%
 302   position: absolute
 303   top: 12%
 304   left: 12%
 305   opacity: .7
 306
 307 .in-shadow
 308   filter: brightness(50%)
 309 </style>