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