From 5e53ec5e36de0485467cb9553b8fa0bb580dc403 Mon Sep 17 00:00:00 2001
From: Simon Tatham <anakin@pobox.com>
Date: Tue, 5 Sep 2017 07:06:48 +0100
Subject: [PATCH] Organise the JS menus/buttons bar more like a menu.

I'm about to introduce a few more options, and the button bar is
already a bit wide, so I think I should shrink it horizontally before
putting more stuff on it. So I've organised the options into something
more like the Game and Type submenus that the desktop versions use.

However, I haven't gone quite all the way, on the basis that the web
versions will be at least slightly playable on devices without much
keyboard, which makes it worth keeping the in-play actions (Undo,
Redo, and to a lesser extent Restart and Solve) accessible as
top-level buttons in a single click each.

As part of this change, I've also separated the menu bar into a
drop-down menus section and a top-level buttons section with a gap
between them, and put a signalling "..." on the end of the titles in
the former section.

This change also removes the class="left" on the game-type menu and
its submenus, which were previously there to deal with that menu being
all the way over on the far right of the menu bar. But the CSS for
those classes is still there in jspage.pl, and should still work if I
need it again in future.
---
 emcclib.js     |  1 -
 html/jspage.pl | 22 +++++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/emcclib.js b/emcclib.js
index cd8876e..3f51df4 100644
--- a/emcclib.js
+++ b/emcclib.js
@@ -108,7 +108,6 @@ mergeInto(LibraryManager.library, {
         item.appendChild(tick);
         item.appendChild(document.createTextNode(name));
         var submenu = document.createElement("ul");
-        submenu.className = "left";
         item.appendChild(submenu);
         gametypesubmenus[menuid].appendChild(item);
         var toret = gametypesubmenus.length;
diff --git a/html/jspage.pl b/html/jspage.pl
index a21f977..f828ffe 100755
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -103,6 +103,15 @@ EOF
     color: rgba(0,0,0,0.5);
 }
 
+#gamemenu ul li.separator {
+    color: transparent;
+    border: 0;
+}
+
+#gamemenu ul li.afterseparator {
+    border-left: 1px solid rgba(0,0,0,0.3);
+}
+
 #gamemenu ul li:first-of-type {
     /* Reinstate the left border for the leftmost top-level menu item */
     border-left: 1px solid rgba(0,0,0,0.3);
@@ -196,14 +205,17 @@ ${unfinishedpara}
 
 <hr>
 <div id="puzzle" style="display: none">
-<div id="gamemenu"><ul><li id="new">New game</li
-><li id="restart">Restart game</li
+<div id="gamemenu"><ul><li>Game...<ul
+><li id="new">New game</li
+><li id="specific">Enter game ID</li
+><li id="random">Enter random seed</li
+></ul></li
+><li>Type...<ul id="gametype"></ul></li
+><li class="separator"></li
+><li id="restart" class="afterseparator">Restart game</li
 ><li id="undo">Undo move</li
 ><li id="redo">Redo move</li
 ><li id="solve">Solve game</li
-><li id="specific">Enter game ID</li
-><li id="random">Enter random seed</li
-><li>Select game type<ul id="gametype" class="left"></ul></li
 ></ul></div>
 <div align=center>
   <div id="resizable" style="position:relative; left:0; top:0">