Commit | Line | Data |
---|---|---|
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 |
910d631b | 27 | .clickable(onClick="window.doClick('modalUser')") |
3837d4f7 | 28 | | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }} |
5b3dc10e BA |
29 | #divSettings.clickable(onClick="window.doClick('modalSettings')") |
30 | span {{ st.tr["Settings"] }} | |
b9a5fe01 | 31 | img(src="/images/icons/settings.svg") |
fb54f098 | 32 | router-view |
604b951e BA |
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"] }} | |
b0a0468a BA |
37 | a.menuitem(href="https://github.com/yagu0/vchess") |
38 | span {{ st.tr["Code"] }} | |
39 | img(src="/images/icons/github.svg") | |
604b951e | 40 | router-link.menuitem(to="/news") {{ st.tr["News"] }} |
910d631b | 41 | p.clickable(onClick="window.doClick('modalContact')") |
604b951e | 42 | | {{ st.tr["Contact"] }} |
625022fd BA |
43 | </template> |
44 | ||
98db2082 | 45 | <script> |
98db2082 | 46 | import ContactForm from "@/components/ContactForm.vue"; |
98db2082 | 47 | import Settings from "@/components/Settings.vue"; |
c66a829b | 48 | import UpsertUser from "@/components/UpsertUser.vue"; |
42a92848 | 49 | import { store } from "@/store.js"; |
98db2082 | 50 | export default { |
98db2082 BA |
51 | components: { |
52 | ContactForm, | |
98db2082 | 53 | Settings, |
6808d7a1 | 54 | UpsertUser |
c66a829b BA |
55 | }, |
56 | data: function() { | |
57 | return { | |
6808d7a1 | 58 | st: store.state |
c66a829b | 59 | }; |
98db2082 | 60 | }, |
4f887105 BA |
61 | methods: { |
62 | hideDrawer: function(e) { | |
4f887105 BA |
63 | e.preventDefault(); //TODO: why is this needed? |
64 | document.getElementsByClassName("drawer")[0].checked = false; | |
6808d7a1 BA |
65 | } |
66 | } | |
98db2082 BA |
67 | }; |
68 | </script> | |
69 | ||
625022fd | 70 | <style lang="sass"> |
bc093771 BA |
71 | html, * |
72 | font-family: "Open Sans", Arial, sans-serif | |
b0a0468a BA |
73 | --a-link-color: darkred |
74 | --a-visited-color: darkred | |
dcd68c41 BA |
75 | |
76 | body | |
77 | padding: 0 | |
78 | min-width: 320px | |
83c6c2c9 BA |
79 | --fore-color: #1c1e10 //#2c3e50 |
80 | //--back-color: #f2f2f2 | |
81 | background-image: radial-gradient(white, #e6e6ff) //lavender) | |
dcd68c41 | 82 | |
625022fd | 83 | #app |
625022fd BA |
84 | -webkit-font-smoothing: antialiased |
85 | -moz-osx-font-smoothing: grayscale | |
625022fd | 86 | |
85e5b5c1 | 87 | .container |
604b951e BA |
88 | // 45px is footer height |
89 | min-height: calc(100vh - 45px) | |
dcd68c41 | 90 | overflow: hidden |
bd76b456 BA |
91 | padding: 0 |
92 | margin: 0 | |
85e5b5c1 | 93 | |
fb54f098 BA |
94 | .row > div |
95 | padding: 0 | |
96 | ||
85e5b5c1 BA |
97 | header |
98 | width: 100% | |
99 | display: flex | |
100 | align-items: center | |
101 | justify-content: center | |
102 | margin: 0 auto | |
85e5b5c1 BA |
103 | |
104 | .clickable | |
105 | cursor: pointer | |
106 | ||
dcd68c41 BA |
107 | .text-center |
108 | text-align: center | |
109 | ||
a17ae317 BA |
110 | .bold |
111 | font-weight: bold | |
112 | ||
dcd68c41 BA |
113 | .clearer |
114 | clear: both | |
115 | ||
bd76b456 BA |
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 | ||
5b3dc10e BA |
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 | ||
bd76b456 BA |
144 | @media screen and (max-width: 767px) |
145 | table | |
146 | tr > th, td | |
147 | font-size: 14px | |
148 | ||
85e5b5c1 BA |
149 | nav |
150 | width: 100% | |
fb54f098 | 151 | margin: 0 |
85e5b5c1 BA |
152 | padding: 0 |
153 | & > #menuBar | |
154 | width: 100% | |
155 | padding: 0 | |
8c5f5390 BA |
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 | |
8c5f5390 BA |
176 | @media screen and (max-width: 767px) |
177 | & > #leftMenu | |
bd76b456 | 178 | margin-top: 42px |
8c5f5390 BA |
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 | |
85e5b5c1 | 187 | |
430a2038 BA |
188 | @media screen and (max-width: 767px) |
189 | nav | |
bd76b456 | 190 | height: 42px |
430a2038 | 191 | border: none |
57c8c2a6 | 192 | & > label.drawer-toggle |
bd76b456 | 193 | cursor: pointer |
89021f18 | 194 | position: absolute |
57eb158f BA |
195 | top: 0 |
196 | left: 5px | |
197 | line-height: 42px | |
198 | height: 42px | |
b5aa30b5 | 199 | padding: 0 |
57eb158f BA |
200 | & > label.drawer-toggle:before |
201 | font-size: 42px | |
c6913dbc BA |
202 | & > #menuBar |
203 | z-index: 5000 //to hide currently selected piece if any | |
430a2038 | 204 | |
85e5b5c1 BA |
205 | [type="checkbox"].drawer+* |
206 | right: -767px | |
207 | ||
bd76b456 | 208 | [type=checkbox].drawer+* .drawer-close |
b5aa30b5 | 209 | top: 0 |
57eb158f | 210 | left: 5px |
b5aa30b5 | 211 | padding: 0 |
57eb158f BA |
212 | height: 50px |
213 | width: 50px | |
214 | line-height: 50px | |
bd76b456 BA |
215 | |
216 | [type=checkbox].drawer+* .drawer-close:before | |
217 | font-size: 50px | |
218 | ||
dcd68c41 BA |
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 | ||
85e5b5c1 | 226 | footer |
604b951e | 227 | height: 45px |
5701c228 | 228 | border: 1px solid #ddd |
604b951e | 229 | box-sizing: border-box |
85e5b5c1 BA |
230 | //background-color: #000033 |
231 | font-size: 1rem | |
232 | width: 100% | |
604b951e | 233 | padding: 0 |
85e5b5c1 BA |
234 | display: inline-flex |
235 | align-items: center | |
236 | justify-content: center | |
050ae3b5 BA |
237 | & > .router-link-exact-active |
238 | color: #42b983 !important | |
239 | text-decoration: none | |
92a523d1 | 240 | & > .menuitem |
604b951e | 241 | margin: 0 12px |
b0a0468a BA |
242 | display: inline-flex; |
243 | align-self: center; | |
85e5b5c1 BA |
244 | &:link |
245 | color: #2c3e50 | |
5701c228 BA |
246 | &:visited, &:hover |
247 | color: #2c3e50 | |
85e5b5c1 | 248 | text-decoration: none |
b0a0468a BA |
249 | & > img |
250 | height: 1.3em | |
251 | display: inline-block | |
252 | margin-left: 5px | |
85e5b5c1 BA |
253 | & > p |
254 | display: inline-block | |
604b951e | 255 | margin: 0 12px |
430a2038 BA |
256 | |
257 | @media screen and (max-width: 767px) | |
258 | footer | |
259 | border: none | |
89021f18 BA |
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%) | |
625022fd | 306 | </style> |