improved window tiling

resources/css/style.css

@@ -7,12 +7,21 @@ html{
 }
 body{
   min-height: 100%;  
+  background: #c6dbd2;
 }
 
-#plan{
-	background: #c6dbd2;
+#plan,
+.window{
 	height: 100%;
 	width: 100%;
+	overflow: auto;
+	position: absolute;
+}
+
+.window{
+	bottom: 0;
+	right: 0;
+	background: white;
 }
 
 .tile{
@@ -69,7 +78,7 @@ svg circle{
 	position: fixed;
 	width: 100%;
 	height: 30px;
-	bottom: 0px;
+	bottom: 20px;
 }
 
 .menu > div{
@@ -95,8 +104,9 @@ svg circle{
 .menu > div > .list{
 	position: fixed;
 	height: 30px;
-	bottom: 30px;
+	bottom: 50px;
 	width: 100%;
+	z-index: 10;
 }
 
 .menu > div > .list > *{
@@ -119,32 +129,29 @@ svg circle{
 	z-index: 100;
 }
 
-.window{
-	position: fixed;
-	top: 50%;
-	bottom: 10px;
-	left: 10px;
-	right: 10px;
-	background: #ecffa2;
-	padding: 5px;
-	overflow: scroll;
-}
-
 h2{
 	margin: 0 0 10px;
 	text-align: center;
 	background: #627fda;
 }
 
+.swapbtn,
 .closebtn{
 	position: absolute;
-	right: 10px;
 	top: 10px;
 	font-size: 30px;
 	background: red;
 	color: white;
 }
 
+.closebtn{
+	right: 10px;	
+}
+
+.swapbtn{
+	right: 50px;
+}
+
 #Eraser polygon{
 	stroke: red;
 }

resources/js/plan.js

@@ -51,6 +51,7 @@ function closeMenu(ev){
 
 function closeWindows(){
 	$('.window').remove();
+	$('#plan').css('height','').css('width','');
 }
 
 function connectCu(){
@@ -158,8 +159,13 @@ function request(data){
 			if (resp.startsWith('<svg')){
 				$(PLAN).append($(resp));
 			} else if (resp.startsWith('<')) {
-//				console.log("appending to body: "+resp.substring(0,10));
+				var isWindow = $(resp).attr('class') == 'window';
+				if (isWindow){
+					$('.window').remove();
+					$('#plan').css('height','50%');					
+				}
 				$(BODY).append($(resp));
+				$('.window').css('height','50%');
 			} else {
 				addMessage(resp);
 			}
@@ -185,6 +191,18 @@ function stream(ev){
 	if (data.startsWith("dropclass")) return dropClass(data.substring(10));
 }
 
+function swapTiling(ev){
+	if ($('.swapbtn').text() == '◧'){
+		$('.swapbtn').text('⬒');
+		$('.window').css('height','').css('width','50%');
+		$(PLAN).css('height','').css('width','50%');
+	} else {
+		$('.swapbtn').text('◧');
+		$('.window').css('height','50%').css('width','');
+		$(PLAN).css('height','50%').css('width','');		
+	}
+}
+
 function train(id,action){
 	return request({realm:'train',action:action,id:id});
 }