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