Add Checkered1 + fix last move highlights
[vchess.git] / client / src / App.vue
CommitLineData
625022fd 1<template lang="pug">
98db2082 2#app
c66a829b 3 Settings
98db2082 4 ContactForm
c66a829b 5 UpsertUser
98db2082 6 .container
98db2082 7 .row
85e5b5c1
BA
8 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
9 // Menu (top of page):
89021f18 10 // Left: hall, variants, problems, mygames
5b3dc10e 11 // Right: usermenu, settings
85e5b5c1
BA
12 nav
13 label.drawer-toggle(for="drawerControl")
14 input#drawerControl.drawer(type="checkbox")
9a3049f3 15 #menuBar(@click="hideDrawer($event)")
85e5b5c1
BA
16 label.drawer-close(for="drawerControl")
17 #leftMenu
18 router-link(to="/")
cf2343ce 19 | {{ st.tr["Hall"] }}
ae2c49bb
BA
20 router-link(to="/mygames")
21 | {{ st.tr["My games"] }}
85e5b5c1
BA
22 router-link(to="/variants")
23 | {{ st.tr["Variants"] }}
89021f18
BA
24 router-link(to="/problems")
25 | {{ st.tr["Problems"] }}
85e5b5c1 26 #rightMenu
2c5d7b20 27 .clickable(onClick="window.doClick('modalUser')") {{ userName }}
5b3dc10e
BA
28 #divSettings.clickable(onClick="window.doClick('modalSettings')")
29 span {{ st.tr["Settings"] }}
b9a5fe01 30 img(src="/images/icons/settings.svg")
fb54f098 31 router-view
604b951e
BA
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"] }}
d9a7a1e4
BA
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")
b0a0468a
BA
40 a.menuitem(href="https://github.com/yagu0/vchess")
41 span {{ st.tr["Code"] }}
42 img(src="/images/icons/github.svg")
910d631b 43 p.clickable(onClick="window.doClick('modalContact')")
604b951e 44 | {{ st.tr["Contact"] }}
625022fd
BA
45</template>
46
98db2082 47<script>
98db2082 48import ContactForm from "@/components/ContactForm.vue";
98db2082 49import Settings from "@/components/Settings.vue";
c66a829b 50import UpsertUser from "@/components/UpsertUser.vue";
42a92848 51import { store } from "@/store.js";
d9a7a1e4 52import { ajax } from "@/utils/ajax.js";
98db2082 53export default {
98db2082
BA
54 components: {
55 ContactForm,
98db2082 56 Settings,
6808d7a1 57 UpsertUser
c66a829b
BA
58 },
59 data: function() {
d9a7a1e4
BA
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 );
98db2082 73 },
2c5d7b20
BA
74 computed: {
75 userName: function() {
76 return (
77 this.st.user.id > 0
78 ? (this.st.user.name || "@nonymous")
79 : "Login"
80 );
81 }
82 },
4f887105
BA
83 methods: {
84 hideDrawer: function(e) {
4f887105
BA
85 e.preventDefault(); //TODO: why is this needed?
86 document.getElementsByClassName("drawer")[0].checked = false;
6808d7a1
BA
87 }
88 }
98db2082
BA
89};
90</script>
91
625022fd 92<style lang="sass">
bc093771
BA
93html, *
94 font-family: "Open Sans", Arial, sans-serif
b0a0468a
BA
95 --a-link-color: darkred
96 --a-visited-color: darkred
dcd68c41
BA
97
98body
99 padding: 0
100 min-width: 320px
83c6c2c9
BA
101 --fore-color: #1c1e10 //#2c3e50
102 //--back-color: #f2f2f2
103 background-image: radial-gradient(white, #e6e6ff) //lavender)
dcd68c41 104
625022fd 105#app
625022fd
BA
106 -webkit-font-smoothing: antialiased
107 -moz-osx-font-smoothing: grayscale
625022fd 108
85e5b5c1 109.container
604b951e
BA
110 // 45px is footer height
111 min-height: calc(100vh - 45px)
dcd68c41 112 overflow: hidden
bd76b456
BA
113 padding: 0
114 margin: 0
85e5b5c1 115
fb54f098
BA
116.row > div
117 padding: 0
118
85e5b5c1
BA
119header
120 width: 100%
121 display: flex
122 align-items: center
123 justify-content: center
124 margin: 0 auto
85e5b5c1
BA
125
126.clickable
127 cursor: pointer
128
dcd68c41
BA
129.text-center
130 text-align: center
131
a17ae317
BA
132.bold
133 font-weight: bold
134
dcd68c41
BA
135.clearer
136 clear: both
137
bd76b456
BA
138.button-group
139 margin: 0
140
141input[type="checkbox"]:focus
142 outline: 0
143
144input[type=checkbox]:checked:before
145 top: -5px;
146 height: 18px
147
148table
149 display: block
150 padding: 0
151 tr > td
152 cursor: pointer
153 th, td
154 padding: 5px
155
5b3dc10e
BA
156#divSettings
157 padding: 0 10px 0 0
158 height: 100%
159 & > span
8423b682 160 padding-right: 5px
5b3dc10e
BA
161 vertical-align: middle
162 & > img
163 padding: 0
d81c26d1 164 height: 1.2em
5b3dc10e
BA
165 vertical-align: middle
166
bd76b456
BA
167@media screen and (max-width: 767px)
168 table
169 tr > th, td
170 font-size: 14px
171
85e5b5c1
BA
172nav
173 width: 100%
fb54f098 174 margin: 0
85e5b5c1
BA
175 padding: 0
176 & > #menuBar
177 width: 100%
178 padding: 0
8c5f5390
BA
179 @media screen and (min-width: 768px)
180 & > #leftMenu
181 padding: 0
182 width: 50%
183 display: inline-flex
184 align-items: center
185 justify-content: flex-start
186 & > a
187 display: inline-block
188 color: #2c3e50
189 &.router-link-exact-active
190 color: #42b983
191 & > #rightMenu
192 padding: 0
193 width: 50%
194 display: inline-flex
195 align-items: center
196 justify-content: flex-end
197 & > div
198 display: inline-block
8c5f5390
BA
199 @media screen and (max-width: 767px)
200 & > #leftMenu
bd76b456 201 margin-top: 42px
8c5f5390
BA
202 padding-bottom: 5px
203 & > a
204 color: #2c3e50
205 &.router-link-exact-active
206 color: #42b983
207 & > #rightMenu
208 padding-top: 5px
209 border-top: 1px solid darkgrey
85e5b5c1 210
430a2038
BA
211@media screen and (max-width: 767px)
212 nav
bd76b456 213 height: 42px
430a2038 214 border: none
57c8c2a6 215 & > label.drawer-toggle
bd76b456 216 cursor: pointer
89021f18 217 position: absolute
57eb158f
BA
218 top: 0
219 left: 5px
220 line-height: 42px
221 height: 42px
b5aa30b5 222 padding: 0
57eb158f
BA
223 & > label.drawer-toggle:before
224 font-size: 42px
c6913dbc
BA
225 & > #menuBar
226 z-index: 5000 //to hide currently selected piece if any
430a2038 227
85e5b5c1
BA
228[type="checkbox"].drawer+*
229 right: -767px
230
bd76b456 231[type=checkbox].drawer+* .drawer-close
b5aa30b5 232 top: 0
57eb158f 233 left: 5px
b5aa30b5 234 padding: 0
57eb158f
BA
235 height: 50px
236 width: 50px
237 line-height: 50px
bd76b456
BA
238
239[type=checkbox].drawer+* .drawer-close:before
240 font-size: 50px
241
dcd68c41
BA
242@media screen and (max-width: 767px)
243 .button-group
244 flex-direction: row
245 button:not(:first-child)
246 border-left: 1px solid var(--button-group-border-color)
247 border-top: 0
248
85e5b5c1 249footer
604b951e 250 height: 45px
5701c228 251 border: 1px solid #ddd
604b951e 252 box-sizing: border-box
85e5b5c1
BA
253 //background-color: #000033
254 font-size: 1rem
255 width: 100%
604b951e 256 padding: 0
85e5b5c1
BA
257 display: inline-flex
258 align-items: center
259 justify-content: center
050ae3b5
BA
260 & > .router-link-exact-active
261 color: #42b983 !important
262 text-decoration: none
92a523d1 263 & > .menuitem
604b951e 264 margin: 0 12px
b0a0468a
BA
265 display: inline-flex;
266 align-self: center;
85e5b5c1
BA
267 &:link
268 color: #2c3e50
5701c228
BA
269 &:visited, &:hover
270 color: #2c3e50
85e5b5c1 271 text-decoration: none
b0a0468a 272 & > img
afd71778 273 height: 1.2em
b0a0468a
BA
274 display: inline-block
275 margin-left: 5px
85e5b5c1
BA
276 & > p
277 display: inline-block
604b951e 278 margin: 0 12px
430a2038
BA
279
280@media screen and (max-width: 767px)
281 footer
282 border: none
89021f18 283
d9a7a1e4 284@media screen and (max-width: 420px)
4ec83d37
BA
285 .container
286 min-height: calc(100vh - 55px)
d9a7a1e4 287 footer
f14572c4 288 height: 55px
d9a7a1e4 289 display: block
f14572c4 290 padding: 5px 0
d9a7a1e4
BA
291
292.menuitem.somenews
293 color: red
294 &:link, &:visited, &:hover
295 color: red
296
89021f18
BA
297// Styles for diagrams and board (partial).
298// TODO: where to put that ?
299
300.light-square-diag
301 background-color: #e5e5ca
302
303.dark-square-diag
304 background-color: #6f8f57
305
306div.board
6e47d367 307 user-select: none
89021f18
BA
308 float: left
309 height: 0
310 display: inline-block
311 position: relative
312
1a3cfdc0
BA
313div.board5
314 width: 20%
315 padding-bottom: 20%
316
89021f18
BA
317div.board8
318 width: 12.5%
319 padding-bottom: 12.5%
320
6f2f9437
BA
321div.board9
322 width: 11.1%
323 padding-bottom: 11.1%
324
89021f18
BA
325div.board10
326 width: 10%
327 padding-bottom: 10%
328
329div.board11
330 width: 9.09%
472c0c4f
BA
331 padding-bottom: 9.09%
332
333div.board12
334 width: 8.33%
335 padding-bottom: 8.33%
89021f18
BA
336
337img.piece
338 width: 100%
339
49dad261 340img.piece, img.mark-square, img.circle-square
89021f18
BA
341 max-width: 100%
342 height: auto
343 display: block
344
345img.mark-square
49dad261 346 opacity: .7
89021f18
BA
347 width: 76%
348 position: absolute
349 top: 12%
350 left: 12%
49dad261
BA
351
352img.circle-square
353 opacity: 0.7
354 width: 100%
355 position: absolute
356 top: 0
357 left: 0
89021f18
BA
358
359.in-shadow
360 filter: brightness(50%)
625022fd 361</style>