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