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