Fix online indicators between Hall and Game pages
[vchess.git] / client / src / App.vue
1 <template lang="pug">
2 #app
3 Language
4 Settings
5 ContactForm
6 UpsertUser
7 .container
8 .row
9 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
10 // Menu (top of page):
11 // Left: hall, variants, mygames, forum (ext. link)
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="/")
20 | {{ st.tr["Hall"] }}
21 router-link(to="/variants")
22 | {{ st.tr["Variants"] }}
23 router-link(to="/mygames")
24 | {{ st.tr["My games"] }}
25 // TODO: parametric URL, "forumURL"
26 a(href="https://forum.vchess.club")
27 | {{ st.tr["Forum"] }}
28 #rightMenu
29 .clickable(onClick="doClick('modalUser')")
30 | {{ st.user.id > 0 ? "Update" : "Login" }}
31 .clickable(onClick="doClick('modalSettings')")
32 | {{ st.tr["Settings"] }}
33 .clickable#flagContainer(onClick="doClick('modalLang')")
34 img(v-if="!!st.lang" :src="flagImage")
35 router-view
36 .row
37 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
38 footer
39 router-link.menuitem(to="/about") {{ st.tr["About"] }}
40 p.clickable(onClick="doClick('modalContact')")
41 | {{ st.tr["Contact"] }}
42 // TODO: add only the necessary icons to mini-css custom build
43 //script(src="//unpkg.com/feather-icons")
44 </template>
45
46 <script>
47 // See https://stackoverflow.com/a/35417159
48 import ContactForm from "@/components/ContactForm.vue";
49 import Language from "@/components/Language.vue";
50 import Settings from "@/components/Settings.vue";
51 import UpsertUser from "@/components/UpsertUser.vue";
52 import { store } from "./store.js";
53 export default {
54 components: {
55 ContactForm,
56 Language,
57 Settings,
58 UpsertUser,
59 },
60 data: function() {
61 return {
62 st: store.state,
63 };
64 },
65 computed: {
66 flagImage: function() {
67 return `/images/flags/${this.st.lang}.svg`;
68 },
69 },
70 };
71 </script>
72
73 <style lang="sass">
74 #app
75 font-family: "Avenir", Helvetica, Arial, sans-serif
76 -webkit-font-smoothing: antialiased
77 -moz-osx-font-smoothing: grayscale
78
79 .container
80 @media screen and (max-width: 767px)
81 padding: 0
82
83 .row > div
84 padding: 0
85
86 .nopadding
87 padding: 0
88
89 header
90 width: 100%
91 display: flex
92 align-items: center
93 justify-content: center
94 margin: 0 auto
95 & > img
96 width: 30px
97 height: 30px
98
99 .clickable
100 cursor: pointer
101
102 nav
103 width: 100%
104 margin: 0
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 &#flagContainer
129 display: inline-flex
130 & > img
131 padding: 0
132 width: 36px
133 height: 27px
134
135 // TODO: drawer, until 600px wide OK (seemingly)
136 // After, zone where left and right just go on top of another
137 // Then, on narrow screen put everything on one line
138 [type="checkbox"].drawer+*
139 right: -767px
140
141 footer
142 //background-color: #000033
143 font-size: 1rem
144 width: 100%
145 padding-left: 0
146 padding-right: 0
147 display: inline-flex
148 align-items: center
149 justify-content: center
150 & > .menuitem
151 display: inline-block
152 margin: 0 10px 0 0
153 &:link
154 color: #2c3e50
155 &:hover
156 text-decoration: none
157 & > p
158 display: inline-block
159 margin: 0 0 0 10px
160 </style>