socket rooms correspnding to pages. TODO: Hall+Game (split live and corr? shared...
[vchess.git] / client / src / App.vue
CommitLineData
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')")
1aeed627 29 | {{ st.user.id > 0 ? "Update" : "Login" }}
85e5b5c1
BA
30 .clickable(onClick="doClick('modalSettings')")
31 | {{ st.tr["Settings"] }}
fb54f098 32 .clickable#flagContainer(onClick="doClick('modalLang')")
03608482 33 img(v-if="!!st.lang" :src="flagImage")
fb54f098 34 router-view
ccd4a2b7 35 .row
85e5b5c1
BA
36 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
37 footer
92a523d1 38 router-link.menuitem(to="/about") {{ st.tr["About"] }}
ccd4a2b7 39 p.clickable(onClick="doClick('modalContact')")
92a523d1
BA
40 | {{ st.tr["Contact"] }}
41 // TODO: add only the necessary icons to mini-css custom build
8d61fc4a 42 //script(src="//unpkg.com/feather-icons")
625022fd
BA
43</template>
44
98db2082
BA
45<script>
46// See https://stackoverflow.com/a/35417159
47import ContactForm from "@/components/ContactForm.vue";
48import Language from "@/components/Language.vue";
49import Settings from "@/components/Settings.vue";
c66a829b
BA
50import UpsertUser from "@/components/UpsertUser.vue";
51import { store } from "./store.js";
98db2082 52export default {
98db2082
BA
53 components: {
54 ContactForm,
55 Language,
56 Settings,
c66a829b
BA
57 UpsertUser,
58 },
59 data: function() {
60 return {
61 st: store.state,
62 };
98db2082 63 },
03608482
BA
64 computed: {
65 flagImage: function() {
66 return `/images/flags/${this.st.lang}.svg`;
67 },
68 },
98db2082
BA
69};
70</script>
71
625022fd
BA
72<style lang="sass">
73#app
74 font-family: "Avenir", Helvetica, Arial, sans-serif
75 -webkit-font-smoothing: antialiased
76 -moz-osx-font-smoothing: grayscale
625022fd 77
85e5b5c1
BA
78.container
79 @media screen and (max-width: 767px)
80 padding: 0
81
fb54f098
BA
82.row > div
83 padding: 0
84
85.nopadding
86 padding: 0
87
85e5b5c1
BA
88header
89 width: 100%
90 display: flex
91 align-items: center
92 justify-content: center
93 margin: 0 auto
94 & > img
95 width: 30px
96 height: 30px
97
98.clickable
99 cursor: pointer
100
101nav
102 width: 100%
fb54f098 103 margin: 0
85e5b5c1
BA
104 padding: 0
105 & > #menuBar
106 width: 100%
107 padding: 0
108 & > #leftMenu
109 padding: 0
110 width: 50%
111 display: inline-flex
112 align-items: center
113 justify-content: flex-start
114 & > a
115 display: inline-block
116 color: #2c3e50
117 &.router-link-exact-active
118 color: #42b983
119 & > #rightMenu
120 padding: 0
121 width: 50%
122 display: inline-flex
123 align-items: center
124 justify-content: flex-end
125 & > div
126 display: inline-block
fb54f098
BA
127 &#flagContainer
128 display: inline-flex
85e5b5c1
BA
129 & > img
130 padding: 0
fb54f098
BA
131 width: 36px
132 height: 27px
85e5b5c1
BA
133
134// TODO: drawer, until 600px wide OK (seemingly)
135// After, zone where left and right just go on top of another
136// Then, on narrow screen put everything on one line
137[type="checkbox"].drawer+*
138 right: -767px
139
140footer
141 //background-color: #000033
142 font-size: 1rem
143 width: 100%
a6b9b86c
BA
144 padding-left: 0
145 padding-right: 0
85e5b5c1
BA
146 display: inline-flex
147 align-items: center
148 justify-content: center
92a523d1 149 & > .menuitem
85e5b5c1
BA
150 display: inline-block
151 margin: 0 10px 0 0
152 &:link
153 color: #2c3e50
154 &:hover
155 text-decoration: none
156 & > p
157 display: inline-block
158 margin: 0 0 0 10px
625022fd 159</style>