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