Commit | Line | Data |
---|---|---|
625022fd | 1 | <template lang="pug"> |
98db2082 | 2 | #app |
98db2082 | 3 | Language |
c66a829b | 4 | Settings |
98db2082 | 5 | ContactForm |
c66a829b | 6 | UpsertUser |
5b852870 | 7 | Welcome |
98db2082 | 8 | .container |
98db2082 | 9 | .row |
85e5b5c1 BA |
10 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
11 | // Menu (top of page): | |
5157ce0b | 12 | // Left: hall, variants, mygames |
85e5b5c1 BA |
13 | // Right: usermenu, settings, flag |
14 | nav | |
15 | label.drawer-toggle(for="drawerControl") | |
16 | input#drawerControl.drawer(type="checkbox") | |
9a3049f3 | 17 | #menuBar(@click="hideDrawer($event)") |
85e5b5c1 BA |
18 | label.drawer-close(for="drawerControl") |
19 | #leftMenu | |
20 | router-link(to="/") | |
cf2343ce | 21 | | {{ st.tr["Hall"] }} |
85e5b5c1 BA |
22 | router-link(to="/variants") |
23 | | {{ st.tr["Variants"] }} | |
24 | router-link(to="/mygames") | |
25 | | {{ st.tr["My games"] }} | |
85e5b5c1 BA |
26 | #rightMenu |
27 | .clickable(onClick="doClick('modalUser')") | |
3837d4f7 | 28 | | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }} |
85e5b5c1 BA |
29 | .clickable(onClick="doClick('modalSettings')") |
30 | | {{ st.tr["Settings"] }} | |
fb54f098 | 31 | .clickable#flagContainer(onClick="doClick('modalLang')") |
03608482 | 32 | img(v-if="!!st.lang" :src="flagImage") |
fb54f098 | 33 | router-view |
ccd4a2b7 | 34 | .row |
85e5b5c1 BA |
35 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
36 | footer | |
92a523d1 | 37 | router-link.menuitem(to="/about") {{ st.tr["About"] }} |
ccd4a2b7 | 38 | p.clickable(onClick="doClick('modalContact')") |
92a523d1 | 39 | | {{ st.tr["Contact"] }} |
5157ce0b BA |
40 | a.menuitem(href="https://forum.vchess.club") |
41 | | {{ st.tr["Forum"] }} | |
625022fd BA |
42 | </template> |
43 | ||
98db2082 | 44 | <script> |
98db2082 BA |
45 | import ContactForm from "@/components/ContactForm.vue"; |
46 | import Language from "@/components/Language.vue"; | |
47 | import Settings from "@/components/Settings.vue"; | |
c66a829b | 48 | import UpsertUser from "@/components/UpsertUser.vue"; |
5b852870 | 49 | import Welcome from "@/components/Welcome.vue"; |
c66a829b | 50 | import { store } from "./store.js"; |
dcd68c41 | 51 | import { processModalClick } from "./utils/modalClick.js"; |
98db2082 | 52 | export default { |
98db2082 BA |
53 | components: { |
54 | ContactForm, | |
55 | Language, | |
56 | Settings, | |
c66a829b | 57 | UpsertUser, |
5b852870 | 58 | Welcome, |
c66a829b BA |
59 | }, |
60 | data: function() { | |
61 | return { | |
62 | st: store.state, | |
63 | }; | |
98db2082 | 64 | }, |
03608482 BA |
65 | computed: { |
66 | flagImage: function() { | |
67 | return `/images/flags/${this.st.lang}.svg`; | |
68 | }, | |
69 | }, | |
dcd68c41 BA |
70 | mounted: function() { |
71 | let dialogs = document.querySelectorAll("div[role='dialog']"); | |
72 | dialogs.forEach(d => { | |
73 | d.addEventListener("click", processModalClick); | |
74 | }); | |
5b852870 BA |
75 | if (!localStorage.getItem("welcomed")) |
76 | setTimeout( () => { doClick("modalWelcome"); }, 2000); | |
dcd68c41 | 77 | }, |
4f887105 BA |
78 | methods: { |
79 | hideDrawer: function(e) { | |
80 | if (e.target.innerText == "Forum") | |
81 | return; //external link | |
82 | e.preventDefault(); //TODO: why is this needed? | |
83 | document.getElementsByClassName("drawer")[0].checked = false; | |
84 | }, | |
85 | }, | |
98db2082 BA |
86 | }; |
87 | </script> | |
88 | ||
625022fd | 89 | <style lang="sass"> |
bc093771 BA |
90 | html, * |
91 | font-family: "Open Sans", Arial, sans-serif | |
92 | --back-color: #f2f2f2 | |
93 | --a-link-color: black | |
94 | --a-visited-color: black | |
dcd68c41 BA |
95 | |
96 | body | |
97 | padding: 0 | |
98 | min-width: 320px | |
99 | ||
625022fd | 100 | #app |
625022fd BA |
101 | -webkit-font-smoothing: antialiased |
102 | -moz-osx-font-smoothing: grayscale | |
625022fd | 103 | |
85e5b5c1 | 104 | .container |
dcd68c41 | 105 | overflow: hidden |
85e5b5c1 BA |
106 | @media screen and (max-width: 767px) |
107 | padding: 0 | |
108 | ||
fb54f098 BA |
109 | .row > div |
110 | padding: 0 | |
111 | ||
85e5b5c1 BA |
112 | header |
113 | width: 100% | |
114 | display: flex | |
115 | align-items: center | |
116 | justify-content: center | |
117 | margin: 0 auto | |
118 | & > img | |
119 | width: 30px | |
120 | height: 30px | |
121 | ||
122 | .clickable | |
123 | cursor: pointer | |
124 | ||
dcd68c41 BA |
125 | .text-center |
126 | text-align: center | |
127 | ||
dcd68c41 BA |
128 | .clearer |
129 | clear: both | |
130 | ||
85e5b5c1 BA |
131 | nav |
132 | width: 100% | |
fb54f098 | 133 | margin: 0 |
85e5b5c1 BA |
134 | padding: 0 |
135 | & > #menuBar | |
136 | width: 100% | |
137 | padding: 0 | |
8c5f5390 BA |
138 | @media screen and (min-width: 768px) |
139 | & > #leftMenu | |
140 | padding: 0 | |
141 | width: 50% | |
142 | display: inline-flex | |
143 | align-items: center | |
144 | justify-content: flex-start | |
145 | & > a | |
146 | display: inline-block | |
147 | color: #2c3e50 | |
148 | &.router-link-exact-active | |
149 | color: #42b983 | |
150 | & > #rightMenu | |
151 | padding: 0 | |
152 | width: 50% | |
153 | display: inline-flex | |
154 | align-items: center | |
155 | justify-content: flex-end | |
156 | & > div | |
157 | display: inline-block | |
158 | &#flagContainer | |
159 | display: inline-flex | |
160 | & > img | |
161 | padding: 0 | |
162 | width: 36px | |
163 | height: 27px | |
164 | @media screen and (max-width: 767px) | |
165 | & > #leftMenu | |
166 | padding-bottom: 5px | |
167 | & > a | |
168 | color: #2c3e50 | |
169 | &.router-link-exact-active | |
170 | color: #42b983 | |
171 | & > #rightMenu | |
172 | padding-top: 5px | |
173 | border-top: 1px solid darkgrey | |
174 | & > div | |
175 | &#flagContainer | |
176 | display: inline-flex | |
177 | & > img | |
178 | padding: 0 | |
179 | width: 36px | |
180 | height: 27px | |
85e5b5c1 | 181 | |
430a2038 BA |
182 | @media screen and (max-width: 767px) |
183 | nav | |
9936aac8 | 184 | height: 32px |
430a2038 | 185 | border: none |
57c8c2a6 | 186 | & > label.drawer-toggle |
9936aac8 | 187 | font-size: 1.2rem |
57c8c2a6 | 188 | //padding: 0 0 0 10px |
430a2038 | 189 | |
85e5b5c1 BA |
190 | [type="checkbox"].drawer+* |
191 | right: -767px | |
192 | ||
dcd68c41 BA |
193 | @media screen and (max-width: 767px) |
194 | .button-group | |
195 | flex-direction: row | |
196 | button:not(:first-child) | |
197 | border-left: 1px solid var(--button-group-border-color) | |
198 | border-top: 0 | |
199 | ||
85e5b5c1 | 200 | footer |
5701c228 | 201 | border: 1px solid #ddd |
85e5b5c1 BA |
202 | //background-color: #000033 |
203 | font-size: 1rem | |
204 | width: 100% | |
a6b9b86c BA |
205 | padding-left: 0 |
206 | padding-right: 0 | |
85e5b5c1 BA |
207 | display: inline-flex |
208 | align-items: center | |
209 | justify-content: center | |
050ae3b5 BA |
210 | & > .router-link-exact-active |
211 | color: #42b983 !important | |
212 | text-decoration: none | |
92a523d1 | 213 | & > .menuitem |
85e5b5c1 | 214 | display: inline-block |
5157ce0b | 215 | margin: 0 10px |
85e5b5c1 BA |
216 | &:link |
217 | color: #2c3e50 | |
5701c228 BA |
218 | &:visited, &:hover |
219 | color: #2c3e50 | |
85e5b5c1 BA |
220 | text-decoration: none |
221 | & > p | |
222 | display: inline-block | |
5157ce0b | 223 | margin: 0 10px |
430a2038 BA |
224 | |
225 | @media screen and (max-width: 767px) | |
226 | footer | |
227 | border: none | |
625022fd | 228 | </style> |