Revert to news button in red, no blinking. Add autoplay option

[vchess.git] / client / src / components / MoveList.vue

diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue
index 4357098..140b71c 100644 (file)
--- a/client/src/components/MoveList.vue
+++ b/client/src/components/MoveList.vue
@@ -27,6 +27,12 @@ div
       :aria-label="st.tr['Resize board']"
     )
       img.inline(src="/images/icons/resize.svg")
+    button.tooltip(
+      v-if="canAnalyze"
+      @click="$emit('analyze')"
+      :aria-label="st.tr['Analyse']"
+    )
+      img.inline(src="/images/icons/analyse.svg")
     #downloadDiv(v-if="canDownload")
       a#download(href="#")
       button.tooltip(
@@ -34,12 +40,6 @@ div
         :aria-label="st.tr['Download'] + ' PGN'"
       )
         img.inline(src="/images/icons/download.svg")
-    button.tooltip(
-      v-if="canAnalyze"
-      @click="$emit('analyze')"
-      :aria-label="st.tr['Analyse']"
-    )
-      img.inline(src="/images/icons/analyse.svg")
   #scoreInfo(v-if="score!='*'")
     span.score {{ score }}
     span.score-msg {{ st.tr[message] }}
@@ -74,9 +74,14 @@ export default {
     };
   },
   mounted: function() {
-    document.getElementById("adjuster").addEventListener(
-      "click",
-      processModalClick);
+    document.getElementById("adjuster")
+      .addEventListener("click", processModalClick);
+    if ("ontouchstart" in window) {
+      // Disable tooltips on smartphones:
+      document.querySelectorAll("#aboveMoves .tooltip").forEach(elt => {
+        elt.classList.remove("tooltip");
+      });
+    }
     // Take full width on small screens:
     let boardSize = parseInt(localStorage.getItem("boardSize"));
     if (!boardSize) {
@@ -108,13 +113,12 @@ export default {
       if (window.innerWidth <= 767) return; //scrolling would hide chessboard
       // $nextTick to wait for table > tr to be rendered
       this.$nextTick(() => {
-        let curLine = document.querySelector(".td.highlight-lm");
-        if (!!curLine) curLine = curLine.parentNode;
-        if (!curLine && this.moves.length > 0)
+        let curMove = document.querySelector(".td.highlight-lm");
+        if (!curMove && this.moves.length > 0)
           // Cursor is before game beginning, and some moves were made:
-          curLine = document.querySelector(".moves-list .tr:first-child")
-        if (!!curLine) {
-          curLine.scrollIntoView({
+          curMove = document.querySelector(".moves-list > .tr:first-child > .td");
+        if (!!curMove) {
+          curMove.scrollIntoView({
             behavior: "auto",
             block: "nearest"
           });
@@ -155,6 +159,7 @@ export default {
 
 <style lang="sass" scoped>
 .moves-list
+  user-select: none
   cursor: pointer
   min-height: 1px
   max-height: 500px
@@ -188,7 +193,7 @@ export default {
   padding: 5px
 
 img.inline
-  height: 24px
+  height: 22px
   @media screen and (max-width: 767px)
     height: 18px
 
@@ -219,4 +224,7 @@ span#rulesBtn
 
 button
   margin: 0
+
+#aboveMoves button
+  padding-bottom: 5px
 </style>