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