4cd1124fd760189a26eba000e1726119144d7aa2
[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($event)")
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 --a-link-color: black
88 --a-visited-color: black
89
90 body
91 padding: 0
92 min-width: 320px
93 --fore-color: #1c1e10 //#2c3e50
94 //--back-color: #f2f2f2
95 background-image: radial-gradient(white, #e6e6ff) //lavender)
96
97 #app
98 -webkit-font-smoothing: antialiased
99 -moz-osx-font-smoothing: grayscale
100
101 .container
102 overflow: hidden
103 @media screen and (max-width: 767px)
104 padding: 0
105
106 .row > div
107 padding: 0
108
109 header
110 width: 100%
111 display: flex
112 align-items: center
113 justify-content: center
114 margin: 0 auto
115 & > img
116 width: 30px
117 height: 30px
118
119 .clickable
120 cursor: pointer
121
122 .text-center
123 text-align: center
124
125 .clearer
126 clear: both
127
128 nav
129 width: 100%
130 margin: 0
131 padding: 0
132 & > #menuBar
133 width: 100%
134 padding: 0
135 @media screen and (min-width: 768px)
136 & > #leftMenu
137 padding: 0
138 width: 50%
139 display: inline-flex
140 align-items: center
141 justify-content: flex-start
142 & > a
143 display: inline-block
144 color: #2c3e50
145 &.router-link-exact-active
146 color: #42b983
147 & > #rightMenu
148 padding: 0
149 width: 50%
150 display: inline-flex
151 align-items: center
152 justify-content: flex-end
153 & > div
154 display: inline-block
155 &#flagContainer
156 display: inline-flex
157 & > img
158 padding: 0
159 width: 36px
160 height: 27px
161 @media screen and (max-width: 767px)
162 & > #leftMenu
163 padding-bottom: 5px
164 & > a
165 color: #2c3e50
166 &.router-link-exact-active
167 color: #42b983
168 & > #rightMenu
169 padding-top: 5px
170 border-top: 1px solid darkgrey
171 & > div
172 &#flagContainer
173 display: inline-flex
174 & > img
175 padding: 0
176 width: 36px
177 height: 27px
178
179 @media screen and (max-width: 767px)
180 nav
181 height: 32px
182 border: none
183 & > label.drawer-toggle
184 font-size: 1.2rem
185 //padding: 0 0 0 10px
186
187 [type="checkbox"].drawer+*
188 right: -767px
189
190 @media screen and (max-width: 767px)
191 .button-group
192 flex-direction: row
193 button:not(:first-child)
194 border-left: 1px solid var(--button-group-border-color)
195 border-top: 0
196
197 footer
198 border: 1px solid #ddd
199 //background-color: #000033
200 font-size: 1rem
201 width: 100%
202 padding-left: 0
203 padding-right: 0
204 display: inline-flex
205 align-items: center
206 justify-content: center
207 & > .router-link-exact-active
208 color: #42b983 !important
209 text-decoration: none
210 & > .menuitem
211 display: inline-block
212 margin: 0 10px
213 &:link
214 color: #2c3e50
215 &:visited, &:hover
216 color: #2c3e50
217 text-decoration: none
218 & > p
219 display: inline-block
220 margin: 0 10px
221
222 @media screen and (max-width: 767px)
223 footer
224 border: none
225 </style>