From 87d01130bd77a2e26f47c89dc154b1e910305761 Mon Sep 17 00:00:00 2001
From: Jeff Parsons <Jeff@pcjs.org>
Date: Wed, 20 Apr 2016 16:43:01 -0700
Subject: [PATCH] Make the PC8080 prototype page more responsive

---
 devices/pc8080/machine/invaders/machine.xml |  6 ++---
 devices/pc8080/panel/default.xml            | 26 ++++++++-------------
 modules/pc8080/lib/video.js                 |  3 +--
 modules/pcjs/lib/video.js                   |  2 +-
 modules/shared/templates/components.xsl     |  1 +
 5 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/devices/pc8080/machine/invaders/machine.xml b/devices/pc8080/machine/invaders/machine.xml
index e5312a99e..f568b2cdc 100644
--- a/devices/pc8080/machine/invaders/machine.xml
+++ b/devices/pc8080/machine/invaders/machine.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <?xml-stylesheet type="text/xsl" href="/versions/pc8080/1.21.7/machine.xsl"?>
-<machine id="invaders" class="pc8080" border="1" width="980px" pos="center" background="#FAEBD7">
+<machine id="invaders" class="pc8080" border="1" pos="center" background="#FAEBD7">
 	<name pos="center">Space Invaders</name>
 	<computer id="computer"/>
 	<cpu id="cpu8080" model="8080" cycles="2000000"/>
@@ -9,9 +9,9 @@
 	<rom id="romF" addr="0x1000" size="0x0800" file="/devices/pc8080/rom/invaders/INVADERS-F.json"/>
 	<rom id="romE" addr="0x1800" size="0x0800" file="/devices/pc8080/rom/invaders/INVADERS-E.json"/>
 	<ram id="ram"  addr="0x2000" size="0x2000"/>
-	<video id="video" screenwidth="256" screenheight="224" scale="true" aspect="1.33" rotate="90" addr="0x2000" pos="left" padding="8px">
+	<video id="video" screenWidth="224" screenHeight="256" aspect="1.33" rotate="90" addr="0x2400" width="40%" pos="left" padding="8px">
 		<menu>
-			<title>256x224 Screen</title>
+			<title>224x256 Screen</title>
 		</menu>
 	</video>
 	<panel ref="/devices/pc8080/panel/default.xml"/>
diff --git a/devices/pc8080/panel/default.xml b/devices/pc8080/panel/default.xml
index 13936df82..662edb544 100644
--- a/devices/pc8080/panel/default.xml
+++ b/devices/pc8080/panel/default.xml
@@ -1,30 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<panel id="panel" width="500px" pos="left" padding="8px">
+<panel id="panel" width="50%" pos="left" padding="8px">
 	<name>Control Panel</name>
-	<control type="container" class="pcjs-textarea" width="58%" padbottom="8px" padright="8px">
-		<control type="textarea" binding="print" width="100%" height="260px" pos="relative" padbottom="4px" style="resize:vertical;"/>
-		<control type="container">
-			<control type="text" binding="debugInput" width="auto"/>
-			<control type="button" binding="debugEnter">Enter</control>
-			<control type="button" binding="clear">Clear</control>
-		</control>
+	<control type="container" class="pcjs-textarea" width="100%" padright="8px">
+		<control type="textarea" binding="print" width="100%" height="252px" pos="relative" style="resize:vertical;"/>
 	</control>
-	<control type="container" class="pcjs-registers" width="20%" padleft="8px">
+	<control type="container" class="pcjs-registers" width="100%" padleft="8px">
 		<control type="register" label="P" binding="PS" width="20px" padright="8px" padbottom="8px">00</control>
 		<control type="register" label="A" binding="A" width="20px" padright="8px" padbottom="8px">00</control>
-		<control pos=""/>
 		<control type="register" label="B" binding="B" width="20px" padright="8px" padbottom="8px">00</control>
 		<control type="register" label="C" binding="C" width="20px" padright="8px" padbottom="8px">00</control>
-		<control pos=""/>
 		<control type="register" label="D" binding="D" width="20px" padright="8px" padbottom="8px">00</control>
 		<control type="register" label="E" binding="E" width="20px" padright="8px" padbottom="8px">00</control>
-		<control pos=""/>
 		<control type="register" label="H" binding="H" width="20px" padright="8px" padbottom="8px">00</control>
 		<control type="register" label="L" binding="L" width="20px" padright="8px" padbottom="8px">00</control>
-		<control pos=""/>
 		<control type="register" label="SP" binding="SP" width="40px" padright="8px" padbottom="8px">0000</control>
 		<control type="register" label="PC" binding="PC" width="40px" padright="8px" padbottom="8px">0000</control>
-		<control type="container" width="200px" pos="left">
+		<control type="container" pos="left">
 			<control type="flag" label="I" binding="I" width="8px" padright="4px" padbottom="8px">0</control>
 			<control type="flag" label="S" binding="S" width="8px" padright="4px" padbottom="8px">0</control>
 			<control type="flag" label="Z" binding="Z" width="8px" padright="4px" padbottom="8px">0</control>
@@ -32,8 +23,7 @@
 			<control type="flag" label="P" binding="P" width="8px" padright="4px" padbottom="8px">0</control>
 			<control type="flag" label="C" binding="C" width="8px" padright="4px" padbottom="8px">0</control>
 		</control>
-		<control pos=""/>
-		<control type="description" padbottom="8px">Speed:</control>
+		<control type="description" padleft="16px" padbottom="8px">Speed:</control>
 		<control type="description" binding="speed" padleft="4px" padbottom="8px">Stopped</control>
 	</control>
 	<control type="container" padleft="8px" padbottom="8px">
@@ -41,5 +31,9 @@
 		<control type="button" binding="step">Step</control>
 		<control type="button" binding="reset">Reset</control>
 		<control type="button" binding="setSpeed">Fast</control>
+		<control pos=""/>
+		<control type="text" binding="debugInput" width="100px"/>
+		<control type="button" binding="debugEnter">Enter</control>
+		<control type="button" binding="clear">Clear</control>
 	</control>
 </panel>
diff --git a/modules/pc8080/lib/video.js b/modules/pc8080/lib/video.js
index 6a662e169..451d34c02 100644
--- a/modules/pc8080/lib/video.js
+++ b/modules/pc8080/lib/video.js
@@ -49,7 +49,6 @@ if (NODE) {
  *
  *      screenWidth: width of the screen canvas, in pixels
  *      screenHeight: height of the screen canvas, in pixels
- *      scale: true for font scaling, false (default) to center the display on the screen
  *      aspect
  *      rotate
  *      addr
@@ -92,7 +91,7 @@ Video.init = function()
             return;
         }
 
-        eCanvas.setAttribute("class", PCJSCLASS + "-canvas");
+        eCanvas.setAttribute("class", "pcjs-canvas");
         eCanvas.setAttribute("width", parmsVideo['screenWidth']);
         eCanvas.setAttribute("height", parmsVideo['screenHeight']);
         eCanvas.style.backgroundColor = parmsVideo['screenColor'];
diff --git a/modules/pcjs/lib/video.js b/modules/pcjs/lib/video.js
index f5fa8ae96..7bfd0f17e 100644
--- a/modules/pcjs/lib/video.js
+++ b/modules/pcjs/lib/video.js
@@ -7245,7 +7245,7 @@ Video.init = function()
             return;
         }
 
-        eCanvas.setAttribute("class", PCJSCLASS + "-canvas");
+        eCanvas.setAttribute("class", "pcjs-canvas");
         eCanvas.setAttribute("width", parmsVideo['screenWidth']);
         eCanvas.setAttribute("height", parmsVideo['screenHeight']);
         eCanvas.style.backgroundColor = parmsVideo['screenColor'];
diff --git a/modules/shared/templates/components.xsl b/modules/shared/templates/components.xsl
index 10473db4e..62a0cd841 100644
--- a/modules/shared/templates/components.xsl
+++ b/modules/shared/templates/components.xsl
@@ -163,6 +163,7 @@
 				<xsl:when test="@width">
 					<xsl:choose>
 						<xsl:when test="$left != '' or $top != ''">width:<xsl:value-of select="@width"/>;</xsl:when>
+						<xsl:when test="@pos = 'left' or @pos = 'right'">width:<xsl:value-of select="@width"/>;max-width:<xsl:value-of select="@width"/>;</xsl:when>
 						<xsl:otherwise>width:auto;max-width:<xsl:value-of select="@width"/>;</xsl:otherwise>
 					</xsl:choose>
 				</xsl:when>