Add Xiangqi
[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')") {{ userName }}
28 #divSettings.clickable(onClick="window.doClick('modalSettings')")
29 span {{ st.tr["Settings"] }}
30 img(src="/images/icons/settings.svg")
31 router-view
32 .row
33 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
34 footer
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")
42 span Discord
43 img.first(src="/images/icons/discord.svg")
44 a.menuitem(href="https://github.com/yagu0/vchess")
45 span {{ st.tr["Code"] }}
46 img(src="/images/icons/github.svg")
47 //a.menuitem(href="https://www.facebook.com/Variants-Chess-Club-112565840437886")
48 img(src="/images/icons/facebook.svg")
49 //a.menuitem(href="https://twitter.com/VchessC")
50 img(src="/images/icons/twitter.svg")
51 </template>
52
53 <script>
54 import ContactForm from "@/components/ContactForm.vue";
55 import Settings from "@/components/Settings.vue";
56 import UpsertUser from "@/components/UpsertUser.vue";
57 import { store } from "@/store.js";
58 import { ajax } from "@/utils/ajax.js";
59 export default {
60 components: {
61 ContactForm,
62 Settings,
63 UpsertUser
64 },
65 data: function() {
66 return { st: store.state };
67 },
68 computed: {
69 userName: function() {
70 return (
71 this.st.user.id > 0
72 ? (this.st.user.name || "@nonymous")
73 : "Login"
74 );
75 }
76 },
77 methods: {
78 hideDrawer: function(e) {
79 e.preventDefault(); //TODO: why is this needed?
80 document.getElementsByClassName("drawer")[0].checked = false;
81 }
82 }
83 };
84 </script>
85
86 <style lang="sass">
87 html, *
88 font-family: "Open Sans", Arial, sans-serif
89 --a-link-color: darkred
90 --a-visited-color: darkred
91 --card-back-color: #f4f6f6
92 --button-back-color: #d1d5d5
93 --table-body-back-color: #f8f8f8
94
95 body
96 padding: 0
97 min-width: 320px
98 --fore-color: #1c1e10 //#2c3e50
99 //--back-color: #f2f2f2
100 background-image: radial-gradient(white, #e6e6ff) //lavender)
101
102 #app
103 -webkit-font-smoothing: antialiased
104 -moz-osx-font-smoothing: grayscale
105
106 .container
107 // 45px is footer height
108 min-height: calc(100vh - 45px)
109 overflow: hidden
110 padding: 0
111 margin: 0
112
113 .row > div
114 padding: 0
115
116 a
117 text-decoration: underline
118
119 header
120 width: 100%
121 display: flex
122 align-items: center
123 justify-content: center
124 margin: 0 auto
125
126 .clickable
127 cursor: pointer
128
129 .text-center
130 text-align: center
131
132 .bold
133 font-weight: bold
134
135 .clearer
136 clear: both
137
138 .button-group
139 margin: 0
140
141 input[type="checkbox"]:focus
142 outline: 0
143
144 input[type=checkbox]:checked:before
145 top: -5px
146 height: 18px
147
148 table
149 display: block
150 padding: 0
151 tr > td
152 cursor: pointer
153 th, td
154 padding: 5px
155
156 #divSettings
157 padding: 0 10px 0 0
158 height: 100%
159 & > span
160 padding: 0 5px 0 0
161 vertical-align: middle
162 & > img
163 padding: 0
164 height: 1.2em
165 vertical-align: middle
166
167 @media screen and (max-width: 767px)
168 table
169 tr > th, td
170 font-size: 14px
171
172 nav
173 width: 100%
174 margin: 0
175 padding: 0
176 & > #menuBar
177 width: 100%
178 padding: 0
179 @media screen and (min-width: 768px)
180 & > #leftMenu
181 padding: 0
182 width: 50%
183 display: inline-flex
184 align-items: center
185 justify-content: flex-start
186 & > a
187 display: inline-block
188 text-decoration: none
189 color: #2c3e50
190 &.router-link-exact-active
191 color: #388e3c
192 & > #rightMenu
193 padding: 0
194 width: 50%
195 display: inline-flex
196 align-items: center
197 justify-content: flex-end
198 & > div
199 display: inline-block
200 @media screen and (max-width: 767px)
201 & > #leftMenu
202 margin-top: 42px
203 padding-bottom: 5px
204 & > a
205 text-decoration: none
206 color: #2c3e50
207 &.router-link-exact-active
208 color: #388e3c
209 & > #rightMenu
210 padding-top: 5px
211 border-top: 1px solid darkgrey
212
213 @media screen and (max-width: 767px)
214 nav
215 height: 42px
216 border: none
217 & > label.drawer-toggle
218 cursor: pointer
219 position: absolute
220 top: 0
221 left: 5px
222 line-height: 42px
223 height: 42px
224 padding: 0
225 & > label.drawer-toggle:before
226 font-size: 42px
227 & > #menuBar
228 z-index: 5000 //to hide currently selected piece if any
229
230 [type="checkbox"].drawer+*
231 right: -767px
232
233 [type=checkbox].drawer+* .drawer-close
234 top: 0
235 left: 5px
236 padding: 0
237 height: 50px
238 width: 50px
239 line-height: 50px
240
241 [type=checkbox].drawer+* .drawer-close:before
242 font-size: 50px
243
244 @media screen and (max-width: 767px)
245 .button-group
246 flex-direction: row
247 button:not(:first-child)
248 border-left: 1px solid var(--button-group-border-color)
249 border-top: 0
250
251 footer
252 .left-part
253 display: inline-flex
254 justify-content: flex-end
255 width: 50%
256 & > p
257 display: inline-block
258 margin: 0 12px
259 @media screen and (max-width: 500px)
260 display: block
261 width: 100%
262 margin-bottom: 7px
263 text-align: center
264 .right-part
265 display: inline-flex
266 justify-content: flex-start
267 width: 50%
268 @media screen and (max-width: 500px)
269 display: block
270 width: 100%
271 text-align: center
272 height: 45px
273 border: 1px solid #ddd
274 box-sizing: border-box
275 //background-color: #000033
276 font-size: 1rem
277 width: 100%
278 padding: 0
279 display: inline-flex
280 align-items: center
281 & > .left-part > .router-link-exact-active
282 color: #388e3c !important
283 text-decoration: none
284 footer .menuitem
285 margin: 0 12px
286 display: inline-flex
287 align-self: center
288 &:link
289 color: #2c3e50
290 text-decoration: none
291 &:visited, &:hover
292 color: #2c3e50
293 text-decoration: none
294 footer > .right-part > a.menuitem > img
295 display: inline-block
296 height: 1.3em
297 margin: 0 5px
298 //height: 1.5em
299 //margin: 0
300 //&.first
301 @media screen and (min-width: 501px)
302 margin-left: 5px
303
304 @media screen and (max-width: 767px)
305 footer
306 border: none
307
308 @media screen and (max-width: 500px)
309 .container
310 min-height: calc(100vh - 67px)
311 footer
312 height: 67px
313 display: block
314 padding: 5px 0
315 </style>