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(to="/faq") F.A.Q.
  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   computed: {
  63     userName: function() {
  64       return (
  65         this.st.user.id > 0
  66           ? (this.st.user.name || "@nonymous")
  67           : "Login"
  68       );
  69     }
  70   },
  71   methods: {
  72     hideDrawer: function(e) {
  73       e.preventDefault(); //TODO: why is this needed?
  74       document.getElementsByClassName("drawer")[0].checked = false;
  75     }
  76   }
  77 };
  78 </script>
  79
  80 <style lang="sass">
  81 html, *
  82   font-family: "Open Sans", Arial, sans-serif
  83   --a-link-color: darkred
  84   --a-visited-color: darkred
  85   --card-back-color: #f4f6f6
  86   --button-back-color: #d1d5d5
  87   --table-body-back-color: #f8f8f8
  88
  89 body
  90   padding: 0
  91   min-width: 320px
  92   --fore-color: #1c1e10 //#2c3e50
  93   //--back-color: #f2f2f2
  94   background-image: radial-gradient(white, #e6e6ff) //lavender)
  95
  96 #app
  97   -webkit-font-smoothing: antialiased
  98   -moz-osx-font-smoothing: grayscale
  99
 100 .container
 101   // 45px is footer height
 102   min-height: calc(100vh - 45px)
 103   overflow: hidden
 104   padding: 0
 105   margin: 0
 106
 107 .row > div
 108   padding: 0
 109
 110 a
 111   text-decoration: underline
 112
 113 header
 114   width: 100%
 115   display: flex
 116   align-items: center
 117   justify-content: center
 118   margin: 0 auto
 119
 120 .clickable
 121   cursor: pointer
 122
 123 .text-center
 124   text-align: center
 125
 126 .bold
 127   font-weight: bold
 128
 129 .clearer
 130   clear: both
 131
 132 .button-group
 133   margin: 0
 134
 135 input[type="checkbox"]:focus
 136   outline: 0
 137
 138 input[type=checkbox]:checked:before
 139   top: -5px;
 140   height: 18px
 141
 142 table
 143   display: block
 144   padding: 0
 145   tr > td
 146     cursor: pointer
 147   th, td
 148     padding: 5px
 149
 150 #divSettings
 151   padding: 0 10px 0 0
 152   height: 100%
 153   & > span
 154     padding-right: 5px
 155     vertical-align: middle
 156   & > img
 157     padding: 0
 158     height: 1.2em
 159     vertical-align: middle
 160
 161 @media screen and (max-width: 767px)
 162   table
 163     tr > th, td
 164       font-size: 14px
 165
 166 nav
 167   width: 100%
 168   margin: 0
 169   padding: 0
 170   & > #menuBar
 171     width: 100%
 172     padding: 0
 173     @media screen and (min-width: 768px)
 174       & > #leftMenu
 175         padding: 0
 176         width: 50%
 177         display: inline-flex
 178         align-items: center
 179         justify-content: flex-start
 180         & > a
 181           display: inline-block
 182           text-decoration: none
 183           color: #2c3e50
 184           &.router-link-exact-active
 185             color: #388e3c
 186       & > #rightMenu
 187         padding: 0
 188         width: 50%
 189         display: inline-flex
 190         align-items: center
 191         justify-content: flex-end
 192         & > div
 193           display: inline-block
 194     @media screen and (max-width: 767px)
 195       & > #leftMenu
 196         margin-top: 42px
 197         padding-bottom: 5px
 198         & > a
 199           text-decoration: none
 200           color: #2c3e50
 201           &.router-link-exact-active
 202             color: #388e3c
 203       & > #rightMenu
 204         padding-top: 5px
 205         border-top: 1px solid darkgrey
 206
 207 @media screen and (max-width: 767px)
 208   nav
 209     height: 42px
 210     border: none
 211     & > label.drawer-toggle
 212       cursor: pointer
 213       position: absolute
 214       top: 0
 215       left: 5px
 216       line-height: 42px
 217       height: 42px
 218       padding: 0
 219     & > label.drawer-toggle:before
 220       font-size: 42px
 221     & > #menuBar
 222       z-index: 5000 //to hide currently selected piece if any
 223
 224 [type="checkbox"].drawer+*
 225   right: -767px
 226
 227 [type=checkbox].drawer+* .drawer-close
 228   top: 0
 229   left: 5px
 230   padding: 0
 231   height: 50px
 232   width: 50px
 233   line-height: 50px
 234
 235 [type=checkbox].drawer+* .drawer-close:before
 236   font-size: 50px
 237
 238 @media screen and (max-width: 767px)
 239   .button-group
 240     flex-direction: row
 241     button:not(:first-child)
 242       border-left: 1px solid var(--button-group-border-color)
 243       border-top: 0
 244
 245 footer
 246   height: 45px
 247   border: 1px solid #ddd
 248   box-sizing: border-box
 249   //background-color: #000033
 250   font-size: 1rem
 251   width: 100%
 252   padding: 0
 253   display: inline-flex
 254   align-items: center
 255   justify-content: center
 256   & > .router-link-exact-active
 257     color: #388e3c !important
 258     text-decoration: none
 259   & > .menuitem
 260     margin: 0 12px
 261     display: inline-flex;
 262     align-self: center;
 263     &:link
 264       color: #2c3e50
 265       text-decoration: none
 266     &:visited, &:hover
 267       color: #2c3e50
 268       text-decoration: none
 269     & > img
 270       height: 1.2em
 271       display: inline-block
 272       margin-left: 5px
 273   & > p
 274     display: inline-block
 275     margin: 0 12px
 276
 277 @media screen and (max-width: 767px)
 278   footer
 279     border: none
 280
 281 @media screen and (max-width: 420px)
 282   .container
 283     min-height: calc(100vh - 55px)
 284   footer
 285     height: 55px
 286     display: block
 287     padding: 5px 0
 288 </style>