Commit | Line | Data |
---|---|---|
625022fd | 1 | <template lang="pug"> |
98db2082 | 2 | #app |
98db2082 | 3 | Language |
c66a829b | 4 | Settings |
98db2082 | 5 | ContactForm |
c66a829b | 6 | UpsertUser |
98db2082 | 7 | .container |
98db2082 | 8 | .row |
85e5b5c1 BA |
9 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
10 | // Menu (top of page): | |
89021f18 | 11 | // Left: hall, variants, problems, mygames |
85e5b5c1 BA |
12 | // Right: usermenu, settings, flag |
13 | nav | |
14 | label.drawer-toggle(for="drawerControl") | |
15 | input#drawerControl.drawer(type="checkbox") | |
9a3049f3 | 16 | #menuBar(@click="hideDrawer($event)") |
85e5b5c1 BA |
17 | label.drawer-close(for="drawerControl") |
18 | #leftMenu | |
19 | router-link(to="/") | |
cf2343ce | 20 | | {{ st.tr["Hall"] }} |
ae2c49bb BA |
21 | router-link(to="/mygames") |
22 | | {{ st.tr["My games"] }} | |
85e5b5c1 BA |
23 | router-link(to="/variants") |
24 | | {{ st.tr["Variants"] }} | |
89021f18 BA |
25 | router-link(to="/problems") |
26 | | {{ st.tr["Problems"] }} | |
85e5b5c1 | 27 | #rightMenu |
910d631b | 28 | .clickable(onClick="window.doClick('modalUser')") |
3837d4f7 | 29 | | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }} |
910d631b | 30 | .clickable(onClick="window.doClick('modalSettings')") |
85e5b5c1 | 31 | | {{ st.tr["Settings"] }} |
910d631b BA |
32 | .clickable#flagContainer(onClick="window.doClick('modalLang')") |
33 | img( | |
34 | v-if="!!st.lang" | |
35 | :src="flagImage" | |
36 | ) | |
fb54f098 | 37 | router-view |
604b951e BA |
38 | .row |
39 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 | |
40 | footer | |
41 | router-link.menuitem(to="/about") {{ st.tr["About"] }} | |
42 | router-link.menuitem(to="/news") {{ st.tr["News"] }} | |
910d631b | 43 | p.clickable(onClick="window.doClick('modalContact')") |
604b951e | 44 | | {{ st.tr["Contact"] }} |
625022fd BA |
45 | </template> |
46 | ||
98db2082 | 47 | <script> |
98db2082 BA |
48 | import ContactForm from "@/components/ContactForm.vue"; |
49 | import Language from "@/components/Language.vue"; | |
50 | import Settings from "@/components/Settings.vue"; | |
c66a829b BA |
51 | import UpsertUser from "@/components/UpsertUser.vue"; |
52 | import { store } from "./store.js"; | |
dcd68c41 | 53 | import { processModalClick } from "./utils/modalClick.js"; |
98db2082 | 54 | export default { |
98db2082 BA |
55 | components: { |
56 | ContactForm, | |
57 | Language, | |
58 | Settings, | |
6808d7a1 | 59 | UpsertUser |
c66a829b BA |
60 | }, |
61 | data: function() { | |
62 | return { | |
6808d7a1 | 63 | st: store.state |
c66a829b | 64 | }; |
98db2082 | 65 | }, |
03608482 BA |
66 | computed: { |
67 | flagImage: function() { | |
68 | return `/images/flags/${this.st.lang}.svg`; | |
6808d7a1 | 69 | } |
03608482 | 70 | }, |
dcd68c41 BA |
71 | mounted: function() { |
72 | let dialogs = document.querySelectorAll("div[role='dialog']"); | |
73 | dialogs.forEach(d => { | |
74 | d.addEventListener("click", processModalClick); | |
75 | }); | |
76 | }, | |
4f887105 BA |
77 | methods: { |
78 | hideDrawer: function(e) { | |
6808d7a1 | 79 | if (e.target.innerText == "Forum") return; //external link |
4f887105 BA |
80 | e.preventDefault(); //TODO: why is this needed? |
81 | document.getElementsByClassName("drawer")[0].checked = false; | |
6808d7a1 BA |
82 | } |
83 | } | |
98db2082 BA |
84 | }; |
85 | </script> | |
86 | ||
625022fd | 87 | <style lang="sass"> |
bc093771 BA |
88 | html, * |
89 | font-family: "Open Sans", Arial, sans-serif | |
bc093771 BA |
90 | --a-link-color: black |
91 | --a-visited-color: black | |
dcd68c41 BA |
92 | |
93 | body | |
94 | padding: 0 | |
95 | min-width: 320px | |
83c6c2c9 BA |
96 | --fore-color: #1c1e10 //#2c3e50 |
97 | //--back-color: #f2f2f2 | |
98 | background-image: radial-gradient(white, #e6e6ff) //lavender) | |
dcd68c41 | 99 | |
625022fd | 100 | #app |
625022fd BA |
101 | -webkit-font-smoothing: antialiased |
102 | -moz-osx-font-smoothing: grayscale | |
625022fd | 103 | |
85e5b5c1 | 104 | .container |
604b951e BA |
105 | // 45px is footer height |
106 | min-height: calc(100vh - 45px) | |
dcd68c41 | 107 | overflow: hidden |
bd76b456 BA |
108 | padding: 0 |
109 | margin: 0 | |
85e5b5c1 | 110 | |
fb54f098 BA |
111 | .row > div |
112 | padding: 0 | |
113 | ||
85e5b5c1 BA |
114 | header |
115 | width: 100% | |
116 | display: flex | |
117 | align-items: center | |
118 | justify-content: center | |
119 | margin: 0 auto | |
85e5b5c1 BA |
120 | |
121 | .clickable | |
122 | cursor: pointer | |
123 | ||
dcd68c41 BA |
124 | .text-center |
125 | text-align: center | |
126 | ||
dcd68c41 BA |
127 | .clearer |
128 | clear: both | |
129 | ||
bd76b456 BA |
130 | .button-group |
131 | margin: 0 | |
132 | ||
133 | input[type="checkbox"]:focus | |
134 | outline: 0 | |
135 | ||
136 | input[type=checkbox]:checked:before | |
137 | top: -5px; | |
138 | height: 18px | |
139 | ||
140 | table | |
141 | display: block | |
142 | padding: 0 | |
143 | tr > td | |
144 | cursor: pointer | |
145 | th, td | |
146 | padding: 5px | |
147 | ||
148 | @media screen and (max-width: 767px) | |
149 | table | |
150 | tr > th, td | |
151 | font-size: 14px | |
152 | ||
85e5b5c1 BA |
153 | nav |
154 | width: 100% | |
fb54f098 | 155 | margin: 0 |
85e5b5c1 BA |
156 | padding: 0 |
157 | & > #menuBar | |
158 | width: 100% | |
159 | padding: 0 | |
8c5f5390 BA |
160 | @media screen and (min-width: 768px) |
161 | & > #leftMenu | |
162 | padding: 0 | |
163 | width: 50% | |
164 | display: inline-flex | |
165 | align-items: center | |
166 | justify-content: flex-start | |
167 | & > a | |
168 | display: inline-block | |
169 | color: #2c3e50 | |
170 | &.router-link-exact-active | |
171 | color: #42b983 | |
172 | & > #rightMenu | |
173 | padding: 0 | |
174 | width: 50% | |
175 | display: inline-flex | |
176 | align-items: center | |
177 | justify-content: flex-end | |
178 | & > div | |
179 | display: inline-block | |
180 | &#flagContainer | |
181 | display: inline-flex | |
182 | & > img | |
183 | padding: 0 | |
184 | width: 36px | |
185 | height: 27px | |
186 | @media screen and (max-width: 767px) | |
187 | & > #leftMenu | |
bd76b456 | 188 | margin-top: 42px |
8c5f5390 BA |
189 | padding-bottom: 5px |
190 | & > a | |
191 | color: #2c3e50 | |
192 | &.router-link-exact-active | |
193 | color: #42b983 | |
194 | & > #rightMenu | |
195 | padding-top: 5px | |
196 | border-top: 1px solid darkgrey | |
197 | & > div | |
198 | &#flagContainer | |
199 | display: inline-flex | |
200 | & > img | |
201 | padding: 0 | |
202 | width: 36px | |
203 | height: 27px | |
85e5b5c1 | 204 | |
430a2038 BA |
205 | @media screen and (max-width: 767px) |
206 | nav | |
bd76b456 | 207 | height: 42px |
430a2038 | 208 | border: none |
57c8c2a6 | 209 | & > label.drawer-toggle |
bd76b456 BA |
210 | cursor: pointer |
211 | font-size: 32px | |
89021f18 | 212 | position: absolute |
bd76b456 | 213 | top: -22px |
89021f18 | 214 | //padding: -5px 0 0 10px |
c6913dbc BA |
215 | & > #menuBar |
216 | z-index: 5000 //to hide currently selected piece if any | |
430a2038 | 217 | |
85e5b5c1 BA |
218 | [type="checkbox"].drawer+* |
219 | right: -767px | |
220 | ||
bd76b456 BA |
221 | [type=checkbox].drawer+* .drawer-close |
222 | top: -10px | |
223 | left: var(--universal-margin) | |
224 | right: 0 | |
225 | ||
226 | [type=checkbox].drawer+* .drawer-close:before | |
227 | font-size: 50px | |
228 | ||
dcd68c41 BA |
229 | @media screen and (max-width: 767px) |
230 | .button-group | |
231 | flex-direction: row | |
232 | button:not(:first-child) | |
233 | border-left: 1px solid var(--button-group-border-color) | |
234 | border-top: 0 | |
235 | ||
85e5b5c1 | 236 | footer |
604b951e | 237 | height: 45px |
5701c228 | 238 | border: 1px solid #ddd |
604b951e | 239 | box-sizing: border-box |
85e5b5c1 BA |
240 | //background-color: #000033 |
241 | font-size: 1rem | |
242 | width: 100% | |
604b951e | 243 | padding: 0 |
85e5b5c1 BA |
244 | display: inline-flex |
245 | align-items: center | |
246 | justify-content: center | |
050ae3b5 BA |
247 | & > .router-link-exact-active |
248 | color: #42b983 !important | |
249 | text-decoration: none | |
92a523d1 | 250 | & > .menuitem |
85e5b5c1 | 251 | display: inline-block |
604b951e | 252 | margin: 0 12px |
85e5b5c1 BA |
253 | &:link |
254 | color: #2c3e50 | |
5701c228 BA |
255 | &:visited, &:hover |
256 | color: #2c3e50 | |
85e5b5c1 BA |
257 | text-decoration: none |
258 | & > p | |
259 | display: inline-block | |
604b951e | 260 | margin: 0 12px |
430a2038 BA |
261 | |
262 | @media screen and (max-width: 767px) | |
263 | footer | |
264 | border: none | |
89021f18 BA |
265 | |
266 | // Styles for diagrams and board (partial). | |
267 | // TODO: where to put that ? | |
268 | ||
269 | .light-square-diag | |
270 | background-color: #e5e5ca | |
271 | ||
272 | .dark-square-diag | |
273 | background-color: #6f8f57 | |
274 | ||
275 | div.board | |
276 | float: left | |
277 | height: 0 | |
278 | display: inline-block | |
279 | position: relative | |
280 | ||
281 | div.board8 | |
282 | width: 12.5% | |
283 | padding-bottom: 12.5% | |
284 | ||
285 | div.board10 | |
286 | width: 10% | |
287 | padding-bottom: 10% | |
288 | ||
289 | div.board11 | |
290 | width: 9.09% | |
291 | padding-bottom: 9.1% | |
292 | ||
293 | img.piece | |
294 | width: 100% | |
295 | ||
296 | img.piece, img.mark-square | |
297 | max-width: 100% | |
298 | height: auto | |
299 | display: block | |
300 | ||
301 | img.mark-square | |
302 | opacity: 0.6 | |
303 | width: 76% | |
304 | position: absolute | |
305 | top: 12% | |
306 | left: 12% | |
307 | opacity: .7 | |
308 | ||
309 | .in-shadow | |
310 | filter: brightness(50%) | |
625022fd | 311 | </style> |