Add New Zealand Chess
[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
6062e559
BA
35 .left-part
36 router-link.menuitem(to="/about") {{ st.tr["About"] }}
37 router-link.menuitem(to="/faq") F.A.Q.
38 p.menuitem.clickable(onClick="window.doClick('modalContact')")
39 | {{ st.tr["Contact"] }}
40 .right-part
41 a.menuitem(href="https://discord.gg/a9ZFKBe")
15762165 42 span Discord
6062e559
BA
43 img.first(src="/images/icons/discord.svg")
44 a.menuitem(href="https://github.com/yagu0/vchess")
15762165 45 span {{ st.tr["Code"] }}
6062e559 46 img(src="/images/icons/github.svg")
15762165 47 //a.menuitem(href="https://www.facebook.com/Variants-Chess-Club-112565840437886")
6062e559 48 img(src="/images/icons/facebook.svg")
15762165 49 //a.menuitem(href="https://twitter.com/VchessC")
6062e559 50 img(src="/images/icons/twitter.svg")
625022fd
BA
51</template>
52
98db2082 53<script>
98db2082 54import ContactForm from "@/components/ContactForm.vue";
98db2082 55import Settings from "@/components/Settings.vue";
c66a829b 56import UpsertUser from "@/components/UpsertUser.vue";
42a92848 57import { store } from "@/store.js";
d9a7a1e4 58import { ajax } from "@/utils/ajax.js";
98db2082 59export default {
98db2082
BA
60 components: {
61 ContactForm,
98db2082 62 Settings,
6808d7a1 63 UpsertUser
c66a829b
BA
64 },
65 data: function() {
d9a7a1e4
BA
66 return { st: store.state };
67 },
2c5d7b20
BA
68 computed: {
69 userName: function() {
70 return (
71 this.st.user.id > 0
72 ? (this.st.user.name || "@nonymous")
73 : "Login"
74 );
75 }
76 },
4f887105
BA
77 methods: {
78 hideDrawer: function(e) {
4f887105
BA
79 e.preventDefault(); //TODO: why is this needed?
80 document.getElementsByClassName("drawer")[0].checked = false;
6808d7a1
BA
81 }
82 }
98db2082
BA
83};
84</script>
85
625022fd 86<style lang="sass">
bc093771
BA
87html, *
88 font-family: "Open Sans", Arial, sans-serif
b0a0468a
BA
89 --a-link-color: darkred
90 --a-visited-color: darkred
5fbc0680
BA
91 --card-back-color: #f4f6f6
92 --button-back-color: #d1d5d5
956407c4 93 --table-body-back-color: #f8f8f8
dcd68c41
BA
94
95body
96 padding: 0
97 min-width: 320px
83c6c2c9
BA
98 --fore-color: #1c1e10 //#2c3e50
99 //--back-color: #f2f2f2
100 background-image: radial-gradient(white, #e6e6ff) //lavender)
dcd68c41 101
625022fd 102#app
625022fd
BA
103 -webkit-font-smoothing: antialiased
104 -moz-osx-font-smoothing: grayscale
625022fd 105
85e5b5c1 106.container
604b951e
BA
107 // 45px is footer height
108 min-height: calc(100vh - 45px)
dcd68c41 109 overflow: hidden
bd76b456
BA
110 padding: 0
111 margin: 0
85e5b5c1 112
fb54f098
BA
113.row > div
114 padding: 0
115
07052665
BA
116a
117 text-decoration: underline
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
0705a80c 145 top: -5px
bd76b456
BA
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
9a1e3abe
BA
160 padding-top: 0
161 padding-bottom: 0
162 padding-right: 5px
5b3dc10e
BA
163 vertical-align: middle
164 & > img
165 padding: 0
d81c26d1 166 height: 1.2em
5b3dc10e
BA
167 vertical-align: middle
168
bd76b456
BA
169@media screen and (max-width: 767px)
170 table
171 tr > th, td
172 font-size: 14px
173
85e5b5c1
BA
174nav
175 width: 100%
fb54f098 176 margin: 0
85e5b5c1
BA
177 padding: 0
178 & > #menuBar
179 width: 100%
180 padding: 0
8c5f5390
BA
181 @media screen and (min-width: 768px)
182 & > #leftMenu
183 padding: 0
184 width: 50%
185 display: inline-flex
186 align-items: center
187 justify-content: flex-start
188 & > a
189 display: inline-block
07052665 190 text-decoration: none
8c5f5390
BA
191 color: #2c3e50
192 &.router-link-exact-active
5fbc0680 193 color: #388e3c
8c5f5390
BA
194 & > #rightMenu
195 padding: 0
196 width: 50%
197 display: inline-flex
198 align-items: center
199 justify-content: flex-end
200 & > div
201 display: inline-block
8c5f5390
BA
202 @media screen and (max-width: 767px)
203 & > #leftMenu
bd76b456 204 margin-top: 42px
8c5f5390 205 padding-bottom: 5px
26d8a01a
BA
206 & > a
207 text-decoration: none
208 color: #2c3e50
209 &.router-link-exact-active
5fbc0680 210 color: #388e3c
8c5f5390
BA
211 & > #rightMenu
212 padding-top: 5px
213 border-top: 1px solid darkgrey
85e5b5c1 214
430a2038
BA
215@media screen and (max-width: 767px)
216 nav
bd76b456 217 height: 42px
430a2038 218 border: none
57c8c2a6 219 & > label.drawer-toggle
bd76b456 220 cursor: pointer
89021f18 221 position: absolute
57eb158f
BA
222 top: 0
223 left: 5px
224 line-height: 42px
225 height: 42px
b5aa30b5 226 padding: 0
57eb158f
BA
227 & > label.drawer-toggle:before
228 font-size: 42px
c6913dbc
BA
229 & > #menuBar
230 z-index: 5000 //to hide currently selected piece if any
430a2038 231
85e5b5c1
BA
232[type="checkbox"].drawer+*
233 right: -767px
234
bd76b456 235[type=checkbox].drawer+* .drawer-close
b5aa30b5 236 top: 0
57eb158f 237 left: 5px
b5aa30b5 238 padding: 0
57eb158f
BA
239 height: 50px
240 width: 50px
241 line-height: 50px
bd76b456
BA
242
243[type=checkbox].drawer+* .drawer-close:before
244 font-size: 50px
245
dcd68c41
BA
246@media screen and (max-width: 767px)
247 .button-group
248 flex-direction: row
249 button:not(:first-child)
250 border-left: 1px solid var(--button-group-border-color)
251 border-top: 0
252
85e5b5c1 253footer
6062e559
BA
254 .left-part
255 display: inline-flex
256 justify-content: flex-end
257 width: 50%
258 & > p
259 display: inline-block
260 margin: 0 12px
e20b2a44 261 @media screen and (max-width: 500px)
6062e559
BA
262 display: block
263 width: 100%
e20b2a44 264 margin-bottom: 7px
6062e559
BA
265 text-align: center
266 .right-part
267 display: inline-flex
268 justify-content: flex-start
269 width: 50%
e20b2a44 270 @media screen and (max-width: 500px)
6062e559
BA
271 display: block
272 width: 100%
273 text-align: center
604b951e 274 height: 45px
5701c228 275 border: 1px solid #ddd
604b951e 276 box-sizing: border-box
85e5b5c1
BA
277 //background-color: #000033
278 font-size: 1rem
279 width: 100%
604b951e 280 padding: 0
85e5b5c1
BA
281 display: inline-flex
282 align-items: center
6062e559 283 & > .left-part > .router-link-exact-active
5fbc0680 284 color: #388e3c !important
050ae3b5 285 text-decoration: none
6062e559
BA
286footer .menuitem
287 margin: 0 12px
288 display: inline-flex
289 align-self: center
290 &:link
291 color: #2c3e50
292 text-decoration: none
293 &:visited, &:hover
294 color: #2c3e50
295 text-decoration: none
296footer > .right-part > a.menuitem > img
6062e559 297 display: inline-block
094db3db
BA
298 height: 1.3em
299 margin: 0 5px
300 //height: 1.5em
301 //margin: 0
302 //&.first
e20b2a44 303 @media screen and (min-width: 501px)
6062e559 304 margin-left: 5px
430a2038
BA
305
306@media screen and (max-width: 767px)
307 footer
308 border: none
89021f18 309
e20b2a44 310@media screen and (max-width: 500px)
4ec83d37 311 .container
e20b2a44 312 min-height: calc(100vh - 67px)
d9a7a1e4 313 footer
e20b2a44 314 height: 67px
d9a7a1e4 315 display: block
f14572c4 316 padding: 5px 0
625022fd 317</style>