Almost debugged Eightpieces variant
[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"] }}
b6a37c07 37 a.menuitem(href="https://discord.gg/a9ZFKBe") Discord
604b951e 38 router-link.menuitem(to="/news") {{ st.tr["News"] }}
910d631b 39 p.clickable(onClick="window.doClick('modalContact')")
604b951e 40 | {{ st.tr["Contact"] }}
625022fd
BA
41</template>
42
98db2082 43<script>
98db2082 44import ContactForm from "@/components/ContactForm.vue";
98db2082 45import Settings from "@/components/Settings.vue";
c66a829b 46import UpsertUser from "@/components/UpsertUser.vue";
42a92848 47import { store } from "@/store.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 },
4f887105
BA
59 methods: {
60 hideDrawer: function(e) {
4f887105
BA
61 e.preventDefault(); //TODO: why is this needed?
62 document.getElementsByClassName("drawer")[0].checked = false;
6808d7a1
BA
63 }
64 }
98db2082
BA
65};
66</script>
67
625022fd 68<style lang="sass">
bc093771
BA
69html, *
70 font-family: "Open Sans", Arial, sans-serif
bc093771
BA
71 --a-link-color: black
72 --a-visited-color: black
dcd68c41
BA
73
74body
75 padding: 0
76 min-width: 320px
83c6c2c9
BA
77 --fore-color: #1c1e10 //#2c3e50
78 //--back-color: #f2f2f2
79 background-image: radial-gradient(white, #e6e6ff) //lavender)
dcd68c41 80
625022fd 81#app
625022fd
BA
82 -webkit-font-smoothing: antialiased
83 -moz-osx-font-smoothing: grayscale
625022fd 84
85e5b5c1 85.container
604b951e
BA
86 // 45px is footer height
87 min-height: calc(100vh - 45px)
dcd68c41 88 overflow: hidden
bd76b456
BA
89 padding: 0
90 margin: 0
85e5b5c1 91
fb54f098
BA
92.row > div
93 padding: 0
94
85e5b5c1
BA
95header
96 width: 100%
97 display: flex
98 align-items: center
99 justify-content: center
100 margin: 0 auto
85e5b5c1
BA
101
102.clickable
103 cursor: pointer
104
dcd68c41
BA
105.text-center
106 text-align: center
107
a17ae317
BA
108.bold
109 font-weight: bold
110
dcd68c41
BA
111.clearer
112 clear: both
113
bd76b456
BA
114.button-group
115 margin: 0
116
117input[type="checkbox"]:focus
118 outline: 0
119
120input[type=checkbox]:checked:before
121 top: -5px;
122 height: 18px
123
124table
125 display: block
126 padding: 0
127 tr > td
128 cursor: pointer
129 th, td
130 padding: 5px
131
5b3dc10e
BA
132#divSettings
133 padding: 0 10px 0 0
134 height: 100%
135 & > span
136 vertical-align: middle
137 & > img
138 padding: 0
139 height: 24px
140 vertical-align: middle
141
bd76b456
BA
142@media screen and (max-width: 767px)
143 table
144 tr > th, td
145 font-size: 14px
146
85e5b5c1
BA
147nav
148 width: 100%
fb54f098 149 margin: 0
85e5b5c1
BA
150 padding: 0
151 & > #menuBar
152 width: 100%
153 padding: 0
8c5f5390
BA
154 @media screen and (min-width: 768px)
155 & > #leftMenu
156 padding: 0
157 width: 50%
158 display: inline-flex
159 align-items: center
160 justify-content: flex-start
161 & > a
162 display: inline-block
163 color: #2c3e50
164 &.router-link-exact-active
165 color: #42b983
166 & > #rightMenu
167 padding: 0
168 width: 50%
169 display: inline-flex
170 align-items: center
171 justify-content: flex-end
172 & > div
173 display: inline-block
8c5f5390
BA
174 @media screen and (max-width: 767px)
175 & > #leftMenu
bd76b456 176 margin-top: 42px
8c5f5390
BA
177 padding-bottom: 5px
178 & > a
179 color: #2c3e50
180 &.router-link-exact-active
181 color: #42b983
182 & > #rightMenu
183 padding-top: 5px
184 border-top: 1px solid darkgrey
85e5b5c1 185
430a2038
BA
186@media screen and (max-width: 767px)
187 nav
bd76b456 188 height: 42px
430a2038 189 border: none
57c8c2a6 190 & > label.drawer-toggle
bd76b456 191 cursor: pointer
89021f18 192 position: absolute
57eb158f
BA
193 top: 0
194 left: 5px
195 line-height: 42px
196 height: 42px
b5aa30b5 197 padding: 0
57eb158f
BA
198 & > label.drawer-toggle:before
199 font-size: 42px
c6913dbc
BA
200 & > #menuBar
201 z-index: 5000 //to hide currently selected piece if any
430a2038 202
85e5b5c1
BA
203[type="checkbox"].drawer+*
204 right: -767px
205
bd76b456 206[type=checkbox].drawer+* .drawer-close
b5aa30b5 207 top: 0
57eb158f 208 left: 5px
b5aa30b5 209 padding: 0
57eb158f
BA
210 height: 50px
211 width: 50px
212 line-height: 50px
bd76b456
BA
213
214[type=checkbox].drawer+* .drawer-close:before
215 font-size: 50px
216
dcd68c41
BA
217@media screen and (max-width: 767px)
218 .button-group
219 flex-direction: row
220 button:not(:first-child)
221 border-left: 1px solid var(--button-group-border-color)
222 border-top: 0
223
85e5b5c1 224footer
604b951e 225 height: 45px
5701c228 226 border: 1px solid #ddd
604b951e 227 box-sizing: border-box
85e5b5c1
BA
228 //background-color: #000033
229 font-size: 1rem
230 width: 100%
604b951e 231 padding: 0
85e5b5c1
BA
232 display: inline-flex
233 align-items: center
234 justify-content: center
050ae3b5
BA
235 & > .router-link-exact-active
236 color: #42b983 !important
237 text-decoration: none
92a523d1 238 & > .menuitem
85e5b5c1 239 display: inline-block
604b951e 240 margin: 0 12px
85e5b5c1
BA
241 &:link
242 color: #2c3e50
5701c228
BA
243 &:visited, &:hover
244 color: #2c3e50
85e5b5c1
BA
245 text-decoration: none
246 & > p
247 display: inline-block
604b951e 248 margin: 0 12px
430a2038
BA
249
250@media screen and (max-width: 767px)
251 footer
252 border: none
89021f18
BA
253
254// Styles for diagrams and board (partial).
255// TODO: where to put that ?
256
257.light-square-diag
258 background-color: #e5e5ca
259
260.dark-square-diag
261 background-color: #6f8f57
262
263div.board
264 float: left
265 height: 0
266 display: inline-block
267 position: relative
268
269div.board8
270 width: 12.5%
271 padding-bottom: 12.5%
272
273div.board10
274 width: 10%
275 padding-bottom: 10%
276
277div.board11
278 width: 9.09%
279 padding-bottom: 9.1%
280
281img.piece
282 width: 100%
283
284img.piece, img.mark-square
285 max-width: 100%
286 height: auto
287 display: block
288
289img.mark-square
290 opacity: 0.6
291 width: 76%
292 position: absolute
293 top: 12%
294 left: 12%
295 opacity: .7
296
297.in-shadow
298 filter: brightness(50%)
625022fd 299</style>