Work on the presentation of the tip help box

diff --git a/l10n/po/fr/trivabble.po b/l10n/po/fr/trivabble.po
index 3c8f4bf253b98eec474836fcaf2cc5b63b1104dc..88b818ba8075c3720d2ebe63ae0cc71b8d368895 100644 (file)
--- a/l10n/po/fr/trivabble.po
+++ b/l10n/po/fr/trivabble.po
@@ -136,6 +136,12 @@ msgstr "Tour"
 msgid  "Who's turn? Click on the Turn button!"
 msgstr "À qui le tour ? Cliquez sur le bouton Tour !"
 
+msgid  "Click on (+) to increase someone's score."
+msgstr "Cliquez sur (+) pour augmenter le score de quelqu’un."
+
+msgid  "Show a cell to everyone by double-clicking on it."
+msgstr "Montrez une case à tout le monde en double-cliquant dessus."
+
 msgid  "Show my rack to other players"
 msgstr "Montrer mon jeu aux autres"
 
@@ -216,3 +222,9 @@ msgstr "Durée du flash laser"
 
 msgid  "Flash light color"
 msgstr "Couleur du flash laser"
+
+msgid  "Tip!"
+msgstr  "Astuce !"
+
+msgid "Next tip"
+msgstr "Astuce suivante"

diff --git a/l10n/pot/trivabble.pot b/l10n/pot/trivabble.pot
index 5b07c725431d993eaec1d6256070da64d448476f..49b95e6f3178f470da66a7c2e86e5e416bdc2b8e 100644 (file)
--- a/l10n/pot/trivabble.pot
+++ b/l10n/pot/trivabble.pot
@@ -221,3 +221,15 @@ msgstr ""
 
 msgid  "Flash light color"
 msgstr ""
+
+msgid  "Click on (+) to increase someone's score."
+msgstr ""
+
+msgid  "Show a cell to everyone by double-clicking on it."
+msgstr ""
+
+msgid  "Tip!"
+msgstr ""
+
+msgid "Next tip"
+msgstr ""

diff --git a/public/index.html b/public/index.html
index 117456a326f50933fc0ace49875b43d7bb84fa27..a1ac79a5e173e0d83b62b2b7baa326451ce969fe 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -78,22 +78,25 @@
                 <tr><th data-l10n="text-content">Participant</th><th data-l10n="text-content">Rack</th><th data-l10n="text-content">Score</th><th data-l10n="text-content">Turn</th></tr>
                 <tr id="participants-placeholder"><td colspan="4" data-l10n="text-content">Waiting for other participants…</td></tr>
             </table>
-            <button id="next-help-msg" class="minibutton" data-l10n="text-content">Next help message</button>
-            <div id="help-messages">
-                <p data-l10n="text-content" style="display:none">Click on the bag to take one tile.</p>
-                <p data-l10n="text-content" style="display:none">Click on someone's score&#10;to change it.</p>
-                <p data-l10n="text-content" style="display:none">Who's turn? Click on the Turn button!</p>
-                <p data-l0n="text-content" style="display:none">Spell checking is based on: <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
-                <p data-l0n="text-content" style="display:none">Click on the (+) to add someone's score.</p>
-                <p data-l0n="text-content" style="display:none">Double click or double tap on a cell to highlight it.</p>
-                <p data-l0n="text-content" style="display:none">Timer can be activated/deactivated in the preference window.</p>
-                <p data-l0n="text-content" style="display:none">Flashing light is adjustable in the preference window.</p>
-                <p data-l0n="text-content" style="display:none">Sound options are in the preference window.</p>
-                <p data-l0n="text-content" style="display:none">Move tile from your rag to the board to place new words.</p>
+            <div id="panel-buttons">
+                <button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of&#10;your rack in the bag</button>
+                <button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
+                <button id="check-spelling" class="minibutton" data-l10n="text-content" style="display:none">Check spelling for new words</button>
             </div>
-            <button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of&#10;your rack in the bag</button>
-            <button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
-            <button id="check-spelling" class="minibutton" data-l10n="text-content" style="display:none">Check spelling for new words</button>
+            <div id="help-box">
+                <p id="help-box-title" data-l10n="text-content">Tip!</p>
+                <div id="help-box-inner">
+                    <div id="help-messages">
+                        <p data-l10n="text-content" style="display:none">Click on the bag to take one tile.</p>
+                        <p data-l10n="text-content" style="display:none">Click on someone's score&#10;to change it.</p>
+                        <p data-l10n="text-content" style="display:none">Who's turn? Click on the Turn button!</p>
+                        <p data-l10n="text-content" style="display:none">Click on (+) to increase someone's score.</p>
+                        <p data-l10n="text-content" style="display:none">Show a cell to everyone by double-clicking on it.</p>
+                    </div>
+                    <button id="next-help-msg" class="minibutton" data-l10n="title" title="Next tip">→</button>
+                </div>
+            </div>
+            <p id="info-spell-checking" style="display:none;"><span data-l10n="text-content">Spell checking is based on:</span> <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
         </div>
     </body>
 </html>

diff --git a/public/trivabble.css b/public/trivabble.css
index 990c949f2e87aff8ba8b42d06ac42f7b6d969357..3093b86ec195de1964ecd2566a76887ed74eb97a 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -141,7 +141,7 @@ body {
     display:-webkit-flex;
     display:flex;
     -webkit-flex-direction:column;
-    flex-direction:column
+    flex-direction:column;
 }
 
 button {
@@ -335,8 +335,8 @@ td.blink {
 
 #panel {
     -webkit-justify-content:center;
-    justify-content:center;
-    text-align:center
+    justify-content:space-between;
+    text-align:center;
 }
 
 #bag, #rack-outer {
@@ -369,7 +369,6 @@ td.blink {
     height:160px;
     background:url(bag.svg) no-repeat;
     background-size:100% 100%;
-    flex:1;
 }
 
 #bag:hover {
@@ -564,10 +563,78 @@ td.blink {
 }
 
 #help-messages {
-    border:1px solid silver;
     box-sizing:border-box;
     overflow:auto;
     width: 20em;
     margin-bottom:1px;
-    height:5em;
+}
+
+#help-box {
+    margin-left:1ex;
+    margin-top:1ex;
+    align-items:center;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+}
+
+#help-box-inner {
+    display:flex;
+    flex-direction:row;
+    min-height:2em;
+    border-top:1px solid gray;
+    border-bottom:1px solid gray;
+    align-items:center;
+}
+
+#next-help-msg {
+    border:0;
+    background:none;
+    color:#333;
+    font-size:1.5rem;
+    margin-right:0.5ex;
+    background:#F1F1F1;
+    border-radius:100rem;
+    height:1.5em;
+    width:1.5em;
+    font-weight:bold;
+    transition:500ms;
+}
+
+#next-help-msg:hover {
+    background:#CCC;
+}
+
+#help-box-title {
+    margin:0;
+    padding:0 0 0.25ex 0;
+    text-align:right;
+    width:100%;
+    color:gray;
+    font-size:small;
+    font-style:italic;
+}
+
+#help-messages p {
+    margin:0;
+    font-size:0.9;
+    color:#222;
+}
+
+#help-box-inner:before {
+    content:"i";
+    display:inline-block;
+    height:1.2em;
+    width:1.2em;
+    font-style:italic;
+    font-weight:bold;
+    font-family:serif;
+    color:#AAA;
+    border:2px solid;
+    border-radius:100rem;
+}
+
+#panel-buttons {
+    display:flex;
+    flex-direction:column;
 }

diff --git a/public/trivabble.js b/public/trivabble.js
index 00a697052507c25674683337af577743b9d54d77..a9d373176a6bf3e6be211ee662527075581e1bc5 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1880,8 +1880,10 @@
         if (!Conf.ENABLE_SPELL_CHECKER || localStorage.spellCheckerEnabled === "false") {
             document.getElementById("check-spelling").style.display = "none";
             document.getElementById("enable-spell-checker").checked = false;
+            document.getElementById("info-spell-checking").style.display = "none";
         } else {
             document.getElementById("check-spelling").style.display = "";
+            document.getElementById("info-spell-checking").style.display = "";
             document.getElementById("enable-spell-checker").checked = true;
         }
     }
@@ -1890,11 +1892,11 @@
         if (x < 0) {
             return null;
         }
-        
+
         if (x < values.length) {
             return values[Math.floor(x)];
         }
-        
+
         for (let i = 0; i < values.length; i++) {
             if (x <= values[i]) {
                 return i;