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