better widget layout

3 files changed, 30 insertions, 32 deletions

diff --git a/fractiform.js b/fractiform.js
index cba7e16..79085ec 100644
--- a/fractiform.js
+++ b/fractiform.js
@@ -755,6 +755,20 @@ function add_widget(func) {
 	root.dataset.func = func;
 	root.classList.add('widget');
 	
+	{
+		// delete button
+		let delete_button = document.createElement('button');
+		let delete_img = document.createElement('img');
+		delete_img.src = 'x.svg';
+		delete_img.alt = 'delete';
+		delete_button.appendChild(delete_img);
+		delete_button.classList.add('widget-delete');
+		delete_button.addEventListener('click', function (e) {
+			root.remove();
+		});
+		root.appendChild(delete_button);
+	}
+	
 	{ // title
 		let title = document.createElement('div');
 		title.classList.add('widget-title');
@@ -782,20 +796,6 @@ function add_widget(func) {
 		root.appendChild(title);
 	}
 	
-	if (func !== 'output') {
-		// delete button
-		let delete_button = document.createElement('button');
-		let delete_img = document.createElement('img');
-		delete_img.src = 'x.svg';
-		delete_img.alt = 'delete';
-		delete_button.appendChild(delete_img);
-		delete_button.classList.add('widget-delete');
-		delete_button.addEventListener('click', function (e) {
-			root.remove();
-		});
-		root.appendChild(delete_button);
-	}
-	
 	// inputs
 	info.inputs.forEach(function (input) {
 		let container = document.createElement('div');
@@ -818,6 +818,7 @@ function add_widget(func) {
 		container.appendChild(document.createTextNode(' '));
 		container.appendChild(label);
 		root.appendChild(container);
+		root.appendChild(document.createTextNode(' '));
 		
 		input_element.addEventListener('change', function (e) {
 			if (auto_update) {
@@ -876,6 +877,7 @@ function add_widget(func) {
 		container.appendChild(document.createTextNode(' '));
 		container.appendChild(label);
 		root.appendChild(container);
+		root.appendChild(document.createTextNode(' '));
 	}
 	
 	{ // outputs
@@ -900,6 +902,7 @@ function add_widget(func) {
 			container.appendChild(span);
 		});
 		root.appendChild(container);
+		root.appendChild(document.createTextNode(' '));
 	}
 	
 	widgets_container.appendChild(root);
diff --git a/index.html b/index.html
index e0ada22..2fc0d81 100644
--- a/index.html
+++ b/index.html
@@ -111,6 +111,13 @@
 	.in input {
 		width: 5em;
 	}
+	.in, .out, .ins, .outs, .control, .widget-title {
+		display: inline;
+	}
+	.in, .out, .control {
+		margin: 0.5em;
+		white-space: nowrap;
+	}
 	.out {
 		font-weight: bold;
 		cursor: pointer;
@@ -133,35 +140,23 @@
 		height: 1.5em;
 	}
 	.widget {
-		display: inline-block;
-		width: 16em;
-		border: 2px solid white;
-		border-radius: 5px;
-		padding: 5px;
-		margin: 0.5em;
+		display: block;
+		border-bottom: 2px solid #777;
+		padding: 0.5em 0;
 		background: #111;
 		position: relative;
 	}
-	.outs {
-		position: absolute;
-		bottom: 0.2em;
-		right: 0.2em;
-	}
 	.out[data-active="1"] {
 		color: #ff0;
 	}
 	.widget-title {
 		font-weight: bold;
-		margin: 2px;
-		display: block;
+		margin: 1em 0.3em;
 	}
 	.widget-name {
 		width: 6em;
 	}
 	.widget-delete {
-		position: absolute;
-		right: 0.2em;
-		top: 0.2em;
 		border: 0;
 	}
 	.widget-delete img {
@@ -170,7 +165,7 @@
 	.widget-delete:hover, .widget-delete:active {
 		background-color: transparent;
 		outline: 0;
-		filter: brightness(50%);
+		filter: saturate(500%);
 	}
 	.widget-choice {
 		width: 100%;
diff --git a/x.svg b/x.svg
index 02bd3a6..0a71c30 100644
--- a/x.svg
+++ b/x.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M6 6 L26 26 M26 6 L6 26" stroke="#fff" stroke-width="4" stroke-linecap="round"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M6 6 L26 26 M26 6 L6 26" stroke="#f88" stroke-width="4" stroke-linecap="round"/></svg>