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