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