Client now running. Toward fully 1-page (with filters for variants)
[vchess.git] / client / src / App.vue
... / ...
CommitLineData
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(to="/")
27 // select options all variants + filter possible (as in problems)
28 | Home
29 router-link(to="/myGames")
30 | {{ $tr["My games"] }}
31 router-link(to="/rules")
32 // Boxes OK for rules/Atomic/ ...etc
33 | {{ $tr["Rules"] }}
34 router-link(to="/problems")
35 | {{ $tr["Problems"] }}
36 #userMenu.clickable.right-menu(onClick="doClick('modalUser')")
37 .info-container
38 p
39 span {{ !$user.email ? "Login" : "Update" }}
40 span.icon-user
41 #flagMenu.clickable.right-menu(onClick="doClick('modalLang')")
42 img(src="/images/flags/" + lang + ".svg")
43 #settings.clickable(onClick="doClick('modalSettings')")
44 i(data-feather="settings")
45 .row
46 router-view
47 .row
48 footer
49 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2.text-center
50 a(href="https://github.com/yagu0/vchess") Source code
51 p.clickable(onClick="doClick('modalContact')")
52 | {{ $tr["Contact form"] }}
53 //my-game(:game-ref="gameRef" :mode="mode" :settings="settings" @game-over="archiveGame")
54 //// TODO: add only the necessary icons to mini-css custom build
55 //script(src="//unpkg.com/feather-icons")
56</template>
57
58<script>
59// See https://stackoverflow.com/a/35417159
60import ContactForm from "@/components/ContactForm.vue";
61import Language from "@/components/Language.vue";
62import Settings from "@/components/Settings.vue";
63export default {
64 data: function() {
65 return {
66 settings: {}, //TODO
67 };
68 },
69 components: {
70 ContactForm,
71 Language,
72 Settings,
73 },
74};
75</script>
76
77<style lang="sass">
78#app
79 font-family: "Avenir", Helvetica, Arial, sans-serif
80 -webkit-font-smoothing: antialiased
81 -moz-osx-font-smoothing: grayscale
82 text-align: center
83 color: #2c3e50
84
85#nav
86 padding: 30px
87 a
88 font-weight: bold
89 color: #2c3e50
90 &.router-link-exact-active
91 color: #42b983
92</style>