8 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
10 // Left: hall, variants, problems, mygames
11 // Right: usermenu, settings
13 label.drawer-toggle(for="drawerControl")
14 input#drawerControl.drawer(type="checkbox")
15 #menuBar(@click="hideDrawer($event)")
16 label.drawer-close(for="drawerControl")
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"] }}
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")
33 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
36 router-link.menuitem(to="/about") {{ st.tr["About"] }}
37 router-link.menuitem(to="/faq") F.A.Q.
38 p.menuitem.clickable(onClick="window.doClick('modalContact')")
39 | {{ st.tr["Contact"] }}
41 a.menuitem(href="https://discord.gg/a9ZFKBe")
43 img.first(src="/images/icons/discord.svg")
44 a.menuitem(href="https://github.com/yagu0/vchess")
45 span {{ st.tr["Code"] }}
46 img(src="/images/icons/github.svg")
47 //a.menuitem(href="https://www.facebook.com/Variants-Chess-Club-112565840437886")
48 img(src="/images/icons/facebook.svg")
49 //a.menuitem(href="https://twitter.com/VchessC")
50 img(src="/images/icons/twitter.svg")
54 import ContactForm from "@/components/ContactForm.vue";
55 import Settings from "@/components/Settings.vue";
56 import UpsertUser from "@/components/UpsertUser.vue";
57 import { store } from "@/store.js";
58 import { ajax } from "@/utils/ajax.js";
66 return { st: store.state };
69 userName: function() {
72 ? (this.st.user.name || "@nonymous")
78 hideDrawer: function(e) {
79 e.preventDefault(); //TODO: why is this needed?
80 document.getElementsByClassName("drawer")[0].checked = false;
88 font-family: "Open Sans", Arial, sans-serif
89 --a-link-color: darkred
90 --a-visited-color: darkred
91 --card-back-color: #f4f6f6
92 --button-back-color: #d1d5d5
93 --table-body-back-color: #f8f8f8
98 --fore-color: #1c1e10 //#2c3e50
99 //--back-color: #f2f2f2
100 background-image: radial-gradient(white, #e6e6ff) //lavender)
103 -webkit-font-smoothing: antialiased
104 -moz-osx-font-smoothing: grayscale
107 // 45px is footer height
108 min-height: calc(100vh - 45px)
117 text-decoration: underline
123 justify-content: center
141 input[type="checkbox"]:focus
144 input[type=checkbox]:checked:before
163 vertical-align: middle
167 vertical-align: middle
169 @media screen and (max-width: 767px)
181 @media screen and (min-width: 768px)
187 justify-content: flex-start
189 display: inline-block
190 text-decoration: none
192 &.router-link-exact-active
199 justify-content: flex-end
201 display: inline-block
202 @media screen and (max-width: 767px)
207 text-decoration: none
209 &.router-link-exact-active
213 border-top: 1px solid darkgrey
215 @media screen and (max-width: 767px)
219 & > label.drawer-toggle
227 & > label.drawer-toggle:before
230 z-index: 5000 //to hide currently selected piece if any
232 [type="checkbox"].drawer+*
235 [type=checkbox].drawer+* .drawer-close
243 [type=checkbox].drawer+* .drawer-close:before
246 @media screen and (max-width: 767px)
249 button:not(:first-child)
250 border-left: 1px solid var(--button-group-border-color)
256 justify-content: flex-end
259 display: inline-block
261 @media screen and (max-width: 500px)
268 justify-content: flex-start
270 @media screen and (max-width: 500px)
275 border: 1px solid #ddd
276 box-sizing: border-box
277 //background-color: #000033
283 & > .left-part > .router-link-exact-active
284 color: #388e3c !important
285 text-decoration: none
292 text-decoration: none
295 text-decoration: none
296 footer > .right-part > a.menuitem > img
297 display: inline-block
303 @media screen and (min-width: 501px)
306 @media screen and (max-width: 767px)
310 @media screen and (max-width: 500px)
312 min-height: calc(100vh - 67px)