From 11444253252bf5e36ffb5d2155b5ef7cfe804fbc Mon Sep 17 00:00:00 2001
From: Todd Parker <todd@Todd-Parkers-MacBook-Pro.local>
Date: Tue, 19 Oct 2010 12:33:17 -0400
Subject: [PATCH] more revisions to converter typography

---
 experiments/converter/converter.css | 14 ++++++++---
 experiments/converter/index.html    | 39 ++++++++++++++++++-----------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/experiments/converter/converter.css b/experiments/converter/converter.css
index bc0b5c5c..4947107c 100644
--- a/experiments/converter/converter.css
+++ b/experiments/converter/converter.css
@@ -1,6 +1,14 @@
 ul li { clear:both; }
-li p.units { padding-top:23px; font-size: 110%; font-weight:bold; }
-li p.units a:link, li p.units a:visited { padding-top:26px; font-size: 90%; }
+li p.currency-from { padding-top:23px; font-size: 180%; font-weight:bold; }
+li p.currency-from a:link, li p.units a:visited { padding-top:26px; font-size: 90%; }
+span.unit { opacity:0.5; }
 
 li p.subtext { margin-top:2px; }
-li p.ui-li-aside { font-size:190%; }
\ No newline at end of file
+li p.ui-li-aside { font-size:190%; width:60%; }
+
+
+
+form#curr-form { border-width: 0; overflow: hidden; margin: 2px -15px 2px -15px }
+form#curr-form .ui-input-search { margin: 5px; width: auto; display: block; }
+
+.add-row { font-weight:bold; font-size:110%; }
\ No newline at end of file
diff --git a/experiments/converter/index.html b/experiments/converter/index.html
index 085b7967..00882e7f 100644
--- a/experiments/converter/index.html
+++ b/experiments/converter/index.html
@@ -35,17 +35,28 @@
 		<h1>Currency converter</h1>
 	</div>
 	<div class="ui-bar ui-bar-a">
-			<form method="get" action="" data-role="autoform" >
+			<form method="get" action="" data-role="autoform" id="curr-form">
 				<label for="term" data-role="nojs">Search:</label>
-				<input type="search" name="term" id="term" placeholder="Type a value..." value="1" />
+				<input type="search" name="term" id="term" placeholder="Type a value..." value="25" />
 			</form>
 	</div>
 	<div data-role="content">
 		<ul id="++conversions" data-role="listview" data-theme="a">
-			<li><p class="units">$ TO &euro;</p><p class="ui-li-aside">22.34</p></li>
-			<li><p class="units">$ TO &euro;</p><p class="ui-li-aside">22.34</p></li>
-			<li><p class="units">$ TO &euro;</p><p class="ui-li-aside">22.34</p></li>
-			<li><p class="units">$ TO &euro;</p><p class="ui-li-aside">22.34</p></li>
+			<li><p class="currency-from">$ <span class="unit">USD</span></p>
+				<p class="currency-to ui-li-aside">&euro; 22.34 <span class="unit">EUR</span></p>
+			</li>
+			<li><p class="currency-from">$ <span class="unit">USD</span></p>
+				<p class="currency-to ui-li-aside">&pound; 22.34 <span class="unit">GBP</span></p>
+			</li>
+			<li><p class="currency-from">$ <span class="unit">USD</span></p>
+				<p class="currency-to ui-li-aside">&yen; 22.34 <span class="unit">JPY</span></p>
+			</li>
+			<li><p class="currency-from">&euro; <span class="unit">EUR</span></p>
+				<p class="currency-to ui-li-aside">$ 22.34 <span class="unit">USD</span></p>
+			</li>
+			<li><p class="currency-from">&yen; <span class="unit">EUR</span></p>
+				<p class="currency-to ui-li-aside">$ 22.34 <span class="unit">JPY</span></p>
+			</li>
 		</ul>
 	</div>
 </div>
@@ -59,11 +70,11 @@
 	
 	<div data-role="content">
 		<ul data-role="listview" data-theme="c" data-inset="true">
-			<li><p class="units"><a href="#add-currency-dialog">$ to &euro;</a></p><a href="remove" data-icon="delete" data-iconpos="notext">Remove</a></li>
-			<li><p class="units"><a href="#add-currency-dialog">$ to &euro;</a></p><a href="remove" data-icon="delete" data-iconpos="notext">Remove</a></li>
-			<li><p class="units"><a href="#add-currency-dialog">$ to &euro;</a></p><a href="remove" data-icon="delete" data-iconpos="notext">Remove</a></li>
-			<li><p class="units"><a href="#add-currency-dialog">$ to &euro;</a></p><a href="remove" data-icon="delete" data-iconpos="notext">Remove</a></li>
-			<li><a href="#add-currency-dialog"><strong>Add new conversion</strong></a><p class="subtext">Choose any two currencies to convert</p></li>
+			<li><a href="#add-currency-dialog">$ <span class="unit">USD</span> to &euro; <span class="unit">EUR</span><a href="remove" data-icon="delete" data-iconpos="notext">Remove</a></li>
+			<li><a href="#add-currency-dialog">$ <span class="unit">USD</span> to &euro; <span class="unit">EUR</span><a href="remove" data-icon="delete" data-iconpos="notext">Remove</a></li>
+			<li><a href="#add-currency-dialog">$ <span class="unit">USD</span> to &euro; <span class="unit">EUR</span><a href="remove" data-icon="delete" data-iconpos="notext">Remove</a></li>
+			<li><a href="#add-currency-dialog">$ <span class="unit">USD</span> to &euro; <span class="unit">EUR</span><a href="remove" data-icon="delete" data-iconpos="notext">Remove</a></li>
+			<li><a href="#add-currency-dialog" class="add-row">Add new...</a></li>
 		</ul>
 	</div>
 	<div class="ui-body">
@@ -74,7 +85,7 @@
 <div data-role="page" id="add-currency-dialog" class="ui-body-b">
 	<div data-role="header" data-theme="a">
 		<h1>Add new</h1>
-		<a href="#start" class="ui-back" data-icon="arrow-l" >Cancel</a>
+		<a href="#customize" class="ui-back" data-icon="arrow-l">Cancel</a>
 	</div>
 	
 	<div data-role="content">
@@ -96,8 +107,8 @@
 			</select>
 		</div>
 		<div data-role="fieldcontain">
-		<a id="add" href="#start" data-role="button" data-theme="c" data-inline="true">Cancel</a>
-		<a id="add" href="#start" data-role="button" data-theme="b" data-inline="true">Add conversion</a>
+		<a id="add" href="#customize" data-role="button" data-theme="c" data-inline="true">Cancel</a>
+		<a id="add" href="#customize" data-role="button" data-theme="b" data-inline="true">Add conversion</a>
 		</div>
 	</div>
 </div>