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