Fixed display of multiple boxes in fieldset

browser/index.ts

@@ -211,10 +211,15 @@ class Client {
   private setDisplay (state : State) {
     const widthEl : HTMLInputElement = document.getElementById('displayWidth') as HTMLInputElement;
     const heightEl : HTMLInputElement = document.getElementById('displayHeight') as HTMLInputElement;
+    const srcWidthEl : HTMLInputElement = document.getElementById('sourceWidth') as HTMLInputElement;
+    const srcHeightEl : HTMLInputElement = document.getElementById('sourceHeight') as HTMLInputElement;
 
     widthEl.value = state.display.width as any;
     heightEl.value = state.display.height as any;
 
+    srcWidthEl.value = state.source.width as any;
+    srcHeightEl.value = state.source.height as any;
+
     widthEl.readOnly = false;
     heightEl.readOnly = false;
     //console.dir(state);

static/css/style.css

@@ -45,21 +45,20 @@ html, body{
 
 .half{
 	box-sizing: border-box;
-	width: 50%;
+	flex: 0 0 50%;
 }
 
 .third{
 	box-sizing: border-box;
-	width: 33.3%;
+	flex: 0 0 33.33333%;
 }
 
-fieldset.inline {
+.flex {
 	display: flex;
 }
 
-fieldset.inline .field-row{
+fieldset.inline .field-row {
 	display: inline-block;
-	margin-left: 10px;
 }
 
 fieldset.inline .field-row input {

static/js/index.js

@@ -180,8 +180,12 @@ class Client {
     setDisplay(state) {
         const widthEl = document.getElementById('displayWidth');
         const heightEl = document.getElementById('displayHeight');
+        const srcWidthEl = document.getElementById('sourceWidth');
+        const srcHeightEl = document.getElementById('sourceHeight');
         widthEl.value = state.display.width;
         heightEl.value = state.display.height;
+        srcWidthEl.value = state.source.width;
+        srcHeightEl.value = state.source.height;
         widthEl.readOnly = false;
         heightEl.readOnly = false;
         this.display.set(state);

views/index.hbs

@@ -20,7 +20,7 @@
 		<div class="window-body">
 			<div>
 				<ul class="tree-view" id="display"><canvas></canvas></ul>
-				<div>
+				<div class="flex">
 					<fieldset id="screenResolution" class="inline third">
 	  					<legend>Screen</legend>
 						<span class="field-row">