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
14 label.drawer-toggle(for="drawerControl")
15 input#drawerControl.drawer(type="checkbox")
16 #menuBar(@click="hideDrawer($event)")
17 label.drawer-close(for="drawerControl")
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"] }}
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")
36 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
38 router-link.menuitem(to="/about") {{ st.tr["About"] }}
39 router-link.menuitem(to="/news") {{ st.tr["News"] }}
40 p.clickable(onClick="doClick('modalContact')")
41 | {{ st.tr["Contact"] }}
45 import ContactForm from "@/components/ContactForm.vue";
46 import Language from "@/components/Language.vue";
47 import Settings from "@/components/Settings.vue";
48 import UpsertUser from "@/components/UpsertUser.vue";
49 import { store } from "./store.js";
50 import { processModalClick } from "./utils/modalClick.js";
64 flagImage: function() {
65 return `/images/flags/${this.st.lang}.svg`;
69 let dialogs = document.querySelectorAll("div[role='dialog']");
70 dialogs.forEach(d => {
71 d.addEventListener("click", processModalClick);
75 hideDrawer: function(e) {
76 if (e.target.innerText == "Forum")
77 return; //external link
78 e.preventDefault(); //TODO: why is this needed?
79 document.getElementsByClassName("drawer")[0].checked = false;
87 font-family: "Open Sans", Arial, sans-serif
89 --a-visited-color: black
94 --fore-color: #1c1e10 //#2c3e50
95 //--back-color: #f2f2f2
96 background-image: radial-gradient(white, #e6e6ff) //lavender)
99 -webkit-font-smoothing: antialiased
100 -moz-osx-font-smoothing: grayscale
103 // 45px is footer height
104 min-height: calc(100vh - 45px)
106 @media screen and (max-width: 767px)
116 justify-content: center
138 @media screen and (min-width: 768px)
144 justify-content: flex-start
146 display: inline-block
148 &.router-link-exact-active
155 justify-content: flex-end
157 display: inline-block
164 @media screen and (max-width: 767px)
169 &.router-link-exact-active
173 border-top: 1px solid darkgrey
182 @media screen and (max-width: 767px)
186 & > label.drawer-toggle
190 //padding: -5px 0 0 10px
192 [type="checkbox"].drawer+*
195 @media screen and (max-width: 767px)
198 button:not(:first-child)
199 border-left: 1px solid var(--button-group-border-color)
204 border: 1px solid #ddd
205 box-sizing: border-box
206 //background-color: #000033
212 justify-content: center
213 & > .router-link-exact-active
214 color: #42b983 !important
215 text-decoration: none
217 display: inline-block
223 text-decoration: none
225 display: inline-block
228 @media screen and (max-width: 767px)
232 // Styles for diagrams and board (partial).
233 // TODO: where to put that ?
236 background-color: #e5e5ca
239 background-color: #6f8f57
244 display: inline-block
249 padding-bottom: 12.5%
262 img.piece, img.mark-square
276 filter: brightness(50%)