'update'
[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 // See https://stackoverflow.com/a/35417159
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 { store } from "./store.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 // feather.replace();
69 // },
70 methods: {
71 hideDrawer: function(e) {
72 if (e.target.innerText == "Forum")
73 return; //external link
74 e.preventDefault(); //TODO: why is this needed?
75 document.getElementsByClassName("drawer")[0].checked = false;
76 },
77 },
78 };
79 </script>
80
81 <style lang="sass">
82 #app
83 font-family: "Avenir", Helvetica, Arial, sans-serif
84 -webkit-font-smoothing: antialiased
85 -moz-osx-font-smoothing: grayscale
86
87 .container
88 @media screen and (max-width: 767px)
89 padding: 0
90
91 .row > div
92 padding: 0
93
94 .nopadding
95 padding: 0
96
97 header
98 width: 100%
99 display: flex
100 align-items: center
101 justify-content: center
102 margin: 0 auto
103 & > img
104 width: 30px
105 height: 30px
106
107 .clickable
108 cursor: pointer
109
110 nav
111 width: 100%
112 margin: 0
113 padding: 0
114 & > #menuBar
115 width: 100%
116 padding: 0
117 & > #leftMenu
118 padding: 0
119 width: 50%
120 display: inline-flex
121 align-items: center
122 justify-content: flex-start
123 & > a
124 display: inline-block
125 color: #2c3e50
126 &.router-link-exact-active
127 color: #42b983
128 & > #rightMenu
129 padding: 0
130 width: 50%
131 display: inline-flex
132 align-items: center
133 justify-content: flex-end
134 & > div
135 display: inline-block
136 &#flagContainer
137 display: inline-flex
138 & > img
139 padding: 0
140 width: 36px
141 height: 27px
142
143 @media screen and (max-width: 767px)
144 nav
145 border: none
146
147 [type="checkbox"].drawer+*
148 right: -767px
149
150 #menuBar
151 label.drawer-close
152 top: 50px
153
154 footer
155 border: 1px solid #ddd
156 //background-color: #000033
157 font-size: 1rem
158 width: 100%
159 padding-left: 0
160 padding-right: 0
161 display: inline-flex
162 align-items: center
163 justify-content: center
164 & > .menuitem
165 display: inline-block
166 margin: 0 10px
167 &:link
168 color: #2c3e50
169 &:visited, &:hover
170 color: #2c3e50
171 text-decoration: none
172 & > p
173 display: inline-block
174 margin: 0 10px
175
176 @media screen and (max-width: 767px)
177 footer
178 border: none
179 </style>