Fix mistakes
[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"] }}
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
48import ContactForm from "@/components/ContactForm.vue";
49import Language from "@/components/Language.vue";
50import Settings from "@/components/Settings.vue";
c66a829b
BA
51import UpsertUser from "@/components/UpsertUser.vue";
52import { store } from "./store.js";
dcd68c41 53import { processModalClick } from "./utils/modalClick.js";
98db2082 54export 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
88html, *
89 font-family: "Open Sans", Arial, sans-serif
bc093771
BA
90 --a-link-color: black
91 --a-visited-color: black
dcd68c41
BA
92
93body
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
114header
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
133input[type="checkbox"]:focus
134 outline: 0
135
136input[type=checkbox]:checked:before
137 top: -5px;
138 height: 18px
139
140table
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
153nav
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 236footer
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
275div.board
276 float: left
277 height: 0
278 display: inline-block
279 position: relative
280
281div.board8
282 width: 12.5%
283 padding-bottom: 12.5%
284
285div.board10
286 width: 10%
287 padding-bottom: 10%
288
289div.board11
290 width: 9.09%
291 padding-bottom: 9.1%
292
293img.piece
294 width: 100%
295
296img.piece, img.mark-square
297 max-width: 100%
298 height: auto
299 display: block
300
301img.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>