improved css

resources/css/style.css

@@ -1,8 +1,14 @@
+html, body{
+  padding: 0;
+  margin: 0;
+}
+html{
+  height: 100%;
+}
 body{
-	background: gray;
+  min-height: 100%;
-	width: 100%;
-	height: 100%;
 }
+
 .tile{
 	border: 1px solid black;
 	width: 30px;
@@ -23,12 +29,18 @@ svg text{
 
 .menu{
 	position: fixed;
-	bottom: 40px;
+	width: 100%;
+	height: 30px;
+	bottom: 0px;
 }
 
-.menu .tile{
+.menu > div{
+	position: relative;
+	float: left;
+	border: 1px solid black;
+	height: 30px;
 	background: white;
-	font-size: 12px;
+	padding: 3px;
 }
 
 .menu .list{
@@ -39,16 +51,16 @@ svg text{
 	display: inherit;
 }
 
-.menu .tile .list{
+.menu > div > .list{
 	position: fixed;
-	right: 0;
 	height: 30px;
-	left: 0; 
+	bottom: 30px;
-	bottom: 40px; 
+	width: 100%;
 }
 
-.menu .tile .list .tile{
+.menu > div > .list > *{
 	position: relative;
+	float: left;
 }
 
 #messages{

resources/js/plan.js

@@ -60,7 +60,7 @@ function enableAdding(ev){
 		mode = null;
 	} else {
 		$(selected).css('border','2px solid red');
-		$('.menu .tile .list').css('display','inherit');
+		$('.menu .addtile .list').css('display','inherit');
 		mode = ADD;
 	}
 	return false; // otherwise body.click would also be triggered
@@ -69,6 +69,6 @@ function enableAdding(ev){
 window.onload = function () {
 	var isDragging = false;
 	$('.menu > div').click(closeMenu);
-	$('.menu .tile .list svg').click(enableAdding);
+	$('.menu .addtile .list svg').click(enableAdding);
 	$(BODY).click(bodyClick);
 }

src/main/java/de/srsoftware/web4rail/Plan.java

@@ -68,22 +68,15 @@ public class Plan {
 
 	private Tag menu() throws IOException {
 		Tag menu = new Tag("div").clazz("menu");
-		Tag tileMenu = new Tag("div").clazz("tile").content("Add tile");
 		
-		StringBuffer tiles = new StringBuffer();
+		tileMenu().addTo(menu);
-		tiles.append(new StraightH().html());
+		actionMenu().addTo(menu);
-		tiles.append(new StraightV().html());
+			
-		tiles.append(new DiagES().html());
+		return menu;
-		tiles.append(new DiagSW().html());
+	}
-		tiles.append(new DiagNE().html());
-		tiles.append(new DiagWN().html());
-		tiles.append(new EndE().html());
-		tiles.append(new EndW().html());
-		tiles.append(new TurnoutSE().html());
-		tiles.append(new TurnoutWS().html());
-		tiles.append(new TurnoutSW().html());
-		new Tag("div").clazz("list").content(tiles.toString()).addTo(tileMenu).addTo(menu);
 
+	private Tag actionMenu() {
+		Tag menu = new Tag("div").clazz("actions").content("Actions");
 		return menu;
 	}
 
@@ -120,4 +113,22 @@ public class Plan {
 	private String t(String message, Object...fills) {
 		return Translation.get(Application.class, message, fills);
 	}
+	
+	private Tag tileMenu() throws IOException {
+		Tag tileMenu = new Tag("div").clazz("addtile").content("Add tile");
+		
+		StringBuffer tiles = new StringBuffer();
+		tiles.append(new StraightH().html());
+		tiles.append(new StraightV().html());
+		tiles.append(new DiagES().html());
+		tiles.append(new DiagSW().html());
+		tiles.append(new DiagNE().html());
+		tiles.append(new DiagWN().html());
+		tiles.append(new EndE().html());
+		tiles.append(new EndW().html());
+		tiles.append(new TurnoutSE().html());
+		tiles.append(new TurnoutWS().html());
+		tiles.append(new TurnoutSW().html());
+		return new Tag("div").clazz("list").content(tiles.toString()).addTo(tileMenu);
+	}
 }