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