Fix MarseillRules
[vchess.git] / client / src / App.vue
1 <template lang="pug">
2 #app
3 Language
4 Settings
5 ContactForm
6 UpsertUser
7 .container
8 .row
9 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
10 // Menu (top of page):
11 // Left: hall, variants, mygames
12 // Right: usermenu, settings, flag
13 nav
14 label.drawer-toggle(for="drawerControl")
15 input#drawerControl.drawer(type="checkbox")
16 #menuBar(@click="hideDrawer")
17 label.drawer-close(for="drawerControl")
18 #leftMenu
19 router-link(to="/")
20 | {{ st.tr["Hall"] }}
21 router-link(to="/variants")
22 | {{ st.tr["Variants"] }}
23 router-link(to="/mygames")
24 | {{ st.tr["My games"] }}
25 #rightMenu
26 .clickable(onClick="doClick('modalUser')")
27 | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }}
28 .clickable(onClick="doClick('modalSettings')")
29 | {{ st.tr["Settings"] }}
30 .clickable#flagContainer(onClick="doClick('modalLang')")
31 img(v-if="!!st.lang" :src="flagImage")
32 router-view
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"] }}
37 p.clickable(onClick="doClick('modalContact')")
38 | {{ st.tr["Contact"] }}
39 a.menuitem(href="https://forum.vchess.club")
40 | {{ st.tr["Forum"] }}
41 </template>
42
43 <script>
44 import ContactForm from "@/components/ContactForm.vue";
45 import Language from "@/components/Language.vue";
46 import Settings from "@/components/Settings.vue";
47 import UpsertUser from "@/components/UpsertUser.vue";
48 import { store } from "./store.js";
49 import { processModalClick } from "./utils/modalClick.js";
50 export default {
51 components: {
52 ContactForm,
53 Language,
54 Settings,
55 UpsertUser,
56 },
57 data: function() {
58 return {
59 st: store.state,
60 };
61 },
62 computed: {
63 flagImage: function() {
64 return `/images/flags/${this.st.lang}.svg`;
65 },
66 },
67 mounted: function() {
68 let dialogs = document.querySelectorAll("div[role='dialog']");
69 dialogs.forEach(d => {
70 d.addEventListener("click", processModalClick);
71 });
72 },
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 },
81 };
82 </script>
83
84 <style lang="sass">
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
95 #app
96 font-family: "Avenir", Helvetica, Arial, sans-serif
97 -webkit-font-smoothing: antialiased
98 -moz-osx-font-smoothing: grayscale
99
100 .container
101 overflow: hidden
102 @media screen and (max-width: 767px)
103 padding: 0
104
105 .row > div
106 padding: 0
107
108 .nopadding
109 padding: 0
110
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
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
145 nav
146 width: 100%
147 margin: 0
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
171 &#flagContainer
172 display: inline-flex
173 & > img
174 padding: 0
175 width: 36px
176 height: 27px
177
178 @media screen and (max-width: 767px)
179 nav
180 border: none
181
182 [type="checkbox"].drawer+*
183 right: -767px
184
185 #menuBar
186 label.drawer-close
187 top: 50px
188
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
196 footer
197 border: 1px solid #ddd
198 //background-color: #000033
199 font-size: 1rem
200 width: 100%
201 padding-left: 0
202 padding-right: 0
203 display: inline-flex
204 align-items: center
205 justify-content: center
206 & > .router-link-exact-active
207 color: #42b983 !important
208 text-decoration: none
209 & > .menuitem
210 display: inline-block
211 margin: 0 10px
212 &:link
213 color: #2c3e50
214 &:visited, &:hover
215 color: #2c3e50
216 text-decoration: none
217 & > p
218 display: inline-block
219 margin: 0 10px
220
221 @media screen and (max-width: 767px)
222 footer
223 border: none
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
236 </style>