Some improvements (multi-tabs on same game seem fixed)
[vchess.git] / client / src / App.vue
CommitLineData
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"] }}
b9a5fe01 31 img(src="/images/icons/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 43import ContactForm from "@/components/ContactForm.vue";
98db2082 44import Settings from "@/components/Settings.vue";
c66a829b
BA
45import UpsertUser from "@/components/UpsertUser.vue";
46import { store } from "./store.js";
dcd68c41 47import { processModalClick } from "./utils/modalClick.js";
98db2082 48export 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
76html, *
77 font-family: "Open Sans", Arial, sans-serif
bc093771
BA
78 --a-link-color: black
79 --a-visited-color: black
dcd68c41
BA
80
81body
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
102header
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
121input[type="checkbox"]:focus
122 outline: 0
123
124input[type=checkbox]:checked:before
125 top: -5px;
126 height: 18px
127
128table
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
151nav
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 195 cursor: pointer
89021f18 196 position: absolute
57eb158f
BA
197 top: 0
198 left: 5px
199 line-height: 42px
200 height: 42px
b5aa30b5 201 padding: 0
57eb158f
BA
202 & > label.drawer-toggle:before
203 font-size: 42px
c6913dbc
BA
204 & > #menuBar
205 z-index: 5000 //to hide currently selected piece if any
430a2038 206
85e5b5c1
BA
207[type="checkbox"].drawer+*
208 right: -767px
209
bd76b456 210[type=checkbox].drawer+* .drawer-close
b5aa30b5 211 top: 0
57eb158f 212 left: 5px
b5aa30b5 213 padding: 0
57eb158f
BA
214 height: 50px
215 width: 50px
216 line-height: 50px
bd76b456
BA
217
218[type=checkbox].drawer+* .drawer-close:before
219 font-size: 50px
220
dcd68c41
BA
221@media screen and (max-width: 767px)
222 .button-group
223 flex-direction: row
224 button:not(:first-child)
225 border-left: 1px solid var(--button-group-border-color)
226 border-top: 0
227
85e5b5c1 228footer
604b951e 229 height: 45px
5701c228 230 border: 1px solid #ddd
604b951e 231 box-sizing: border-box
85e5b5c1
BA
232 //background-color: #000033
233 font-size: 1rem
234 width: 100%
604b951e 235 padding: 0
85e5b5c1
BA
236 display: inline-flex
237 align-items: center
238 justify-content: center
050ae3b5
BA
239 & > .router-link-exact-active
240 color: #42b983 !important
241 text-decoration: none
92a523d1 242 & > .menuitem
85e5b5c1 243 display: inline-block
604b951e 244 margin: 0 12px
85e5b5c1
BA
245 &:link
246 color: #2c3e50
5701c228
BA
247 &:visited, &:hover
248 color: #2c3e50
85e5b5c1
BA
249 text-decoration: none
250 & > p
251 display: inline-block
604b951e 252 margin: 0 12px
430a2038
BA
253
254@media screen and (max-width: 767px)
255 footer
256 border: none
89021f18
BA
257
258// Styles for diagrams and board (partial).
259// TODO: where to put that ?
260
261.light-square-diag
262 background-color: #e5e5ca
263
264.dark-square-diag
265 background-color: #6f8f57
266
267div.board
268 float: left
269 height: 0
270 display: inline-block
271 position: relative
272
273div.board8
274 width: 12.5%
275 padding-bottom: 12.5%
276
277div.board10
278 width: 10%
279 padding-bottom: 10%
280
281div.board11
282 width: 9.09%
283 padding-bottom: 9.1%
284
285img.piece
286 width: 100%
287
288img.piece, img.mark-square
289 max-width: 100%
290 height: auto
291 display: block
292
293img.mark-square
294 opacity: 0.6
295 width: 76%
296 position: absolute
297 top: 12%
298 left: 12%
299 opacity: .7
300
301.in-shadow
302 filter: brightness(50%)
625022fd 303</style>