simplify configuration window

diff --git a/public/index.html b/public/index.html
index 9cb5862337391e12ee4a6e9b6eec75209965b7ea..4811d72d2c06e54d84077b99f68c647807ba9db4 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -23,15 +23,6 @@
             <div id="chat-messages"></div>
             <textarea id="chat-ta" placeholder="Write a message to your adversaries here" data-l10n="placeholder"></textarea>
             <button id="chat-btn" class="minibutton" data-l10n="text-content">Send message</button>
-            <button id="modal-config-btn" class="text-content">Configuration</button>
-           <div class="modal" id="modal-config-dialog">
-               <div class="modal-content">
-                   <h2>Configuration window</h2>
-            <div id="prefs-sound">
-                <p><label><input type="checkbox" id="tiles-sound" checked="checked" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
-                <p><label><input type="checkbox" id="msg-sound" checked="checked" /><span data-l10n="text-content">Sound of messages</span></label></p>
-            </div>
-
             <div id="lang-selection">
                 <label>
                     <span data-l10n="text-content">Interface language: </span>
@@ -51,15 +42,22 @@
                     </select>
                 </label>
             </div>
-                   <div class="modal-buttons">
-                       <button id="modal-cancel-btn" data-l10n="text-content">Cancel</button>
-                        <button id="modal-validate-btn" data-l10n="text-content">Validate</button>
-                   </div>
-               </div>
-           </div>
         </div>
 
-        <div id="content">
+        <div class="modal" id="modal-config-dialog">
+            <div class="modal-content">
+                <h2>
+                    <span data-l10n="text-content">Configuration window</span>
+                    <span class="modal-button" id="modal-close-btn">&#215;</span>
+               </h2>
+                <div id="prefs-sound">
+                    <p><label><input type="checkbox" id="tiles-sound" checked="checked" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
+                    <p><label><input type="checkbox" id="msg-sound" checked="checked" /><span data-l10n="text-content">Sound of messages</span></label></p>
+                </div>
+            </div>
+        </div>
+        
+       <div id="content">
             <table id="board">
                 <tr><td class="corner"></td></tr>
             </table>
@@ -79,6 +77,7 @@
             <p id="help-turn" data-l10n="text-content">Who's turn? Click on the Turn button!</p>
             <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="modal-config-btn" class="text-content" data-l10n="text-content">Configuration</button>
         </div>
     </body>
 </html>

diff --git a/public/trivabble.css b/public/trivabble.css
index fa5119bdd0e3357e497118b086ab09cbd92c3a69..66d8f7694b53ffe9872738678d83b41be17cce2e 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -482,11 +482,24 @@ td.blink {
     background-color: white;
     padding: 1rem 1.5rem;
     width: 24rem;
-    border-radius: 0.1rem;
+    border-radius: 0.3rem;
 }
-.modal-buttons {
+.modal-content h2 {
+    margin: 0px;
+    font-weight: bold;
+    font-size: large;
+}
+.modal-button {
     float: right;
-    padding-top: 1rem;
+    width: 1.5rem;
+    line-height: 1.5rem;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    background-color: lightgray;
+}
+.modal-button:hover {
+    background-color: darkgray;
 }
 .show-modal {
     opacity: 1;

diff --git a/public/trivabble.js b/public/trivabble.js
index b7456bedd2eac8ae618f06ad44cb80f2c42bd03f..fbcf9579c6d9f2788a3f57eb5170f90d9fe39b42 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1610,7 +1610,7 @@
         helpClear.onclick  = clearGame;
 
        document.getElementById("modal-config-btn").onclick = showConfig;
-       document.getElementById("modal-cancel-btn").onclick = showConfig;
+       document.getElementById("modal-close-btn").onclick = showConfig;
     }
 
     function initGame() {