Commit | Line | Data |
---|---|---|
89021f18 BA |
1 | <template lang="pug"> |
2 | main | |
910d631b BA |
3 | input#modalNewprob.modal( |
4 | type="checkbox" | |
09d37571 | 5 | @change="fenFocusIfOpened($event)" |
910d631b BA |
6 | ) |
7 | div#newprobDiv( | |
8 | role="dialog" | |
9 | data-checkbox="modalNewprob" | |
10 | ) | |
866842c3 | 11 | .card |
89021f18 | 12 | label#closeNewprob.modal-close(for="modalNewprob") |
604b951e BA |
13 | fieldset |
14 | label(for="selectVariant") {{ st.tr["Variant"] }} | |
15 | select#selectVariant( | |
16 | v-model="curproblem.vid" | |
17 | @change="changeVariant(curproblem)" | |
18 | ) | |
19 | option( | |
20 | v-for="v in [emptyVar].concat(st.variants)" | |
e75718fc | 21 | v-if="!v.noProblems" |
604b951e BA |
22 | :value="v.id" |
23 | :selected="curproblem.vid==v.id" | |
24 | ) | |
25 | | {{ v.name }} | |
26 | fieldset | |
604b951e BA |
27 | input#inputFen( |
28 | type="text" | |
bd76b456 | 29 | placeholder="FEN" |
604b951e BA |
30 | v-model="curproblem.fen" |
31 | @input="trySetDiagram(curproblem)" | |
32 | ) | |
bd76b456 | 33 | #diagram(v-html="curproblem.diag") |
604b951e | 34 | fieldset |
bd76b456 | 35 | textarea( |
604b951e BA |
36 | :placeholder="st.tr['Instructions']" |
37 | v-model="curproblem.instruction" | |
38 | ) | |
39 | p(v-html="parseHtml(curproblem.instruction)") | |
40 | fieldset | |
bd76b456 | 41 | textarea( |
604b951e BA |
42 | :placeholder="st.tr['Solution']" |
43 | v-model="curproblem.solution" | |
44 | ) | |
45 | p(v-html="parseHtml(curproblem.solution)") | |
46 | button(@click="sendProblem()") {{ st.tr["Send"] }} | |
89021f18 | 47 | #dialog.text-center {{ st.tr[infoMsg] }} |
604b951e | 48 | .row(v-if="showOne") |
866842c3 | 49 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
bd76b456 | 50 | #topPage |
2c5d7b20 | 51 | .button-group(v-if="canIedit(curproblem.uid)") |
d7c00f6a BA |
52 | button(@click="editProblem(curproblem)") {{ st.tr["Edit"] }} |
53 | button(@click="deleteProblem(curproblem)") {{ st.tr["Delete"] }} | |
2f258c37 | 54 | span.vname {{ curproblem.vname }} |
98fb976e | 55 | span.uname ({{ curproblem.uname }}) |
bd76b456 | 56 | button.marginleft(@click="backToList()") {{ st.tr["Back to list"] }} |
01fba77c | 57 | button.nomargin(@click="gotoPrevNext(curproblem,1)") |
d85f259c | 58 | | {{ st.tr["Previous_p"] }} |
01fba77c | 59 | button.nomargin(@click="gotoPrevNext(curproblem,-1)") |
feaf1bf7 | 60 | | {{ st.tr["Next_p"] }} |
866842c3 | 61 | p.oneInstructions.clickable( |
2f258c37 | 62 | v-html="parseHtml(curproblem.instruction)" |
bd76b456 BA |
63 | @click="curproblem.showSolution=!curproblem.showSolution" |
64 | ) | |
604b951e BA |
65 | | {{ st.tr["Show solution"] }} |
66 | p( | |
67 | v-show="curproblem.showSolution" | |
68 | v-html="parseHtml(curproblem.solution)" | |
69 | ) | |
70 | .row(v-else) | |
89021f18 | 71 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
bd76b456 | 72 | #controls |
f37790f7 | 73 | button#newProblem(@click="prepareNewProblem()") |
bd76b456 | 74 | | {{ st.tr["New problem"] }} |
84fc0f02 BA |
75 | div#myProblems(v-if="st.user.id > 0") |
76 | label(for="checkboxMine") {{ st.tr["My problems"] }} | |
77 | input#checkboxMine( | |
78 | type="checkbox" | |
79 | v-model="onlyMine" | |
80 | ) | |
bd76b456 BA |
81 | label(for="selectVariant") {{ st.tr["Variant"] }} |
82 | select#selectVariant(v-model="selectedVar") | |
83 | option( | |
84 | v-for="v in [emptyVar].concat(st.variants)" | |
2c5d7b20 | 85 | v-if="!v.noProblems" |
bd76b456 BA |
86 | :value="v.id" |
87 | ) | |
88 | | {{ v.name }} | |
9b35f4a9 | 89 | table#tProblems |
bd76b456 BA |
90 | tr |
91 | th {{ st.tr["Variant"] }} | |
92 | th {{ st.tr["Instructions"] }} | |
2f258c37 | 93 | th {{ st.tr["Number"] }} |
bd76b456 | 94 | tr( |
84fc0f02 BA |
95 | v-for="p in problems[onlyMine ? 'mine' : 'others']" |
96 | v-show="onlyMine || !selectedVar || p.vid == selectedVar" | |
bd76b456 BA |
97 | @click="setHrefPid(p)" |
98 | ) | |
99 | td {{ p.vname }} | |
2f258c37 BA |
100 | td {{ firstChars(p.instruction) }} |
101 | td {{ p.id }} | |
68e19a44 | 102 | button#loadMoreBtn( |
84fc0f02 BA |
103 | v-if="hasMore[onlyMine ? 'mine' : 'others']" |
104 | @click="loadMore(onlyMine ? 'mine' : 'others')" | |
68e19a44 BA |
105 | ) |
106 | | {{ st.tr["Load more"] }} | |
910d631b | 107 | BaseGame( |
b1e46b33 | 108 | ref="basegame" |
910d631b BA |
109 | v-if="showOne" |
110 | :game="game" | |
910d631b | 111 | ) |
89021f18 BA |
112 | </template> |
113 | ||
114 | <script> | |
115 | import { store } from "@/store"; | |
116 | import { ajax } from "@/utils/ajax"; | |
117 | import { checkProblem } from "@/data/problemCheck"; | |
118 | import { getDiagram } from "@/utils/printDiagram"; | |
bd76b456 BA |
119 | import { processModalClick } from "@/utils/modalClick"; |
120 | import { ArrayFun } from "@/utils/array"; | |
604b951e | 121 | import BaseGame from "@/components/BaseGame.vue"; |
89021f18 BA |
122 | export default { |
123 | name: "my-problems", | |
604b951e | 124 | components: { |
6808d7a1 | 125 | BaseGame |
604b951e | 126 | }, |
89021f18 BA |
127 | data: function() { |
128 | return { | |
604b951e | 129 | st: store.state, |
89021f18 BA |
130 | emptyVar: { |
131 | vid: 0, | |
6808d7a1 | 132 | vname: "" |
89021f18 | 133 | }, |
604b951e BA |
134 | // Problem currently showed, or edited: |
135 | curproblem: { | |
136 | id: 0, //used in case of edit | |
89021f18 BA |
137 | vid: 0, |
138 | fen: "", | |
604b951e | 139 | diag: "", |
89021f18 BA |
140 | instruction: "", |
141 | solution: "", | |
6808d7a1 | 142 | showSolution: false |
89021f18 | 143 | }, |
604b951e BA |
144 | loadedVar: 0, //corresponding to loaded V |
145 | selectedVar: 0, //to filter problems based on variant | |
84fc0f02 | 146 | problems: { "mine": [], "others": [] }, |
68e19a44 | 147 | // timestamp of oldest showed problem: |
84fc0f02 | 148 | cursor: { |
934f7f70 BA |
149 | mine: Number.MAX_SAFE_INTEGER, |
150 | others: Number.MAX_SAFE_INTEGER | |
84fc0f02 | 151 | }, |
68e19a44 | 152 | // hasMore == TRUE: a priori there could be more problems to load |
934f7f70 | 153 | hasMore: { mine: true, others: true }, |
84fc0f02 | 154 | onlyMine: false, |
604b951e | 155 | showOne: false, |
89021f18 | 156 | infoMsg: "", |
2c5d7b20 | 157 | admins: [1], //hard-coded for now. TODO |
604b951e | 158 | game: { |
6808d7a1 BA |
159 | players: [{ name: "Problem" }, { name: "Problem" }], |
160 | mode: "analyze" | |
161 | } | |
89021f18 BA |
162 | }; |
163 | }, | |
164 | created: function() { | |
84fc0f02 BA |
165 | const pid = this.$route.query["id"]; |
166 | if (!!pid) this.showProblem(pid); | |
167 | else this.loadMore("others", () => { this.loadMore("mine"); }); | |
89021f18 | 168 | }, |
bd76b456 | 169 | mounted: function() { |
42a92848 | 170 | document.getElementById("newprobDiv") |
6808d7a1 | 171 | .addEventListener("click", processModalClick); |
bd76b456 | 172 | }, |
604b951e BA |
173 | watch: { |
174 | // st.variants changes only once, at loading from [] to [...] | |
6808d7a1 | 175 | "st.variants": function() { |
604b951e | 176 | // Set problems vname (either all are set or none) |
84fc0f02 BA |
177 | let problems = this.problems["others"].concat(this.problems["mine"]); |
178 | if (problems.length > 0 && problems[0].vname == "") | |
179 | problems.forEach(p => this.setVname(p)); | |
604b951e | 180 | }, |
6808d7a1 | 181 | $route: function(to) { |
bd76b456 | 182 | const pid = to.query["id"]; |
84fc0f02 BA |
183 | if (!!pid) this.showProblem(pid); |
184 | else { | |
185 | if (this.cursor["others"] == Number.MAX_SAFE_INTEGER) | |
186 | // Back from a single problem view at initial loading: | |
187 | // problems lists are empty! | |
188 | this.loadMore("others", () => { this.loadMore("mine"); }); | |
189 | this.showOne = false; | |
190 | } | |
6808d7a1 | 191 | } |
98fb976e | 192 | }, |
89021f18 | 193 | methods: { |
09d37571 BA |
194 | fenFocusIfOpened: function(event) { |
195 | if (event.target.checked) { | |
196 | this.infoMsg = ""; | |
197 | document.getElementById("inputFen").focus(); | |
198 | } | |
199 | }, | |
604b951e BA |
200 | setVname: function(prob) { |
201 | prob.vname = this.st.variants.find(v => v.id == prob.vid).name; | |
202 | }, | |
68e19a44 BA |
203 | // Add vname and user names: |
204 | decorate: function(problems, callback) { | |
205 | if (this.st.variants.length > 0) | |
206 | problems.forEach(p => this.setVname(p)); | |
207 | // Retrieve all problems' authors' names | |
208 | let names = {}; | |
209 | problems.forEach(p => { | |
210 | if (p.uid != this.st.user.id) names[p.uid] = ""; | |
211 | else p.uname = this.st.user.name; | |
212 | }); | |
213 | if (Object.keys(names).length > 0) { | |
214 | ajax( | |
215 | "/users", | |
216 | "GET", | |
217 | { | |
218 | data: { ids: Object.keys(names).join(",") }, | |
219 | success: (res2) => { | |
220 | res2.users.forEach(u => { | |
221 | names[u.id] = u.name; | |
222 | }); | |
223 | problems.forEach(p => { | |
224 | if (!p.uname) | |
225 | p.uname = names[p.uid]; | |
226 | }); | |
227 | if (!!callback) callback(); | |
228 | } | |
229 | } | |
230 | ); | |
231 | } else if (!!callback) callback(); | |
232 | }, | |
2f258c37 BA |
233 | firstChars: function(text) { |
234 | let preparedText = text | |
235 | // Replace line jumps and <br> by spaces | |
6808d7a1 BA |
236 | .replace(/\n/g, " ") |
237 | .replace(/<br\/?>/g, " ") | |
2f258c37 BA |
238 | .replace(/<[^>]+>/g, "") //remove remaining HTML tags |
239 | .replace(/[ ]+/g, " ") //remove series of spaces by only one | |
240 | .trim(); | |
241 | const maxLength = 32; //arbitrary... | |
242 | if (preparedText.length > maxLength) | |
6808d7a1 | 243 | return preparedText.substr(0, 32) + "..."; |
2f258c37 BA |
244 | return preparedText; |
245 | }, | |
604b951e | 246 | copyProblem: function(p1, p2) { |
6808d7a1 | 247 | for (let key in p1) p2[key] = p1[key]; |
604b951e | 248 | }, |
bd76b456 BA |
249 | setHrefPid: function(p) { |
250 | // Change href => $route changes, watcher notices, call showProblem | |
251 | const curHref = document.location.href; | |
252 | document.location.href = curHref.split("?")[0] + "?id=" + p.id; | |
253 | }, | |
254 | backToList: function() { | |
255 | // Change href => $route change, watcher notices, reset showOne to false | |
256 | document.location.href = document.location.href.split("?")[0]; | |
257 | }, | |
604b951e BA |
258 | resetCurProb: function() { |
259 | this.curproblem.id = 0; | |
260 | this.curproblem.uid = 0; | |
261 | this.curproblem.vid = ""; | |
262 | this.curproblem.vname = ""; | |
263 | this.curproblem.fen = ""; | |
264 | this.curproblem.diag = ""; | |
265 | this.curproblem.instruction = ""; | |
266 | this.curproblem.solution = ""; | |
267 | this.curproblem.showSolution = false; | |
89021f18 | 268 | }, |
604b951e BA |
269 | parseHtml: function(txt) { |
270 | return !txt.match(/<[/a-zA-Z]+>/) | |
271 | ? txt.replace(/\n/g, "<br/>") //no HTML tag | |
272 | : txt; | |
273 | }, | |
274 | changeVariant: function(prob) { | |
275 | this.setVname(prob); | |
6808d7a1 BA |
276 | this.loadVariant(prob.vid, () => { |
277 | // Set FEN if possible (might not be correct yet) | |
278 | if (V.IsGoodFen(prob.fen)) this.setDiagram(prob); | |
6f2f9437 | 279 | else prob.diag = ""; |
6808d7a1 | 280 | }); |
604b951e BA |
281 | }, |
282 | loadVariant: async function(vid, cb) { | |
283 | // Condition: vid is a valid variant ID | |
284 | this.loadedVar = 0; | |
285 | const variant = this.st.variants.find(v => v.id == vid); | |
32f6285e BA |
286 | await import("@/variants/" + variant.name + ".js") |
287 | .then((vModule) => { | |
288 | window.V = vModule[variant.name + "Rules"]; | |
289 | this.loadedVar = vid; | |
290 | cb(); | |
291 | }); | |
604b951e BA |
292 | }, |
293 | trySetDiagram: function(prob) { | |
294 | // Problem edit: FEN could be wrong or incomplete, | |
295 | // variant could not be ready, or not defined | |
296 | if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen)) | |
297 | this.setDiagram(prob); | |
6f2f9437 | 298 | else prob.diag = ""; |
89021f18 | 299 | }, |
604b951e BA |
300 | setDiagram: function(prob) { |
301 | // Condition: prob.fen is correct and global V is ready | |
302 | const parsedFen = V.ParseFen(prob.fen); | |
303 | const args = { | |
304 | position: parsedFen.position, | |
6808d7a1 | 305 | orientation: parsedFen.turn |
604b951e BA |
306 | }; |
307 | prob.diag = getDiagram(args); | |
89021f18 | 308 | }, |
84fc0f02 BA |
309 | showProblem: function(p_id) { |
310 | const processWhenWeHaveProb = () => { | |
311 | this.loadVariant(p.vid, () => { | |
312 | this.onlyMine = (p.uid == this.st.user.id); | |
313 | // The FEN is already checked at this stage: | |
314 | this.game.vname = p.vname; | |
315 | this.game.mycolor = V.ParseFen(p.fen).turn; //diagram orientation | |
316 | this.game.fenStart = p.fen; | |
317 | this.game.fen = p.fen; | |
318 | this.showOne = true; | |
319 | // $nextTick to be sure $refs["basegame"] exists | |
320 | this.$nextTick(() => { | |
321 | this.$refs["basegame"].re_setVariables(this.game); }); | |
322 | this.copyProblem(p, this.curproblem); | |
323 | }); | |
324 | }; | |
325 | let p = undefined; | |
326 | if (typeof p_id == "object") p = p_id; | |
327 | else { | |
328 | const problems = this.problems["others"].concat(this.problems["mine"]); | |
329 | p = problems.find(prob => prob.id == p_id); | |
330 | } | |
331 | if (!p) { | |
332 | // Bad luck: problem not in list. Get from server | |
333 | ajax( | |
334 | "/problems", | |
335 | "GET", | |
336 | { | |
337 | data: { id: p_id }, | |
338 | success: (res) => { | |
339 | this.decorate([res.problem], () => { | |
340 | p = res.problem; | |
341 | const mode = (p.uid == this.st.user.id ? "mine" : "others"); | |
342 | this.problems[mode].push(p); | |
343 | processWhenWeHaveProb(); | |
344 | }); | |
345 | } | |
346 | } | |
347 | ); | |
348 | } else processWhenWeHaveProb(); | |
604b951e | 349 | }, |
01fba77c | 350 | gotoPrevNext: function(prob, dir) { |
84fc0f02 BA |
351 | const mode = (this.onlyMine ? "mine" : "others"); |
352 | const problems = this.problems[mode]; | |
353 | const startIdx = problems.findIndex(p => p.id == prob.id); | |
354 | const nextIdx = startIdx + dir; | |
355 | if (nextIdx >= 0 && nextIdx < problems.length) | |
356 | this.setHrefPid(problems[nextIdx]); | |
01fba77c BA |
357 | else if (this.hasMore[mode]) { |
358 | this.loadMore( | |
359 | mode, | |
360 | (nbProbs) => { | |
361 | if (nbProbs > 0) this.gotoPrevNext(prob, dir); | |
362 | else alert(this.st.tr["No more problems"]); | |
363 | } | |
364 | ); | |
365 | } | |
84fc0f02 | 366 | else alert(this.st.tr["No more problems"]); |
d7c00f6a | 367 | }, |
f37790f7 BA |
368 | prepareNewProblem: function() { |
369 | this.resetCurProb(); | |
370 | window.doClick("modalNewprob"); | |
371 | }, | |
604b951e BA |
372 | sendProblem: function() { |
373 | const error = checkProblem(this.curproblem); | |
6808d7a1 | 374 | if (error) { |
866842c3 | 375 | alert(this.st.tr[error]); |
6808d7a1 BA |
376 | return; |
377 | } | |
604b951e BA |
378 | const edit = this.curproblem.id > 0; |
379 | this.infoMsg = "Processing... Please wait"; | |
380 | ajax( | |
381 | "/problems", | |
382 | edit ? "PUT" : "POST", | |
e57c4de4 BA |
383 | { |
384 | data: { prob: this.curproblem }, | |
385 | success: (ret) => { | |
386 | if (edit) { | |
2c5d7b20 BA |
387 | let editedP = this.problems["mine"] |
388 | .find(p => p.id == this.curproblem.id); | |
389 | if (!editedP) | |
390 | // I'm an admin and edit another user' problem | |
391 | editedP = this.problems["others"] | |
392 | .find(p => p.id == this.curproblem.id); | |
e57c4de4 BA |
393 | this.copyProblem(this.curproblem, editedP); |
394 | this.showProblem(editedP); | |
395 | } | |
396 | else { | |
397 | let newProblem = Object.assign({}, this.curproblem); | |
398 | newProblem.id = ret.id; | |
399 | newProblem.uid = this.st.user.id; | |
400 | newProblem.uname = this.st.user.name; | |
2c5d7b20 BA |
401 | this.problems["mine"] = |
402 | [newProblem].concat(this.problems["mine"]); | |
e57c4de4 BA |
403 | } |
404 | document.getElementById("modalNewprob").checked = false; | |
405 | this.infoMsg = ""; | |
0cd02605 | 406 | } |
604b951e BA |
407 | } |
408 | ); | |
409 | }, | |
2c5d7b20 BA |
410 | canIedit: function(puid) { |
411 | return this.admins.concat([puid]).includes(this.st.user.id); | |
412 | }, | |
604b951e | 413 | editProblem: function(prob) { |
bec548e7 BA |
414 | // prob.diag might correspond to some other problem or be empty: |
415 | this.setDiagram(prob); //V is loaded at this stage | |
604b951e | 416 | this.copyProblem(prob, this.curproblem); |
6808d7a1 | 417 | window.doClick("modalNewprob"); |
604b951e BA |
418 | }, |
419 | deleteProblem: function(prob) { | |
6808d7a1 | 420 | if (confirm(this.st.tr["Are you sure?"])) { |
e57c4de4 BA |
421 | ajax( |
422 | "/problems", | |
423 | "DELETE", | |
424 | { | |
425 | data: { id: prob.id }, | |
426 | success: () => { | |
84fc0f02 BA |
427 | const mode = prob.uid == (this.st.user.id ? "mine" : "others"); |
428 | ArrayFun.remove(this.problems[mode], p => p.id == prob.id); | |
e57c4de4 BA |
429 | this.backToList(); |
430 | } | |
431 | } | |
432 | ); | |
bd76b456 | 433 | } |
68e19a44 | 434 | }, |
84fc0f02 | 435 | loadMore: function(mode, cb) { |
68e19a44 BA |
436 | ajax( |
437 | "/problems", | |
438 | "GET", | |
439 | { | |
84fc0f02 BA |
440 | data: { |
441 | uid: this.st.user.id, | |
442 | mode: mode, | |
443 | cursor: this.cursor[mode] | |
444 | }, | |
68e19a44 BA |
445 | success: (res) => { |
446 | const L = res.problems.length; | |
447 | if (L > 0) { | |
84fc0f02 BA |
448 | this.cursor[mode] = res.problems[L - 1].added; |
449 | // Remove potential duplicates: | |
450 | const pids = this.problems[mode].map(p => p.id); | |
451 | ArrayFun.remove(res.problems, p => pids.includes(p.id), "all"); | |
68e19a44 | 452 | this.decorate(res.problems); |
01fba77c BA |
453 | this.problems[mode] = |
454 | this.problems[mode].concat(res.problems) | |
455 | // TODO: problems are alrady sorted, would just need to insert | |
456 | // the current individual problem in list; more generally | |
457 | // there is probably only one misclassified problem. | |
458 | // (Unless the user navigated several times by URL to show a | |
459 | // single problem...) | |
460 | .sort((p1, p2) => p2.added - p1.added); | |
84fc0f02 | 461 | } else this.hasMore[mode] = false; |
01fba77c | 462 | if (!!cb) cb(L); |
68e19a44 BA |
463 | } |
464 | } | |
465 | ); | |
6808d7a1 BA |
466 | } |
467 | } | |
89021f18 BA |
468 | }; |
469 | </script> | |
470 | ||
471 | <style lang="sass" scoped> | |
bd76b456 BA |
472 | [type="checkbox"].modal+div .card |
473 | max-width: 767px | |
474 | max-height: 100% | |
910d631b | 475 | |
bd76b456 BA |
476 | #inputFen |
477 | width: 100% | |
910d631b | 478 | |
bd76b456 BA |
479 | textarea |
480 | width: 100% | |
910d631b | 481 | |
bd76b456 BA |
482 | #diagram |
483 | margin: 0 auto | |
484 | max-width: 400px | |
910d631b | 485 | |
9b35f4a9 BA |
486 | table#tProblems |
487 | max-height: 100% | |
488 | ||
68e19a44 BA |
489 | button#loadMoreBtn |
490 | display: block | |
491 | margin: 0 auto | |
492 | ||
bd76b456 BA |
493 | #controls |
494 | margin: 0 | |
495 | width: 100% | |
496 | text-align: center | |
497 | & > * | |
498 | margin: 0 | |
2f258c37 | 499 | |
866842c3 BA |
500 | p.oneInstructions |
501 | margin: 0 | |
502 | padding: 2px 5px | |
503 | background-color: lightgreen | |
504 | ||
84fc0f02 BA |
505 | #myProblems |
506 | display: inline-block | |
507 | ||
bd76b456 | 508 | #topPage |
2f258c37 | 509 | span.vname |
bd76b456 | 510 | font-weight: bold |
feae89d3 | 511 | padding-left: var(--universal-margin) |
2f258c37 BA |
512 | span.uname |
513 | padding-left: var(--universal-margin) | |
bd76b456 BA |
514 | margin: 0 auto |
515 | & > .nomargin | |
516 | margin: 0 | |
517 | & > .marginleft | |
518 | margin: 0 0 0 15px | |
519 | ||
2f258c37 BA |
520 | @media screen and (max-width: 767px) |
521 | #topPage | |
522 | text-align: center | |
89021f18 | 523 | </style> |