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