Add spacing to menu buttons for easier touch input

arianne · Dec 2, 2023 · 5121d9a · 5121d9a
1 parent c614d57
commit 5121d9a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/srcjs/stendhal.css b/srcjs/stendhal.css
@@ -248,6 +248,11 @@ div.logcolR {
   overflow: auto;
 }
 
+.buttonColumn {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
 #minimap {
   border: 1px solid black;
   float: left
@@ -577,7 +582,7 @@ div.logcolR {
   font-family: Tally;
 }
 
-.emojibutton {
+.menubutton, .emojibutton {
   margin: 2px;
 }
 

diff --git a/srcjs/stendhal/ui/dialog/ApplicationMenuDialog.ts b/srcjs/stendhal/ui/dialog/ApplicationMenuDialog.ts
@@ -103,9 +103,9 @@ export class ApplicationMenuDialog extends DialogContentComponent {
 
 		var content = "";
 		for (var i = 0; i < this.actions.length; i++) {
-			content += "<div class=\"inlineblock\"><h4 class=\"menugroup\">" + stendhal.ui.html.esc(this.actions[i].title) + "</h4>"
+			content += "<div class=\"inlineblock buttonColumn\"><h4 class=\"menugroup\">" + stendhal.ui.html.esc(this.actions[i].title) + "</h4>"
 			for (var j = 0; j < this.actions[i].children.length; j++) {
-				content += "<button id=\"menubutton." + this.actions[i].children[j].action + "\">" + stendhal.ui.html.esc(this.actions[i].children[j].title) + "</button><br>";
+				content += "<button id=\"menubutton." + this.actions[i].children[j].action + "\" class=\"menubutton\">" + stendhal.ui.html.esc(this.actions[i].children[j].title) + "</button><br>";
 			}
 			content += "</div>";
 		}