From 4f8871051c030acd51172b73cd20aedce687c2a8 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 27 Jan 2020 19:20:25 +0100
Subject: [PATCH] Various fixes

---
 client/public/index.html                |  2 +-
 client/src/App.vue                      | 19 ++++++++++++-----
 client/src/components/ChallengeList.vue | 26 +++++++++++------------
 client/src/components/Chat.vue          | 17 ++++++++-------
 client/src/components/ContactForm.vue   |  5 +++++
 client/src/components/GameList.vue      | 28 +++++++++++++------------
 client/src/components/Language.vue      | 13 +++++++++---
 client/src/store.js                     |  4 ++--
 8 files changed, 68 insertions(+), 46 deletions(-)

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() {
-- 
2.44.0