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