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       if (e.target.innerText == "Forum") return; //external link
  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 .clearer
 116   clear: both
 117
 118 .button-group
 119   margin: 0
 120
 121 input[type="checkbox"]:focus
 122   outline: 0
 123
 124 input[type=checkbox]:checked:before
 125   top: -5px;
 126   height: 18px
 127
 128 table
 129   display: block
 130   padding: 0
 131   tr > td
 132     cursor: pointer
 133   th, td
 134     padding: 5px
 135
 136 #divSettings
 137   padding: 0 10px 0 0
 138   height: 100%
 139   & > span
 140     vertical-align: middle
 141   & > img
 142     padding: 0
 143     height: 24px
 144     vertical-align: middle
 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     @media screen and (max-width: 767px)
 179       & > #leftMenu
 180         margin-top: 42px
 181         padding-bottom: 5px
 182         & > a
 183           color: #2c3e50
 184           &.router-link-exact-active
 185             color: #42b983
 186       & > #rightMenu
 187         padding-top: 5px
 188         border-top: 1px solid darkgrey
 189
 190 @media screen and (max-width: 767px)
 191   nav
 192     height: 42px
 193     border: none
 194     & > label.drawer-toggle
 195       cursor: pointer
 196       position: absolute
 197       top: 0
 198       left: 5px
 199       line-height: 42px
 200       height: 42px
 201       padding: 0
 202     & > label.drawer-toggle:before
 203       font-size: 42px
 204     & > #menuBar
 205       z-index: 5000 //to hide currently selected piece if any
 206
 207 [type="checkbox"].drawer+*
 208   right: -767px
 209
 210 [type=checkbox].drawer+* .drawer-close
 211   top: 0
 212   left: 5px
 213   padding: 0
 214   height: 50px
 215   width: 50px
 216   line-height: 50px
 217
 218 [type=checkbox].drawer+* .drawer-close:before
 219   font-size: 50px
 220
 221 @media screen and (max-width: 767px)
 222   .button-group
 223     flex-direction: row
 224     button:not(:first-child)
 225       border-left: 1px solid var(--button-group-border-color)
 226       border-top: 0
 227
 228 footer
 229   height: 45px
 230   border: 1px solid #ddd
 231   box-sizing: border-box
 232   //background-color: #000033
 233   font-size: 1rem
 234   width: 100%
 235   padding: 0
 236   display: inline-flex
 237   align-items: center
 238   justify-content: center
 239   & > .router-link-exact-active
 240     color: #42b983 !important
 241     text-decoration: none
 242   & > .menuitem
 243     display: inline-block
 244     margin: 0 12px
 245     &:link
 246       color: #2c3e50
 247     &:visited, &:hover
 248       color: #2c3e50
 249       text-decoration: none
 250   & > p
 251     display: inline-block
 252     margin: 0 12px
 253
 254 @media screen and (max-width: 767px)
 255   footer
 256     border: none
 257
 258 // Styles for diagrams and board (partial).
 259 // TODO: where to put that ?
 260
 261 .light-square-diag
 262   background-color: #e5e5ca
 263
 264 .dark-square-diag
 265   background-color: #6f8f57
 266
 267 div.board
 268   float: left
 269   height: 0
 270   display: inline-block
 271   position: relative
 272
 273 div.board8
 274   width: 12.5%
 275   padding-bottom: 12.5%
 276
 277 div.board10
 278   width: 10%
 279   padding-bottom: 10%
 280
 281 div.board11
 282   width: 9.09%
 283   padding-bottom: 9.1%
 284
 285 img.piece
 286   width: 100%
 287
 288 img.piece, img.mark-square
 289   max-width: 100%
 290   height: auto
 291   display: block
 292
 293 img.mark-square
 294   opacity: 0.6
 295   width: 76%
 296   position: absolute
 297   top: 12%
 298   left: 12%
 299   opacity: .7
 300
 301 .in-shadow
 302   filter: brightness(50%)
 303 </style>