Advance on client side
[vchess.git] / client / src / App.vue
1 <template lang="pug">
2 #app
3 // modal "welcome" will be filled in the selected language
4 #modalWelcome
5 Language
6 Settings(:settings="settings")
7 ContactForm
8 .container
9 .row(v-show="$route.path == '/'")
10 // Header (on index only)
11 header
12 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
13 header
14 img(src="./assets/images/index/unicorn.svg")
15 .info-container
16 p vchess.club {{ $lang }}
17 img(src="./assets/images/index/wildebeest.svg")
18 .row
19 // Menu (top of page)
20 nav
21 router-link(to="/") Home
22 | &nbsp;|&nbsp;
23 router-link(to="/about") About
24 | &nbsp;|&nbsp;
25 router-link(to="/test") Test
26 router-view
27 </template>
28
29 <script>
30 // See https://stackoverflow.com/a/35417159
31 import ContactForm from "@/components/ContactForm.vue";
32 import Language from "@/components/Language.vue";
33 import Settings from "@/components/Settings.vue";
34 export default {
35 data: function() {
36 return {
37 settings: {}, //TODO
38 };
39 },
40 components: {
41 ContactForm,
42 Language,
43 Settings,
44 },
45 };
46 </script>
47
48 <style lang="sass">
49 #app
50 font-family: "Avenir", Helvetica, Arial, sans-serif
51 -webkit-font-smoothing: antialiased
52 -moz-osx-font-smoothing: grayscale
53 text-align: center
54 color: #2c3e50
55
56 #nav
57 padding: 30px
58 a
59 font-weight: bold
60 color: #2c3e50
61 &.router-link-exact-active
62 color: #42b983
63 </style>