From: Benjamin Auder <benjamin.auder@somewhere> Date: Mon, 27 Jan 2020 18:20:25 +0000 (+0100) Subject: Various fixes X-Git-Url: https://git.auder.net/variants/img/pieces/css/doc/current/git-logo.png?a=commitdiff_plain;h=4f8871051c030acd51172b73cd20aedce687c2a8;p=vchess.git Various fixes --- diff --git a/client/public/index.html b/client/public/index.html index af506cdf..22901afa 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -7,7 +7,7 @@ <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="stylesheet" - href="//cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0/mini-default.min.css"> + href="//cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700"> <style> diff --git a/client/src/App.vue b/client/src/App.vue index 84f4b51e..f337394e 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -13,7 +13,7 @@ nav label.drawer-toggle(for="drawerControl") input#drawerControl.drawer(type="checkbox") - #menuBar + #menuBar(@click="hideDrawer") label.drawer-close(for="drawerControl") #leftMenu router-link(to="/") @@ -22,7 +22,7 @@ | {{ st.tr["Variants"] }} router-link(to="/mygames") | {{ st.tr["My games"] }} - a(href="https://groups.google.com/forum/#!forum/vchess-club") + a(href="https://forum.vchess.club") | {{ st.tr["Forum"] }} #rightMenu .clickable(onClick="doClick('modalUser')") @@ -66,6 +66,14 @@ export default { return `/images/flags/${this.st.lang}.svg`; }, }, + methods: { + hideDrawer: function(e) { + if (e.target.innerText == "Forum") + return; //external link + e.preventDefault(); //TODO: why is this needed? + document.getElementsByClassName("drawer")[0].checked = false; + }, + }, }; </script> @@ -131,12 +139,13 @@ nav width: 36px height: 27px -// TODO: drawer, until 600px wide OK (seemingly) -// After, zone where left and right just go on top of another -// Then, on narrow screen put everything on one line [type="checkbox"].drawer+* right: -767px +#menuBar + label.drawer-close + top: 50px + footer //background-color: #000033 font-size: 1rem diff --git a/client/src/components/ChallengeList.vue b/client/src/components/ChallengeList.vue index 07aa326b..890ec1d9 100644 --- a/client/src/components/ChallengeList.vue +++ b/client/src/components/ChallengeList.vue @@ -1,16 +1,18 @@ <template lang="pug"> div table - tr - th Variant - th From - th To - th Cadence - tr(v-for="c in sortedChallenges" @click="$emit('click-challenge',c)") - td {{ c.vname }} - td {{ c.from.name }} - td {{ c.to }} - td {{ c.timeControl }} + thead + tr + th Variant + th From + th To + th Cadence + tbody + tr(v-for="c in sortedChallenges" @click="$emit('click-challenge',c)") + td(data-label="Variant") {{ c.vname }} + td(data-label="From") {{ c.from.name }} + td(data-label="To") {{ c.to }} + td(data-label="Cadence") {{ c.timeControl }} </template> <script> @@ -40,7 +42,3 @@ export default { }, }; </script> - -<style lang="sass"> -// TODO: affichage bizarre sur petits écrans <=767px -</style> diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue index 517d2cdd..0570752a 100644 --- a/client/src/components/Chat.vue +++ b/client/src/components/Chat.vue @@ -1,11 +1,10 @@ <template lang="pug"> -div - .card.smallpad - h4 Chat - p(v-for="chat in chats" :class="classObject(chat)" v-html="chat.msg") - input#inputChat(type="text" :placeholder="st.tr['Type here']" - @keyup.enter="sendChat") - button#sendChatBtn(@click="sendChat") {{ st.tr["Send"] }} +#chat.card + h4 Chat + p(v-for="chat in chats" :class="classObject(chat)" v-html="chat.msg") + input#inputChat(type="text" :placeholder="st.tr['Type here']" + @keyup.enter="sendChat") + button#sendChatBtn(@click="sendChat") {{ st.tr["Send"] }} </template> <script> @@ -61,9 +60,11 @@ export default { }; </script> -<style lang="sass"> +<style lang="sass" scoped> .my-chatmsg color: grey .opp-chatmsg color: black +#chat + max-width: 100% </style> diff --git a/client/src/components/ContactForm.vue b/client/src/components/ContactForm.vue index aae0a504..2f970ae7 100644 --- a/client/src/components/ContactForm.vue +++ b/client/src/components/ContactForm.vue @@ -67,3 +67,8 @@ export default { }, }; </script> + +<style lang="sass" scoped> +#emailSent + display: none +</style> diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue index a9090550..4233a01b 100644 --- a/client/src/components/GameList.vue +++ b/client/src/components/GameList.vue @@ -1,19 +1,21 @@ <template lang="pug"> div table - tr - th Variant - th White - th Black - th Time control - th(v-if="showResult") Result - tr(v-for="g in sortedGames" @click="$emit('show-game',g)" - :class="{'my-turn': g.myTurn}") - td {{ g.vname }} - td {{ g.players[0].name || "@nonymous" }} - td {{ g.players[1].name || "@nonymous" }} - td {{ g.timeControl }} - td(v-if="showResult") {{ g.score }} + thead + tr + th Variant + th White + th Black + th Time control + th(v-if="showResult") Result + tbody + tr(v-for="g in sortedGames" @click="$emit('show-game',g)" + :class="{'my-turn': g.myTurn}") + td(data-label="Variant") {{ g.vname }} + td(data-label="White") {{ g.players[0].name || "@nonymous" }} + td(data-label="Black") {{ g.players[1].name || "@nonymous" }} + td(data-label="Time control") {{ g.timeControl }} + td(v-if="showResult" data-label="Result") {{ g.score }} </template> <script> diff --git a/client/src/components/Language.vue b/client/src/components/Language.vue index fc305620..5c7e1e52 100644 --- a/client/src/components/Language.vue +++ b/client/src/components/Language.vue @@ -10,12 +10,12 @@ div div(role="dialog") #language.card label.modal-close(for="modalLang") - form + form(@change="setLanguage") fieldset label(for="langSelect") {{ st.tr["Language"] }} select#langSelect each language,langCode in langName - option(value=langCode selected=(lang==langCode)) + option(value=langCode) =language </template> @@ -28,7 +28,14 @@ export default { st: store.state, }; }, - methods: { + mounted: function() { + // TODO: better style would be in pug directly, but how? + document.querySelectorAll("#langSelect > option").forEach(opt => { + if (opt.value == this.st.lang) + opt.selected = true; + }); + }, + methods: { setLanguage: function(e) { localStorage["lang"] = e.target.value; store.setLanguage(e.target.value); diff --git a/client/src/store.js b/client/src/store.js index 1cfb7c5a..94dcb065 100644 --- a/client/src/store.js +++ b/client/src/store.js @@ -55,9 +55,9 @@ export const store = this.state.conn.onclose = this.socketCloseListener; const supportedLangs = ["en","es","fr"]; this.state.lang = localStorage["lang"] || - supportedLangs.includes(navigator.language) + (supportedLangs.includes(navigator.language) ? navigator.language - : "en"; + : "en"); this.setTranslations(); }, setTranslations: async function() {