Advance on styling
[vchess.git] / client / src / App.vue
CommitLineData
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"] }}
fb54f098 42 .clickable#flagContainer(onClick="doClick('modalLang')")
85e5b5c1
BA
43 img(v-if="!!st.lang"
44 :src="require(`@/assets/images/flags/${st.lang}.svg`)")
fb54f098 45 router-view
ccd4a2b7 46 .row
85e5b5c1
BA
47 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
48 footer
49 a(href="https://github.com/yagu0/vchess") {{ st.tr["Source code"] }}
ccd4a2b7 50 p.clickable(onClick="doClick('modalContact')")
c66a829b 51 | {{ st.tr["Contact form"] }}
8d61fc4a
BA
52 //my-game(:game-ref="gameRef" :mode="mode" :settings="settings" @game-over="archiveGame")
53 //// TODO: add only the necessary icons to mini-css custom build
54 //script(src="//unpkg.com/feather-icons")
625022fd
BA
55</template>
56
98db2082
BA
57<script>
58// See https://stackoverflow.com/a/35417159
59import ContactForm from "@/components/ContactForm.vue";
60import Language from "@/components/Language.vue";
61import Settings from "@/components/Settings.vue";
c66a829b
BA
62import UpsertUser from "@/components/UpsertUser.vue";
63import { store } from "./store.js";
98db2082 64export default {
98db2082
BA
65 components: {
66 ContactForm,
67 Language,
68 Settings,
c66a829b
BA
69 UpsertUser,
70 },
71 data: function() {
72 return {
73 st: store.state,
74 };
98db2082
BA
75 },
76};
77</script>
78
625022fd
BA
79<style lang="sass">
80#app
81 font-family: "Avenir", Helvetica, Arial, sans-serif
82 -webkit-font-smoothing: antialiased
83 -moz-osx-font-smoothing: grayscale
625022fd 84
85e5b5c1
BA
85.container
86 @media screen and (max-width: 767px)
87 padding: 0
88
fb54f098
BA
89.row > div
90 padding: 0
91
92.nopadding
93 padding: 0
94
95#modalWelcome
96 max-width: 767px
97 @media screen and (max-width: 767px)
98 max-width: 100vw
99 img
100 width: 75%
101 @media screen and (max-width: 767px)
102 width: 100%
103 max-width: 552px
104 ul
105 list-style-type: none
106 // TODO: bad practice, shouldn't use table to align things...
107 table.list-table
108 width: 300px
109 margin: 0 auto
110 border: 0
111 tbody
112 border: 0
113 tr
114 border: 0
115 margin: 0
116 padding: 0
117 td
118 padding: 0
119 text-align: left
120 border: 0
121
85e5b5c1
BA
122header
123 width: 100%
124 display: flex
125 align-items: center
126 justify-content: center
127 margin: 0 auto
128 & > img
129 width: 30px
130 height: 30px
131
132.clickable
133 cursor: pointer
134
135nav
136 width: 100%
fb54f098 137 margin: 0
85e5b5c1
BA
138 padding: 0
139 & > #menuBar
140 width: 100%
141 padding: 0
142 & > #leftMenu
143 padding: 0
144 width: 50%
145 display: inline-flex
146 align-items: center
147 justify-content: flex-start
148 & > a
149 display: inline-block
150 color: #2c3e50
151 &.router-link-exact-active
152 color: #42b983
153 & > #rightMenu
154 padding: 0
155 width: 50%
156 display: inline-flex
157 align-items: center
158 justify-content: flex-end
159 & > div
160 display: inline-block
fb54f098
BA
161 &#flagContainer
162 display: inline-flex
85e5b5c1
BA
163 & > img
164 padding: 0
fb54f098
BA
165 width: 36px
166 height: 27px
85e5b5c1
BA
167
168// TODO: drawer, until 600px wide OK (seemingly)
169// After, zone where left and right just go on top of another
170// Then, on narrow screen put everything on one line
171[type="checkbox"].drawer+*
172 right: -767px
173
174footer
175 //background-color: #000033
176 font-size: 1rem
177 width: 100%
178 display: inline-flex
179 align-items: center
180 justify-content: center
181 & > a
182 display: inline-block
183 margin: 0 10px 0 0
184 &:link
185 color: #2c3e50
186 &:hover
187 text-decoration: none
188 & > p
189 display: inline-block
190 margin: 0 0 0 10px
625022fd 191</style>