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