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