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
  98 body
  99   padding: 0
 100   min-width: 320px
 101   --fore-color: #1c1e10 //#2c3e50
 102   //--back-color: #f2f2f2
 103   background-image: radial-gradient(white, #e6e6ff) //lavender)
 104
 105 #app
 106   -webkit-font-smoothing: antialiased
 107   -moz-osx-font-smoothing: grayscale
 108
 109 .container
 110   // 45px is footer height
 111   min-height: calc(100vh - 45px)
 112   overflow: hidden
 113   padding: 0
 114   margin: 0
 115
 116 .row > div
 117   padding: 0
 118
 119 a
 120   text-decoration: underline
 121
 122 header
 123   width: 100%
 124   display: flex
 125   align-items: center
 126   justify-content: center
 127   margin: 0 auto
 128
 129 .clickable
 130   cursor: pointer
 131
 132 .text-center
 133   text-align: center
 134
 135 .bold
 136   font-weight: bold
 137
 138 .clearer
 139   clear: both
 140
 141 .button-group
 142   margin: 0
 143
 144 input[type="checkbox"]:focus
 145   outline: 0
 146
 147 input[type=checkbox]:checked:before
 148   top: -5px;
 149   height: 18px
 150
 151 table
 152   display: block
 153   padding: 0
 154   tr > td
 155     cursor: pointer
 156   th, td
 157     padding: 5px
 158
 159 #divSettings
 160   padding: 0 10px 0 0
 161   height: 100%
 162   & > span
 163     padding-right: 5px
 164     vertical-align: middle
 165   & > img
 166     padding: 0
 167     height: 1.2em
 168     vertical-align: middle
 169
 170 @media screen and (max-width: 767px)
 171   table
 172     tr > th, td
 173       font-size: 14px
 174
 175 nav
 176   width: 100%
 177   margin: 0
 178   padding: 0
 179   & > #menuBar
 180     width: 100%
 181     padding: 0
 182     @media screen and (min-width: 768px)
 183       & > #leftMenu
 184         padding: 0
 185         width: 50%
 186         display: inline-flex
 187         align-items: center
 188         justify-content: flex-start
 189         & > a
 190           display: inline-block
 191           text-decoration: none
 192           color: #2c3e50
 193           &.router-link-exact-active
 194             color: #42b983
 195       & > #rightMenu
 196         padding: 0
 197         width: 50%
 198         display: inline-flex
 199         align-items: center
 200         justify-content: flex-end
 201         & > div
 202           display: inline-block
 203     @media screen and (max-width: 767px)
 204       & > #leftMenu
 205         margin-top: 42px
 206         padding-bottom: 5px
 207         & > a
 208           text-decoration: none
 209           color: #2c3e50
 210           &.router-link-exact-active
 211             color: #42b983
 212       & > #rightMenu
 213         padding-top: 5px
 214         border-top: 1px solid darkgrey
 215
 216 @media screen and (max-width: 767px)
 217   nav
 218     height: 42px
 219     border: none
 220     & > label.drawer-toggle
 221       cursor: pointer
 222       position: absolute
 223       top: 0
 224       left: 5px
 225       line-height: 42px
 226       height: 42px
 227       padding: 0
 228     & > label.drawer-toggle:before
 229       font-size: 42px
 230     & > #menuBar
 231       z-index: 5000 //to hide currently selected piece if any
 232
 233 [type="checkbox"].drawer+*
 234   right: -767px
 235
 236 [type=checkbox].drawer+* .drawer-close
 237   top: 0
 238   left: 5px
 239   padding: 0
 240   height: 50px
 241   width: 50px
 242   line-height: 50px
 243
 244 [type=checkbox].drawer+* .drawer-close:before
 245   font-size: 50px
 246
 247 @media screen and (max-width: 767px)
 248   .button-group
 249     flex-direction: row
 250     button:not(:first-child)
 251       border-left: 1px solid var(--button-group-border-color)
 252       border-top: 0
 253
 254 footer
 255   height: 45px
 256   border: 1px solid #ddd
 257   box-sizing: border-box
 258   //background-color: #000033
 259   font-size: 1rem
 260   width: 100%
 261   padding: 0
 262   display: inline-flex
 263   align-items: center
 264   justify-content: center
 265   & > .router-link-exact-active
 266     color: #42b983 !important
 267     text-decoration: none
 268   & > .menuitem
 269     margin: 0 12px
 270     display: inline-flex;
 271     align-self: center;
 272     &:link
 273       color: #2c3e50
 274       text-decoration: none
 275     &:visited, &:hover
 276       color: #2c3e50
 277       text-decoration: none
 278     & > img
 279       height: 1.2em
 280       display: inline-block
 281       margin-left: 5px
 282   & > p
 283     display: inline-block
 284     margin: 0 12px
 285
 286 @media screen and (max-width: 767px)
 287   footer
 288     border: none
 289
 290 @media screen and (max-width: 420px)
 291   .container
 292     min-height: calc(100vh - 55px)
 293   footer
 294     height: 55px
 295     display: block
 296     padding: 5px 0
 297
 298 .menuitem.somenews
 299   color: red
 300   &:link, &:visited, &:hover
 301     color: red
 302 </style>