Commit | Line | Data |
---|---|---|
625022fd | 1 | <template lang="pug"> |
98db2082 BA |
2 | #app |
3 | // modal "welcome" will be filled in the selected language | |
4 | #modalWelcome | |
5 | Language | |
c66a829b | 6 | Settings |
98db2082 | 7 | ContactForm |
c66a829b | 8 | UpsertUser |
98db2082 BA |
9 | .container |
10 | .row(v-show="$route.path == '/'") | |
85e5b5c1 BA |
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 | |
ccd4a2b7 BA |
14 | img(src="./assets/images/index/unicorn.svg") |
15 | .info-container | |
16 | p vchess.club | |
17 | img(src="./assets/images/index/wildebeest.svg") | |
98db2082 | 18 | .row |
85e5b5c1 BA |
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`)") | |
760865ac | 45 | .row |
ccd4a2b7 BA |
46 | router-view |
47 | .row | |
85e5b5c1 BA |
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"] }} | |
ccd4a2b7 | 51 | p.clickable(onClick="doClick('modalContact')") |
c66a829b | 52 | | {{ st.tr["Contact form"] }} |
8d61fc4a BA |
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") | |
625022fd BA |
56 | </template> |
57 | ||
98db2082 BA |
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"; | |
c66a829b BA |
63 | import UpsertUser from "@/components/UpsertUser.vue"; |
64 | import { store } from "./store.js"; | |
98db2082 | 65 | export default { |
98db2082 BA |
66 | components: { |
67 | ContactForm, | |
68 | Language, | |
69 | Settings, | |
c66a829b BA |
70 | UpsertUser, |
71 | }, | |
72 | data: function() { | |
73 | return { | |
74 | st: store.state, | |
75 | }; | |
98db2082 BA |
76 | }, |
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 | ||
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 | |
625022fd | 156 | </style> |