From da52ff7ee0dc1b9089357fa83ad4555b2842e8e7 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 20 Mar 2015 12:28:00 +0300
Subject: [PATCH] Editor: de-tablify options, support for responsive layout

---
 edit.html | 122 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 84 insertions(+), 38 deletions(-)

diff --git a/edit.html b/edit.html
index 255c47f0..7b6d7c35 100644
--- a/edit.html
+++ b/edit.html
@@ -79,6 +79,13 @@
 			#header label {
 				width: 60px;
 			}
+			#options .aligned {
+				display: table-row;
+			}
+			#options .aligned > * {
+				display: table-cell;
+				margin: 0.5ex 0 0 0;
+			}
 			.code {
 				height: 10em;
 				width: 40em;
@@ -154,24 +161,68 @@
 					width: auto;
 					border-right: none;
 					padding-left: 8px;
+					padding-top: 8px;
+				}
+				#header section {
+					display: inline-block;
+					margin-bottom: 0.5em;
+				}
+				#header label {
+					width: auto;
+					vertical-align: baseline;
+					margin-right: .5em;
+				}
+				#header input[type="checkbox"] {
+					vertical-align: middle;
+				}
+				#name {
+					font-weight: bold;
+				}
+				h1, h2 {
+					display: none;
+				}
+				#basic-info > div {
+					display: inline-block;
+					margin-right: 1em;
+				}
+				#actions br {
+					display: none;
+				}
+				#actions img {
+					position: relative;
+					top: .2em;
+					margin-left: .2em;
+				}
+				#actions > * + button, #actions a {
+					margin-left: 1em;
+				}
+				#options {
+					display: flex;
+					flex-wrap: wrap;
+					align-items: baseline;
+				}
+				#options .option, #options .option > * {
+					flex: auto;
+					height: 1.8em;
+					margin: 0;
+					display: inline-block;
+					white-space: nowrap;
+				}
+				#options .option {
+					margin-right: 1em;
 				}
-
 				#sections {
 					padding-left: 0;
 				}
-
 				#sections > div {
 					padding: 0;
 				}
-
 				#sections-heading {
 					padding-left: 8px;
 				}
-
 				body > section > *:not(h2) {
 					padding-left: 8px;
 				}
-
 			}
 
 			/* editor options */
@@ -196,40 +247,35 @@
 				<div><label for="name" id="name-label"></label><input id="name" class="style-contributor"></div>
 				<div><label for="enabled" id="enabled-label"></label><input type="checkbox" id="enabled" class="style-contributor"></div>
 			</section>
-			<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
-			<button id="save-button" title="Ctrl-S"></button>
-			<a href="manage.html"><button id="cancel-button"></button></a>
-			<form id="options">
+			<section id="actions">
+				<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
+				<button id="from-mozilla">From Mozilla format</button><img id="from-mozilla-help" src="help.png"><br><br>
+				<button id="save-button" title="Ctrl-S"></button>
+				<a href="manage.html"><button id="cancel-button"></button></a>
+			</section>
+			<section id="options">
 				<h2 id="options-heading"></h2>
-				<table cols="2">
-				<tr>
-					<td colspan="2">
-						<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
-						<label id="lineWrapping-label" for="editor.lineWrapping"></label>
-					</td>
-				</tr>
-				<tr>
-					<td colspan="2">
-						<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
-						<label id="smartIndent-label" for="editor.smartIndent"></label>
-					</td>
-				</tr>
-				<tr>
-					<td colspan="2">
-						<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
-						<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
-					</td>
-				</tr>
-				<tr>
-					<td><label id="tabSize-label" for="editor.tabSize"></label></td>
-					<td><input data-option="tabSize" id="editor.tabSize" type="number" min="0"></td>
-				</tr>
-				<tr>
-					<td><label id="keyMap-label" for="editor.keyMap"></label></td>
-					<td><select data-option="keyMap" id="editor.keyMap"></select></td>
-				</tr>
-			</table>
-			</form>
+				<div class="option">
+					<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
+					<label id="lineWrapping-label" for="editor.lineWrapping"></label>
+				</div>
+				<div class="option">
+					<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
+					<label id="smartIndent-label" for="editor.smartIndent"></label>
+				</div>
+				<div class="option">
+					<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
+					<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
+				</div>
+				<div class="option aligned">
+					<label id="tabSize-label" for="editor.tabSize"></label>
+					<input data-option="tabSize" id="editor.tabSize" type="number" min="0">
+				</div>
+				<div class="option aligned">
+					<label id="keyMap-label" for="editor.keyMap"></label>
+					<select data-option="keyMap" id="editor.keyMap"></select>
+				</div>
+			</section>
 		</div>
 		<section id="sections">
 			<h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2>