Commit | Line | Data |
---|---|---|
625022fd | 1 | <template lang="pug"> |
98db2082 | 2 | #app |
98db2082 | 3 | Language |
c66a829b | 4 | Settings |
98db2082 | 5 | ContactForm |
c66a829b | 6 | UpsertUser |
98db2082 | 7 | .container |
98db2082 | 8 | .row |
85e5b5c1 BA |
9 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
10 | // Menu (top of page): | |
cf2343ce | 11 | // Left: hall, variants, mygames, problems |
85e5b5c1 BA |
12 | // Right: usermenu, settings, flag |
13 | nav | |
14 | label.drawer-toggle(for="drawerControl") | |
15 | input#drawerControl.drawer(type="checkbox") | |
16 | #menuBar | |
17 | label.drawer-close(for="drawerControl") | |
18 | #leftMenu | |
19 | router-link(to="/") | |
cf2343ce | 20 | | {{ st.tr["Hall"] }} |
85e5b5c1 BA |
21 | router-link(to="/variants") |
22 | | {{ st.tr["Variants"] }} | |
23 | router-link(to="/mygames") | |
24 | | {{ st.tr["My games"] }} | |
25 | router-link(to="/problems") | |
26 | | {{ st.tr["Problems"] }} | |
27 | #rightMenu | |
28 | .clickable(onClick="doClick('modalUser')") | |
29 | | {{ !st.user.id ? "Login" : "Update" }} | |
30 | .clickable(onClick="doClick('modalSettings')") | |
31 | | {{ st.tr["Settings"] }} | |
fb54f098 | 32 | .clickable#flagContainer(onClick="doClick('modalLang')") |
85e5b5c1 BA |
33 | img(v-if="!!st.lang" |
34 | :src="require(`@/assets/images/flags/${st.lang}.svg`)") | |
fb54f098 | 35 | router-view |
ccd4a2b7 | 36 | .row |
85e5b5c1 BA |
37 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
38 | footer | |
39 | a(href="https://github.com/yagu0/vchess") {{ st.tr["Source code"] }} | |
ccd4a2b7 | 40 | p.clickable(onClick="doClick('modalContact')") |
c66a829b | 41 | | {{ st.tr["Contact form"] }} |
8d61fc4a BA |
42 | //my-game(:game-ref="gameRef" :mode="mode" :settings="settings" @game-over="archiveGame") |
43 | //// TODO: add only the necessary icons to mini-css custom build | |
44 | //script(src="//unpkg.com/feather-icons") | |
625022fd BA |
45 | </template> |
46 | ||
98db2082 BA |
47 | <script> |
48 | // See https://stackoverflow.com/a/35417159 | |
49 | import ContactForm from "@/components/ContactForm.vue"; | |
50 | import Language from "@/components/Language.vue"; | |
51 | import Settings from "@/components/Settings.vue"; | |
c66a829b BA |
52 | import UpsertUser from "@/components/UpsertUser.vue"; |
53 | import { store } from "./store.js"; | |
98db2082 | 54 | export default { |
98db2082 BA |
55 | components: { |
56 | ContactForm, | |
57 | Language, | |
58 | Settings, | |
c66a829b BA |
59 | UpsertUser, |
60 | }, | |
61 | data: function() { | |
62 | return { | |
63 | st: store.state, | |
64 | }; | |
98db2082 BA |
65 | }, |
66 | }; | |
67 | </script> | |
68 | ||
625022fd BA |
69 | <style lang="sass"> |
70 | #app | |
71 | font-family: "Avenir", Helvetica, Arial, sans-serif | |
72 | -webkit-font-smoothing: antialiased | |
73 | -moz-osx-font-smoothing: grayscale | |
625022fd | 74 | |
85e5b5c1 BA |
75 | .container |
76 | @media screen and (max-width: 767px) | |
77 | padding: 0 | |
78 | ||
fb54f098 BA |
79 | .row > div |
80 | padding: 0 | |
81 | ||
82 | .nopadding | |
83 | padding: 0 | |
84 | ||
85e5b5c1 BA |
85 | header |
86 | width: 100% | |
87 | display: flex | |
88 | align-items: center | |
89 | justify-content: center | |
90 | margin: 0 auto | |
91 | & > img | |
92 | width: 30px | |
93 | height: 30px | |
94 | ||
95 | .clickable | |
96 | cursor: pointer | |
97 | ||
98 | nav | |
99 | width: 100% | |
fb54f098 | 100 | margin: 0 |
85e5b5c1 BA |
101 | padding: 0 |
102 | & > #menuBar | |
103 | width: 100% | |
104 | padding: 0 | |
105 | & > #leftMenu | |
106 | padding: 0 | |
107 | width: 50% | |
108 | display: inline-flex | |
109 | align-items: center | |
110 | justify-content: flex-start | |
111 | & > a | |
112 | display: inline-block | |
113 | color: #2c3e50 | |
114 | &.router-link-exact-active | |
115 | color: #42b983 | |
116 | & > #rightMenu | |
117 | padding: 0 | |
118 | width: 50% | |
119 | display: inline-flex | |
120 | align-items: center | |
121 | justify-content: flex-end | |
122 | & > div | |
123 | display: inline-block | |
fb54f098 BA |
124 | &#flagContainer |
125 | display: inline-flex | |
85e5b5c1 BA |
126 | & > img |
127 | padding: 0 | |
fb54f098 BA |
128 | width: 36px |
129 | height: 27px | |
85e5b5c1 BA |
130 | |
131 | // TODO: drawer, until 600px wide OK (seemingly) | |
132 | // After, zone where left and right just go on top of another | |
133 | // Then, on narrow screen put everything on one line | |
134 | [type="checkbox"].drawer+* | |
135 | right: -767px | |
136 | ||
137 | footer | |
138 | //background-color: #000033 | |
139 | font-size: 1rem | |
140 | width: 100% | |
141 | display: inline-flex | |
142 | align-items: center | |
143 | justify-content: center | |
144 | & > a | |
145 | display: inline-block | |
146 | margin: 0 10px 0 0 | |
147 | &:link | |
148 | color: #2c3e50 | |
149 | &:hover | |
150 | text-decoration: none | |
151 | & > p | |
152 | display: inline-block | |
153 | margin: 0 0 0 10px | |
625022fd | 154 | </style> |