745dd79934e7809a6b8d91f442c67f708f4be975
[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 img(src="./assets/images/index/unicorn.svg")
14 .info-container
15 p vchess.club
16 img(src="./assets/images/index/wildebeest.svg")
17 .row
18 // Menu (top of page):
19 // shared: Home + flags, userMenu
20 // variant: hall, problems, rules, my games + settings
21 nav
22 label.drawer-toggle(for="drawerControl")
23 input#drawerControl.drawer(type="checkbox")
24 #menuBar
25 label.drawer-close(for="drawerControl")
26 router-link(v-if="$route.path != '/'" to="/")
27 | Home
28 router-link(:href="getLink('/hall')")
29 | getLink function : suffix ==> /variant + suffix
30 =translations["Hall"]
31 router-link(href="#tabGames")
32 =translations["My games"]
33 router-link(href="#rules")
34 =translations["Rules"]
35 router-link(href="#problems")
36 =translations["Problems"]
37 #userMenu.clickable.right-menu(onClick="doClick('modalUser')")
38 .info-container
39 if !user.email
40 p
41 span Login
42 span.icon-user
43 else
44 p
45 span Update
46 span.icon-user
47 #flagMenu.clickable.right-menu(onClick="doClick('modalLang')")
48 img(src="/images/flags/" + lang + ".svg")
49 #settings.clickable(v-show="display!='index'" onClick="doClick('modalSettings')")
50 i(data-feather="settings")
51 .row
52 router-view
53 .row
54 footer
55 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
56 a(href="https://github.com/yagu0/vchess") Source code
57 p.clickable(onClick="doClick('modalContact')")
58 = translations["Contact form"]
59 //my-game(:game-ref="gameRef" :mode="mode" :settings="settings" @game-over="archiveGame")
60 //// TODO: add only the necessary icons to mini-css custom build
61 //script(src="//unpkg.com/feather-icons")
62 </template>
63
64 <script>
65 // See https://stackoverflow.com/a/35417159
66 import ContactForm from "@/components/ContactForm.vue";
67 import Language from "@/components/Language.vue";
68 import Settings from "@/components/Settings.vue";
69 export default {
70 data: function() {
71 return {
72 settings: {}, //TODO
73 };
74 },
75 components: {
76 ContactForm,
77 Language,
78 Settings,
79 },
80 };
81 </script>
82
83 <style lang="sass">
84 #app
85 font-family: "Avenir", Helvetica, Arial, sans-serif
86 -webkit-font-smoothing: antialiased
87 -moz-osx-font-smoothing: grayscale
88 text-align: center
89 color: #2c3e50
90
91 #nav
92 padding: 30px
93 a
94 font-weight: bold
95 color: #2c3e50
96 &.router-link-exact-active
97 color: #42b983
98 </style>