From 82ae6bac85be7bc0ac80b99bad757cdd4d8aa87d Mon Sep 17 00:00:00 2001
From: Scott O'Hara <scottaohara@gmail.com>
Date: Thu, 23 Jan 2014 21:14:46 -0500
Subject: [PATCH 1/2] updates to the ui

basic styling for selects

add new .ui-row class and convert <p> to <div>'s

keep .ui p as fallback for updated .ui-row class
---
 css/ui.css |  38 +++++++++++----
 index.html | 134 ++++++++++++++++++++++++++---------------------------
 2 files changed, 95 insertions(+), 77 deletions(-)

diff --git a/css/ui.css b/css/ui.css
index 9d8465c..b652841 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -1,3 +1,9 @@
+.ui * {
+	       -moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+}
+
 .ui {
 	position: fixed;
 	right: 0;
@@ -9,6 +15,10 @@
 	overflow-y: auto;
 }
 
+.btn-row {
+	text-align: center;
+}
+
 .ui:not(.visible) {
 	-webkit-transform: translate(100%, 0);
 	transform: translate(100%, 0);
@@ -29,11 +39,16 @@
 	font-size: 13px;
 	line-height: 1.4;
 	border-radius: 4px;
-	padding: 10px;
+	padding: 8px;
 	-webkit-font-smoothing: subpixel-antialiased;
 	transition: all 250ms linear;
 }
 
+.ui select {
+	border: 1px solid #ccc;
+	padding: 4px;
+}
+
 .ui button:hover, .ui select:hover, .ui input:hover, .ui :focus, #toggle:hover {
 	color: #000;
 	opacity: 0.8;
@@ -43,27 +58,25 @@
 	color: #fff;
 }
 
-.ui:not([id]) p:nth-of-type(1) button {
+.btn-row-1 button {
 	background-color: #1abc9c;
 }
 
-.ui:not([id]) p:nth-of-type(2) button {
+.btn-row-2 button {
 	background-color: #3498db;
 }
 
-.ui:not([id]) p:nth-of-type(3) button {
+.btn-row-3 button {
 	background-color: #2ecc71;
 }
 
-
 .ui button, #toggle {
 	cursor: pointer;
-	text-align: center;
 	width: 82px;
 }
 
 .ui select, .ui input, .ui #color {
-	width: 168px;
+	width: 100%;
 }
 
 .ui button:first-child {
@@ -74,8 +87,13 @@
 	font-weight: bold;
 }
 
-.ui p {
-	margin: 8px 16px;
+.ui p, .ui-row {
+	margin: 0;
+	padding: 8px;
+}
+
+.btn-row-2 {
+	padding: 0 8px;
 }
 
 .ui table {
@@ -171,4 +189,4 @@
 
 .ui#help table {
 	font-size: 80%;
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index 729c572..5bc32a5 100644
--- a/index.html
+++ b/index.html
@@ -16,31 +16,31 @@
 
 		<div class="ui">
 			<h3>Map</h3>
-			<p>
+			<div class="ui-row btn-row btn-row-1">
 				<button data-command="New">New</button><button data-command="Load">Load</button>
-			</p>
-			<p>
+			</div>
+			<div class="ui-row btn-row btn-row-2">
 				<button data-command="Save">Save</button><button data-command="SaveAs">Save As</button>
-			</p>
-			<p>
+			</div>
+			<div class="ui-row btn-row btn-row-3">
 				<button data-command="Center">Center</button><button data-command="Help">Help</button>
-			</p>
+			</div>
 
 			<h3>Item</h3>
 
-			<p>
-				<span>Layout</span>
+			<div class="ui-row">
+				<label for="layout">Layout</label>
 				<select id="layout">
 					<option value="">(Inherit)</option>
 				</select>
-			</p>
-			<p>
-				<span>Shape</span>
+			</div>
+			<div class="ui-row">
+				<label for="shape">Shape</label>
 				<select id="shape">
 					<option value="">(Automatic)</option>
 				</select>
-			</p>
-			<p>
+			</div>
+			<div class="ui-row">
 				<span>Value</span>
 				<select id="value">
 					<option value="">(None)</option>
@@ -52,30 +52,30 @@ <h3>Item</h3>
 						<option value="max">Maximum</option>
 					</optgroup>
 				</select>
-			</p>
-			<p>
-				<span>Status</span>
+			</div>
+			<div class="ui-row">
+				<label for="status">Status</label>
 				<select id="status">
 					<option value="">None</option>
 					<option value="yes">Yes</option>
 					<option value="no">No</option>
 					<option value="maybe">Auto</option>
 				</select>
-			</p>
-			<p>
-				<span>Color</span>
+			</div>
+			<div class="ui-row">
+				<label>Color</label>
 				<span id="color">
-					<a data-color="" title="Inherit" href="#"></a>
-					<a data-color="#000" title="Black" href="#"></a>
-					<a data-color="#e33" title="Red" href="#"></a>
-					<a data-color="#3e3" title="Green" href="#"></a>
-					<a data-color="#33e" title="Blue" href="#"></a>
-					<a data-color="#dd3" title="Yellow" href="#"></a>
-					<a data-color="#3dd" title="Cyan" href="#"></a>
-					<a data-color="#d3d" title="Magenta" href="#"></a>
-					<a data-color="#fa3" title="Orange" href="#"></a>
+					<a data-color="" title="Inherit" href="#!"></a>
+					<a data-color="#000" title="Black" href="#!"></a>
+					<a data-color="#e33" title="Red" href="#!"></a>
+					<a data-color="#3e3" title="Green" href="#!"></a>
+					<a data-color="#33e" title="Blue" href="#!"></a>
+					<a data-color="#dd3" title="Yellow" href="#!"></a>
+					<a data-color="#3dd" title="Cyan" href="#!"></a>
+					<a data-color="#d3d" title="Magenta" href="#!"></a>
+					<a data-color="#fa3" title="Orange" href="#!"></a>
 				</span>
-			</p>
+			</div>
 
 			<a id="github" target="_blank" href="https://github.com/ondras/my-mind" title="GitHub project page"><img src="github.png" alt="GitHub project page" /></a>
 		</div>
@@ -84,69 +84,69 @@ <h3>Item</h3>
 
 		<div id="io" class="ui">
 			<h3></h3>
-			<p>
-				<span>Storage</span>
+			<div class="ui-row">
+				<label for="backend">Storage</label>
 				<select id="backend"></select>
-			</p>
-			
+			</div>
+
 			<div id="file">
-				<p data-for="save">
-					<span>Format</span>
-					<select class="format"></select>
-				</p>
-				<p data-for="save load">
+				<div class="ui-row" data-for="save">
+					<label for="save-format">Format</label>
+					<select class="format" id="save-format"></select>
+				</div>
+				<div class="ui-row btn-row btn-row-1" data-for="save load">
 					<button class="go"></button><button class="cancel">Cancel</button>
-				</p>
+				</div>
 			</div>
 
 			<div id="local">
-				<p data-for="load">
+				<div data-for="load">
 					<span>Saved maps</span>
 					<select class="list"></select>
-				</p>
-				<p data-for="save load">
+				</div>
+				<div class="btn-row ui-row btn-row-1" data-for="save load">
 					<button class="go"></button><button class="cancel">Cancel</button>
-				</p>
-				<p data-for="load">
+				</div>
+				<div class="ui-row btn-row btn-row-2" data-for="load">
 					<button class="remove">Delete</button>
-				</p>
+				</div>
 			</div>
 
 			<div id="firebase">
-				<p data-for="save load">
-					<span>Server</span>
-					<input type="text" class="server" />
-				</p>
-				<p data-for="save load">
-					<span>Auth</span>
-					<select class="auth">
+				<div class="ui-row" data-for="save load">
+					<label for="server-input">Server</label>
+					<input type="text" class="server" id="server-input" />
+				</div>
+				<div class="ui-row" data-for="save load">
+					<label for="social-auth">Auth</label>
+					<select class="auth" id="social-auth">
 						<option value="">(None)</option>
 						<option value="facebook">Facebook</option>
 						<option value="twitter">Twitter</option>
 						<option value="github">GitHub</option>
 						<option value="persona">Persona</option>
 					</select>
-				</p>
-				<p data-for="load">
-					<span>Saved maps</span>
-					<select class="list"></select>
-				</p>
-				<p data-for="save load">
+				</div>
+				<div class="ui-row" data-for="load">
+					<label for="saved-maps">Saved maps</label>
+					<select class="list" id="saved-maps"></select>
+				</div>
+				<div class="ui-row btn-row btn-row-1" data-for="save load">
 					<button class="go"></button><button class="cancel">Cancel</button>
-				</p>
-				<p data-for="load">
+				</div>
+				<div class="ui-row btn-row btn-row-2" data-for="load">
 					<button class="remove">Delete</button>
-				</p>
+				</div>
 			</div>
 
 			<div id="gdrive">
-				<p data-for="save">
-					<span>Format</span>
-					<select class="format"></select>
-				</p>
-				<p data-for="save load">
+				<div class="ui-row" data-for="save">
+					<label id="save-format">Format</label>
+					<select class="format" id="save-format"></select>
+				</div>
+				<div class="ui-row btn-row btn-row-3" data-for="save load">
 					<button class="go"></button><button class="cancel">Cancel</button>
-				</p>
+				</div>
 			</div>
 		</div>
 

From 5f0d73b6a64f362cf3532562b350fdd850216f44 Mon Sep 17 00:00:00 2001
From: Scott O'Hara <scottaohara@gmail.com>
Date: Fri, 24 Jan 2014 07:53:34 -0500
Subject: [PATCH 2/2] makes sure that buttons always have white text when
 within a .btn-row

---
 css/ui.css | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/css/ui.css b/css/ui.css
index b652841..5e38601 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -19,6 +19,22 @@
 	text-align: center;
 }
 
+.btn-row button{
+	color: #fff;
+}
+
+.btn-row-1 button {
+	background-color: #1abc9c;
+}
+
+.btn-row-2 button {
+	background-color: #3498db;
+}
+
+.btn-row-3 button {
+	background-color: #2ecc71;
+}
+
 .ui:not(.visible) {
 	-webkit-transform: translate(100%, 0);
 	transform: translate(100%, 0);
@@ -58,18 +74,6 @@
 	color: #fff;
 }
 
-.btn-row-1 button {
-	background-color: #1abc9c;
-}
-
-.btn-row-2 button {
-	background-color: #3498db;
-}
-
-.btn-row-3 button {
-	background-color: #2ecc71;
-}
-
 .ui button, #toggle {
 	cursor: pointer;
 	width: 82px;