c71ebfc41893f215d3ad027f727d440cb562619e
[vchess.git] / 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')")
28 | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }}
29 #divSettings.clickable(onClick="window.doClick('modalSettings')")
30 span {{ st.tr["Settings"] }}
31 img(src="/images/icons/settings.svg")
32 router-view
33 .row
34 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
35 footer
36 router-link.menuitem(to="/about") {{ st.tr["About"] }}
37 router-link.menuitem#newsMenu(to="/news") {{ st.tr["News"] }}
38 a.menuitem(href="https://discord.gg/a9ZFKBe")
39 span Discord
40 img(src="/images/icons/discord.svg")
41 a.menuitem(href="https://github.com/yagu0/vchess")
42 span {{ st.tr["Code"] }}
43 img(src="/images/icons/github.svg")
44 p.clickable(onClick="window.doClick('modalContact')")
45 | {{ st.tr["Contact"] }}
46 </template>
47
48 <script>
49 import ContactForm from "@/components/ContactForm.vue";
50 import Settings from "@/components/Settings.vue";
51 import UpsertUser from "@/components/UpsertUser.vue";
52 import { store } from "@/store.js";
53 import { ajax } from "@/utils/ajax.js";
54 export default {
55 components: {
56 ContactForm,
57 Settings,
58 UpsertUser
59 },
60 data: function() {
61 return { st: store.state };
62 },
63 mounted: function() {
64 ajax(
65 "/newsts",
66 "GET",
67 {
68 success: (res) => {
69 if (this.st.user.newsRead < res.timestamp)
70 document.getElementById("newsMenu").classList.add("somenews");
71 }
72 }
73 );
74 },
75 methods: {
76 hideDrawer: function(e) {
77 e.preventDefault(); //TODO: why is this needed?
78 document.getElementsByClassName("drawer")[0].checked = false;
79 }
80 }
81 };
82 </script>
83
84 <style lang="sass">
85 html, *
86 font-family: "Open Sans", Arial, sans-serif
87 --a-link-color: darkred
88 --a-visited-color: darkred
89
90 body
91 padding: 0
92 min-width: 320px
93 --fore-color: #1c1e10 //#2c3e50
94 //--back-color: #f2f2f2
95 background-image: radial-gradient(white, #e6e6ff) //lavender)
96
97 #app
98 -webkit-font-smoothing: antialiased
99 -moz-osx-font-smoothing: grayscale
100
101 .container
102 // 45px is footer height
103 min-height: calc(100vh - 45px)
104 overflow: hidden
105 padding: 0
106 margin: 0
107
108 .row > div
109 padding: 0
110
111 header
112 width: 100%
113 display: flex
114 align-items: center
115 justify-content: center
116 margin: 0 auto
117
118 .clickable
119 cursor: pointer
120
121 .text-center
122 text-align: center
123
124 .bold
125 font-weight: bold
126
127 .clearer
128 clear: both
129
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 #divSettings
149 padding: 0 10px 0 0
150 height: 100%
151 & > span
152 vertical-align: middle
153 & > img
154 padding: 0
155 height: 1.2em
156 vertical-align: middle
157
158 @media screen and (max-width: 767px)
159 table
160 tr > th, td
161 font-size: 14px
162
163 nav
164 width: 100%
165 margin: 0
166 padding: 0
167 & > #menuBar
168 width: 100%
169 padding: 0
170 @media screen and (min-width: 768px)
171 & > #leftMenu
172 padding: 0
173 width: 50%
174 display: inline-flex
175 align-items: center
176 justify-content: flex-start
177 & > a
178 display: inline-block
179 color: #2c3e50
180 &.router-link-exact-active
181 color: #42b983
182 & > #rightMenu
183 padding: 0
184 width: 50%
185 display: inline-flex
186 align-items: center
187 justify-content: flex-end
188 & > div
189 display: inline-block
190 @media screen and (max-width: 767px)
191 & > #leftMenu
192 margin-top: 42px
193 padding-bottom: 5px
194 & > a
195 color: #2c3e50
196 &.router-link-exact-active
197 color: #42b983
198 & > #rightMenu
199 padding-top: 5px
200 border-top: 1px solid darkgrey
201
202 @media screen and (max-width: 767px)
203 nav
204 height: 42px
205 border: none
206 & > label.drawer-toggle
207 cursor: pointer
208 position: absolute
209 top: 0
210 left: 5px
211 line-height: 42px
212 height: 42px
213 padding: 0
214 & > label.drawer-toggle:before
215 font-size: 42px
216 & > #menuBar
217 z-index: 5000 //to hide currently selected piece if any
218
219 [type="checkbox"].drawer+*
220 right: -767px
221
222 [type=checkbox].drawer+* .drawer-close
223 top: 0
224 left: 5px
225 padding: 0
226 height: 50px
227 width: 50px
228 line-height: 50px
229
230 [type=checkbox].drawer+* .drawer-close:before
231 font-size: 50px
232
233 @media screen and (max-width: 767px)
234 .button-group
235 flex-direction: row
236 button:not(:first-child)
237 border-left: 1px solid var(--button-group-border-color)
238 border-top: 0
239
240 footer
241 height: 45px
242 border: 1px solid #ddd
243 box-sizing: border-box
244 //background-color: #000033
245 font-size: 1rem
246 width: 100%
247 padding: 0
248 display: inline-flex
249 align-items: center
250 justify-content: center
251 & > .router-link-exact-active
252 color: #42b983 !important
253 text-decoration: none
254 & > .menuitem
255 margin: 0 12px
256 display: inline-flex;
257 align-self: center;
258 &:link
259 color: #2c3e50
260 &:visited, &:hover
261 color: #2c3e50
262 text-decoration: none
263 & > img
264 height: 1.2em
265 display: inline-block
266 margin-left: 5px
267 & > p
268 display: inline-block
269 margin: 0 12px
270
271 @media screen and (max-width: 767px)
272 footer
273 border: none
274
275 @media screen and (max-width: 420px)
276 footer
277 height: 55px
278 display: block
279 padding: 5px 0
280
281 .menuitem.somenews
282 animation: blinkNews 1s infinite;
283 color: red
284 &:link, &:visited, &:hover
285 color: red
286
287 @keyframes blinkNews
288 0%, 49%
289 background-color: yellow
290 padding: 3px
291 50%, 100%
292 background-color: grey
293 padding: 3px
294
295 // Styles for diagrams and board (partial).
296 // TODO: where to put that ?
297
298 .light-square-diag
299 background-color: #e5e5ca
300
301 .dark-square-diag
302 background-color: #6f8f57
303
304 div.board
305 float: left
306 height: 0
307 display: inline-block
308 position: relative
309
310 div.board8
311 width: 12.5%
312 padding-bottom: 12.5%
313
314 div.board10
315 width: 10%
316 padding-bottom: 10%
317
318 div.board11
319 width: 9.09%
320 padding-bottom: 9.1%
321
322 img.piece
323 width: 100%
324
325 img.piece, img.mark-square
326 max-width: 100%
327 height: auto
328 display: block
329
330 img.mark-square
331 opacity: 0.6
332 width: 76%
333 position: absolute
334 top: 12%
335 left: 12%
336 opacity: .7
337
338 .in-shadow
339 filter: brightness(50%)
340 </style>