Attempt to clarify installation instructions a little
[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")
625022fd
BA
47</template>
48
98db2082 49<script>
98db2082 50import ContactForm from "@/components/ContactForm.vue";
98db2082 51import Settings from "@/components/Settings.vue";
c66a829b 52import UpsertUser from "@/components/UpsertUser.vue";
42a92848 53import { store } from "@/store.js";
d9a7a1e4 54import { ajax } from "@/utils/ajax.js";
98db2082 55export default {
98db2082
BA
56 components: {
57 ContactForm,
98db2082 58 Settings,
6808d7a1 59 UpsertUser
c66a829b
BA
60 },
61 data: function() {
d9a7a1e4
BA
62 return { st: store.state };
63 },
2c5d7b20
BA
64 computed: {
65 userName: function() {
66 return (
67 this.st.user.id > 0
68 ? (this.st.user.name || "@nonymous")
69 : "Login"
70 );
71 }
72 },
4f887105
BA
73 methods: {
74 hideDrawer: function(e) {
4f887105
BA
75 e.preventDefault(); //TODO: why is this needed?
76 document.getElementsByClassName("drawer")[0].checked = false;
6808d7a1
BA
77 }
78 }
98db2082
BA
79};
80</script>
81
625022fd 82<style lang="sass">
bc093771
BA
83html, *
84 font-family: "Open Sans", Arial, sans-serif
b0a0468a
BA
85 --a-link-color: darkred
86 --a-visited-color: darkred
5fbc0680
BA
87 --card-back-color: #f4f6f6
88 --button-back-color: #d1d5d5
956407c4 89 --table-body-back-color: #f8f8f8
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
07052665
BA
112a
113 text-decoration: underline
114
85e5b5c1
BA
115header
116 width: 100%
117 display: flex
118 align-items: center
119 justify-content: center
120 margin: 0 auto
85e5b5c1
BA
121
122.clickable
123 cursor: pointer
124
dcd68c41
BA
125.text-center
126 text-align: center
127
a17ae317
BA
128.bold
129 font-weight: bold
130
dcd68c41
BA
131.clearer
132 clear: both
133
bd76b456
BA
134.button-group
135 margin: 0
136
137input[type="checkbox"]:focus
138 outline: 0
139
140input[type=checkbox]:checked:before
0705a80c 141 top: -5px
bd76b456
BA
142 height: 18px
143
144table
145 display: block
146 padding: 0
147 tr > td
148 cursor: pointer
149 th, td
150 padding: 5px
151
5b3dc10e
BA
152#divSettings
153 padding: 0 10px 0 0
154 height: 100%
155 & > span
9a1e3abe
BA
156 padding-top: 0
157 padding-bottom: 0
158 padding-right: 5px
5b3dc10e
BA
159 vertical-align: middle
160 & > img
161 padding: 0
d81c26d1 162 height: 1.2em
5b3dc10e
BA
163 vertical-align: middle
164
bd76b456
BA
165@media screen and (max-width: 767px)
166 table
167 tr > th, td
168 font-size: 14px
169
85e5b5c1
BA
170nav
171 width: 100%
fb54f098 172 margin: 0
85e5b5c1
BA
173 padding: 0
174 & > #menuBar
175 width: 100%
176 padding: 0
8c5f5390
BA
177 @media screen and (min-width: 768px)
178 & > #leftMenu
179 padding: 0
180 width: 50%
181 display: inline-flex
182 align-items: center
183 justify-content: flex-start
184 & > a
185 display: inline-block
07052665 186 text-decoration: none
8c5f5390
BA
187 color: #2c3e50
188 &.router-link-exact-active
5fbc0680 189 color: #388e3c
8c5f5390
BA
190 & > #rightMenu
191 padding: 0
192 width: 50%
193 display: inline-flex
194 align-items: center
195 justify-content: flex-end
196 & > div
197 display: inline-block
8c5f5390
BA
198 @media screen and (max-width: 767px)
199 & > #leftMenu
bd76b456 200 margin-top: 42px
8c5f5390 201 padding-bottom: 5px
26d8a01a
BA
202 & > a
203 text-decoration: none
204 color: #2c3e50
205 &.router-link-exact-active
5fbc0680 206 color: #388e3c
8c5f5390
BA
207 & > #rightMenu
208 padding-top: 5px
209 border-top: 1px solid darkgrey
85e5b5c1 210
430a2038
BA
211@media screen and (max-width: 767px)
212 nav
bd76b456 213 height: 42px
430a2038 214 border: none
57c8c2a6 215 & > label.drawer-toggle
bd76b456 216 cursor: pointer
89021f18 217 position: absolute
57eb158f
BA
218 top: 0
219 left: 5px
220 line-height: 42px
221 height: 42px
b5aa30b5 222 padding: 0
57eb158f
BA
223 & > label.drawer-toggle:before
224 font-size: 42px
c6913dbc
BA
225 & > #menuBar
226 z-index: 5000 //to hide currently selected piece if any
430a2038 227
85e5b5c1
BA
228[type="checkbox"].drawer+*
229 right: -767px
230
bd76b456 231[type=checkbox].drawer+* .drawer-close
b5aa30b5 232 top: 0
57eb158f 233 left: 5px
b5aa30b5 234 padding: 0
57eb158f
BA
235 height: 50px
236 width: 50px
237 line-height: 50px
bd76b456
BA
238
239[type=checkbox].drawer+* .drawer-close:before
240 font-size: 50px
241
dcd68c41
BA
242@media screen and (max-width: 767px)
243 .button-group
244 flex-direction: row
245 button:not(:first-child)
246 border-left: 1px solid var(--button-group-border-color)
247 border-top: 0
248
85e5b5c1 249footer
6062e559
BA
250 .left-part
251 display: inline-flex
252 justify-content: flex-end
253 width: 50%
254 & > p
255 display: inline-block
256 margin: 0 12px
e20b2a44 257 @media screen and (max-width: 500px)
6062e559
BA
258 display: block
259 width: 100%
e20b2a44 260 margin-bottom: 7px
6062e559
BA
261 text-align: center
262 .right-part
263 display: inline-flex
264 justify-content: flex-start
265 width: 50%
e20b2a44 266 @media screen and (max-width: 500px)
6062e559
BA
267 display: block
268 width: 100%
269 text-align: center
604b951e 270 height: 45px
5701c228 271 border: 1px solid #ddd
604b951e 272 box-sizing: border-box
85e5b5c1
BA
273 //background-color: #000033
274 font-size: 1rem
275 width: 100%
604b951e 276 padding: 0
85e5b5c1
BA
277 display: inline-flex
278 align-items: center
6062e559 279 & > .left-part > .router-link-exact-active
5fbc0680 280 color: #388e3c !important
050ae3b5 281 text-decoration: none
6062e559
BA
282footer .menuitem
283 margin: 0 12px
284 display: inline-flex
285 align-self: center
286 &:link
287 color: #2c3e50
288 text-decoration: none
289 &:visited, &:hover
290 color: #2c3e50
291 text-decoration: none
292footer > .right-part > a.menuitem > img
6062e559 293 display: inline-block
094db3db
BA
294 height: 1.3em
295 margin: 0 5px
296 //height: 1.5em
297 //margin: 0
298 //&.first
e20b2a44 299 @media screen and (min-width: 501px)
6062e559 300 margin-left: 5px
430a2038
BA
301
302@media screen and (max-width: 767px)
303 footer
304 border: none
89021f18 305
e20b2a44 306@media screen and (max-width: 500px)
4ec83d37 307 .container
e20b2a44 308 min-height: calc(100vh - 67px)
d9a7a1e4 309 footer
e20b2a44 310 height: 67px
d9a7a1e4 311 display: block
f14572c4 312 padding: 5px 0
625022fd 313</style>