Fill About.vue, clean translations
[vchess.git] / client / src / App.vue
CommitLineData
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):
afd3240d 11 // Left: hall, variants, mygames, forum (ext. link)
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"] }}
4f887105 25 a(href="https://forum.vchess.club")
afd3240d 26 | {{ st.tr["Forum"] }}
85e5b5c1
BA
27 #rightMenu
28 .clickable(onClick="doClick('modalUser')")
1aeed627 29 | {{ st.user.id > 0 ? "Update" : "Login" }}
85e5b5c1
BA
30 .clickable(onClick="doClick('modalSettings')")
31 | {{ st.tr["Settings"] }}
fb54f098 32 .clickable#flagContainer(onClick="doClick('modalLang')")
03608482 33 img(v-if="!!st.lang" :src="flagImage")
fb54f098 34 router-view
ccd4a2b7 35 .row
85e5b5c1
BA
36 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
37 footer
92a523d1 38 router-link.menuitem(to="/about") {{ st.tr["About"] }}
ccd4a2b7 39 p.clickable(onClick="doClick('modalContact')")
92a523d1
BA
40 | {{ st.tr["Contact"] }}
41 // TODO: add only the necessary icons to mini-css custom build
8d61fc4a 42 //script(src="//unpkg.com/feather-icons")
625022fd
BA
43</template>
44
98db2082
BA
45<script>
46// See https://stackoverflow.com/a/35417159
47import ContactForm from "@/components/ContactForm.vue";
48import Language from "@/components/Language.vue";
49import Settings from "@/components/Settings.vue";
c66a829b
BA
50import UpsertUser from "@/components/UpsertUser.vue";
51import { store } from "./store.js";
98db2082 52export default {
98db2082
BA
53 components: {
54 ContactForm,
55 Language,
56 Settings,
c66a829b
BA
57 UpsertUser,
58 },
59 data: function() {
60 return {
61 st: store.state,
62 };
98db2082 63 },
03608482
BA
64 computed: {
65 flagImage: function() {
66 return `/images/flags/${this.st.lang}.svg`;
67 },
68 },
4f887105
BA
69 methods: {
70 hideDrawer: function(e) {
71 if (e.target.innerText == "Forum")
72 return; //external link
73 e.preventDefault(); //TODO: why is this needed?
74 document.getElementsByClassName("drawer")[0].checked = false;
75 },
76 },
98db2082
BA
77};
78</script>
79
625022fd
BA
80<style lang="sass">
81#app
82 font-family: "Avenir", Helvetica, Arial, sans-serif
83 -webkit-font-smoothing: antialiased
84 -moz-osx-font-smoothing: grayscale
625022fd 85
85e5b5c1
BA
86.container
87 @media screen and (max-width: 767px)
88 padding: 0
89
fb54f098
BA
90.row > div
91 padding: 0
92
93.nopadding
94 padding: 0
95
85e5b5c1
BA
96header
97 width: 100%
98 display: flex
99 align-items: center
100 justify-content: center
101 margin: 0 auto
102 & > img
103 width: 30px
104 height: 30px
105
106.clickable
107 cursor: pointer
108
109nav
110 width: 100%
fb54f098 111 margin: 0
85e5b5c1
BA
112 padding: 0
113 & > #menuBar
114 width: 100%
115 padding: 0
116 & > #leftMenu
117 padding: 0
118 width: 50%
119 display: inline-flex
120 align-items: center
121 justify-content: flex-start
122 & > a
123 display: inline-block
124 color: #2c3e50
125 &.router-link-exact-active
126 color: #42b983
127 & > #rightMenu
128 padding: 0
129 width: 50%
130 display: inline-flex
131 align-items: center
132 justify-content: flex-end
133 & > div
134 display: inline-block
fb54f098
BA
135 &#flagContainer
136 display: inline-flex
85e5b5c1
BA
137 & > img
138 padding: 0
fb54f098
BA
139 width: 36px
140 height: 27px
85e5b5c1 141
85e5b5c1
BA
142[type="checkbox"].drawer+*
143 right: -767px
144
4f887105
BA
145#menuBar
146 label.drawer-close
147 top: 50px
148
85e5b5c1
BA
149footer
150 //background-color: #000033
151 font-size: 1rem
152 width: 100%
a6b9b86c
BA
153 padding-left: 0
154 padding-right: 0
85e5b5c1
BA
155 display: inline-flex
156 align-items: center
157 justify-content: center
92a523d1 158 & > .menuitem
85e5b5c1
BA
159 display: inline-block
160 margin: 0 10px 0 0
161 &:link
162 color: #2c3e50
163 &:hover
164 text-decoration: none
165 & > p
166 display: inline-block
167 margin: 0 0 0 10px
625022fd 168</style>