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')") {{ userName }}
  28               #divSettings.clickable(onClick="window.doClick('modalSettings')")
  29                 span {{ st.tr["Settings"] }}
  30                 img(src="/images/icons/settings.svg")
  31     router-view
  32   .row
  33     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  34       footer
  35         router-link.menuitem(to="/about") {{ st.tr["About"] }}
  36         router-link.menuitem#newsMenu(to="/news") {{ st.tr["News"] }}
  37         a.menuitem(href="https://discord.gg/a9ZFKBe")
  38           span Discord
  39           img(src="/images/icons/discord.svg")
  40         a.menuitem(href="https://github.com/yagu0/vchess")
  41           span {{ st.tr["Code"] }}
  42           img(src="/images/icons/github.svg")
  43         p.clickable(onClick="window.doClick('modalContact')")
  44           | {{ st.tr["Contact"] }}
  45 </template>
  46
  47 <script>
  48 import ContactForm from "@/components/ContactForm.vue";
  49 import Settings from "@/components/Settings.vue";
  50 import UpsertUser from "@/components/UpsertUser.vue";
  51 import { store } from "@/store.js";
  52 import { ajax } from "@/utils/ajax.js";
  53 export default {
  54   components: {
  55     ContactForm,
  56     Settings,
  57     UpsertUser
  58   },
  59   data: function() {
  60     return { st: store.state };
  61   },
  62   mounted: function() {
  63     ajax(
  64       "/newsts",
  65       "GET",
  66       {
  67         success: (res) => {
  68           if (this.st.user.newsRead < res.timestamp)
  69             document.getElementById("newsMenu").classList.add("somenews");
  70         }
  71       }
  72     );
  73   },
  74   computed: {
  75     userName: function() {
  76       return (
  77         this.st.user.id > 0
  78           ? (this.st.user.name || "@nonymous")
  79           : "Login"
  80       );
  81     }
  82   },
  83   methods: {
  84     hideDrawer: function(e) {
  85       e.preventDefault(); //TODO: why is this needed?
  86       document.getElementsByClassName("drawer")[0].checked = false;
  87     }
  88   }
  89 };
  90 </script>
  91
  92 <style lang="sass">
  93 html, *
  94   font-family: "Open Sans", Arial, sans-serif
  95   --a-link-color: darkred
  96   --a-visited-color: darkred
  97   --card-back-color: #f4f6f6
  98   --button-back-color: #d1d5d5
  99   --table-body-back-color: #f8f8f8
 100
 101 body
 102   padding: 0
 103   min-width: 320px
 104   --fore-color: #1c1e10 //#2c3e50
 105   //--back-color: #f2f2f2
 106   background-image: radial-gradient(white, #e6e6ff) //lavender)
 107
 108 #app
 109   -webkit-font-smoothing: antialiased
 110   -moz-osx-font-smoothing: grayscale
 111
 112 .container
 113   // 45px is footer height
 114   min-height: calc(100vh - 45px)
 115   overflow: hidden
 116   padding: 0
 117   margin: 0
 118
 119 .row > div
 120   padding: 0
 121
 122 a
 123   text-decoration: underline
 124
 125 header
 126   width: 100%
 127   display: flex
 128   align-items: center
 129   justify-content: center
 130   margin: 0 auto
 131
 132 .clickable
 133   cursor: pointer
 134
 135 .text-center
 136   text-align: center
 137
 138 .bold
 139   font-weight: bold
 140
 141 .clearer
 142   clear: both
 143
 144 .button-group
 145   margin: 0
 146
 147 input[type="checkbox"]:focus
 148   outline: 0
 149
 150 input[type=checkbox]:checked:before
 151   top: -5px;
 152   height: 18px
 153
 154 table
 155   display: block
 156   padding: 0
 157   tr > td
 158     cursor: pointer
 159   th, td
 160     padding: 5px
 161
 162 #divSettings
 163   padding: 0 10px 0 0
 164   height: 100%
 165   & > span
 166     padding-right: 5px
 167     vertical-align: middle
 168   & > img
 169     padding: 0
 170     height: 1.2em
 171     vertical-align: middle
 172
 173 @media screen and (max-width: 767px)
 174   table
 175     tr > th, td
 176       font-size: 14px
 177
 178 nav
 179   width: 100%
 180   margin: 0
 181   padding: 0
 182   & > #menuBar
 183     width: 100%
 184     padding: 0
 185     @media screen and (min-width: 768px)
 186       & > #leftMenu
 187         padding: 0
 188         width: 50%
 189         display: inline-flex
 190         align-items: center
 191         justify-content: flex-start
 192         & > a
 193           display: inline-block
 194           text-decoration: none
 195           color: #2c3e50
 196           &.router-link-exact-active
 197             color: #388e3c
 198       & > #rightMenu
 199         padding: 0
 200         width: 50%
 201         display: inline-flex
 202         align-items: center
 203         justify-content: flex-end
 204         & > div
 205           display: inline-block
 206     @media screen and (max-width: 767px)
 207       & > #leftMenu
 208         margin-top: 42px
 209         padding-bottom: 5px
 210         & > a
 211           text-decoration: none
 212           color: #2c3e50
 213           &.router-link-exact-active
 214             color: #388e3c
 215       & > #rightMenu
 216         padding-top: 5px
 217         border-top: 1px solid darkgrey
 218
 219 @media screen and (max-width: 767px)
 220   nav
 221     height: 42px
 222     border: none
 223     & > label.drawer-toggle
 224       cursor: pointer
 225       position: absolute
 226       top: 0
 227       left: 5px
 228       line-height: 42px
 229       height: 42px
 230       padding: 0
 231     & > label.drawer-toggle:before
 232       font-size: 42px
 233     & > #menuBar
 234       z-index: 5000 //to hide currently selected piece if any
 235
 236 [type="checkbox"].drawer+*
 237   right: -767px
 238
 239 [type=checkbox].drawer+* .drawer-close
 240   top: 0
 241   left: 5px
 242   padding: 0
 243   height: 50px
 244   width: 50px
 245   line-height: 50px
 246
 247 [type=checkbox].drawer+* .drawer-close:before
 248   font-size: 50px
 249
 250 @media screen and (max-width: 767px)
 251   .button-group
 252     flex-direction: row
 253     button:not(:first-child)
 254       border-left: 1px solid var(--button-group-border-color)
 255       border-top: 0
 256
 257 footer
 258   height: 45px
 259   border: 1px solid #ddd
 260   box-sizing: border-box
 261   //background-color: #000033
 262   font-size: 1rem
 263   width: 100%
 264   padding: 0
 265   display: inline-flex
 266   align-items: center
 267   justify-content: center
 268   & > .router-link-exact-active
 269     color: #388e3c !important
 270     text-decoration: none
 271   & > .menuitem
 272     margin: 0 12px
 273     display: inline-flex;
 274     align-self: center;
 275     &:link
 276       color: #2c3e50
 277       text-decoration: none
 278     &:visited, &:hover
 279       color: #2c3e50
 280       text-decoration: none
 281     & > img
 282       height: 1.2em
 283       display: inline-block
 284       margin-left: 5px
 285   & > p
 286     display: inline-block
 287     margin: 0 12px
 288
 289 @media screen and (max-width: 767px)
 290   footer
 291     border: none
 292
 293 @media screen and (max-width: 420px)
 294   .container
 295     min-height: calc(100vh - 55px)
 296   footer
 297     height: 55px
 298     display: block
 299     padding: 5px 0
 300
 301 .menuitem.somenews
 302   color: red
 303   &:link, &:visited, &:hover
 304     color: red
 305 </style>