dd45b3439d138088771900c21d5ce765d0e2c168
[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
7 ContactForm
8 UpsertUser
9 .container
10 .row(v-show="$route.path == '/'")
11 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
12 // Header (on index only)
13 header
14 img(src="./assets/images/index/unicorn.svg")
15 .info-container
16 p vchess.club
17 img(src="./assets/images/index/wildebeest.svg")
18 .row
19 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
20 // Menu (top of page):
21 // Left: home, variants, mygames, problems
22 // Right: usermenu, settings, flag
23 nav
24 label.drawer-toggle(for="drawerControl")
25 input#drawerControl.drawer(type="checkbox")
26 #menuBar
27 label.drawer-close(for="drawerControl")
28 #leftMenu
29 router-link(to="/")
30 | {{ st.tr["Home"] }}
31 router-link(to="/variants")
32 | {{ st.tr["Variants"] }}
33 router-link(to="/mygames")
34 | {{ st.tr["My games"] }}
35 router-link(to="/problems")
36 | {{ st.tr["Problems"] }}
37 #rightMenu
38 .clickable(onClick="doClick('modalUser')")
39 | {{ !st.user.id ? "Login" : "Update" }}
40 .clickable(onClick="doClick('modalSettings')")
41 | {{ st.tr["Settings"] }}
42 .clickable(onClick="doClick('modalLang')")
43 img(v-if="!!st.lang"
44 :src="require(`@/assets/images/flags/${st.lang}.svg`)")
45 .row
46 router-view
47 .row
48 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
49 footer
50 a(href="https://github.com/yagu0/vchess") {{ st.tr["Source code"] }}
51 p.clickable(onClick="doClick('modalContact')")
52 | {{ st.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
60 import ContactForm from "@/components/ContactForm.vue";
61 import Language from "@/components/Language.vue";
62 import Settings from "@/components/Settings.vue";
63 import UpsertUser from "@/components/UpsertUser.vue";
64 import { store } from "./store.js";
65 export default {
66 components: {
67 ContactForm,
68 Language,
69 Settings,
70 UpsertUser,
71 },
72 data: function() {
73 return {
74 st: store.state,
75 };
76 },
77 };
78 </script>
79
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
85
86 .container
87 @media screen and (max-width: 767px)
88 padding: 0
89
90 header
91 width: 100%
92 display: flex
93 align-items: center
94 justify-content: center
95 margin: 0 auto
96 & > img
97 width: 30px
98 height: 30px
99
100 .clickable
101 cursor: pointer
102
103 nav
104 width: 100%
105 padding: 0
106 & > #menuBar
107 width: 100%
108 padding: 0
109 & > #leftMenu
110 padding: 0
111 width: 50%
112 display: inline-flex
113 align-items: center
114 justify-content: flex-start
115 & > a
116 display: inline-block
117 color: #2c3e50
118 &.router-link-exact-active
119 color: #42b983
120 & > #rightMenu
121 padding: 0
122 width: 50%
123 display: inline-flex
124 align-items: center
125 justify-content: flex-end
126 & > div
127 display: inline-block
128 & > img
129 padding: 0
130 width: 30px
131 height: 30px
132
133 // TODO: drawer, until 600px wide OK (seemingly)
134 // After, zone where left and right just go on top of another
135 // Then, on narrow screen put everything on one line
136 [type="checkbox"].drawer+*
137 right: -767px
138
139 footer
140 //background-color: #000033
141 font-size: 1rem
142 width: 100%
143 display: inline-flex
144 align-items: center
145 justify-content: center
146 & > a
147 display: inline-block
148 margin: 0 10px 0 0
149 &:link
150 color: #2c3e50
151 &:hover
152 text-decoration: none
153 & > p
154 display: inline-block
155 margin: 0 0 0 10px
156 </style>