From 28d32757244da49e156f8d7cb9133e67eb611d8b Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 9 Feb 2012 11:09:59 -0500
Subject: [PATCH] Refactored html for calc and restyled

---
 main.html            | 27 +++++++++++++-----------
 sass/_leanmodal.scss | 49 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/main.html b/main.html
index d0e18f0e96..05d00112f5 100644
--- a/main.html
+++ b/main.html
@@ -71,21 +71,24 @@
     <div id="calculator_div" class="leanModal_box">
       <form id="calculator">
         <input type="text" id="calculator_input">
-        <input id="calculator_button" type="submit" value="=&gt;">
+        <input id="calculator_button" type="submit" value="=">
         <input type="text" id="calculator_output" readonly>
       </form>
 
-<table>      <tr><td align="right">Suffixes</td><td>&nbsp;:&nbsp;</td><td align="left"> %kMGTcmunp</td></tr>
-      <tr><td align="right">Operations</td><td>&nbsp;:&nbsp;</td><td align="left"> ^ * / + - ()</td></tr>
-      <tr><td align="right">Functions</td><td>&nbsp;:&nbsp;</td><td align="left"> sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </td></tr>
-      <tr><td align="right">Constants</td><td>&nbsp;:&nbsp;</td><td align="left"> e</td></tr>
-      <!--p> Unsupported: ||, j </p
-Students won't know what parallel means at this time.
-Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.
-If you read the comments in the source, feel free to use them. If you run into a bug, please
-let us know. But we can't officially support them right now.
--->
-</table>
+      <dl>
+        <dt>Suffixes:</dt>
+        <dd> %kMGTcmunp</dd>
+        <dt>Operations:</dt>
+        <dd>^ * / + - ()</dd>
+        <dt>Functions:</dt>
+        <dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
+        <dt>Constants</dt>
+        <dd>e</dd>
+
+       <!-- Students won't know what parallel means at this time.  Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.  If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
+
+       <dt>Unsupported:</dt> <dd>||, j </dd>  -->
+      </dl>
     </div>
 
 <script>
diff --git a/sass/_leanmodal.scss b/sass/_leanmodal.scss
index 93e7216182..57d38d8994 100644
--- a/sass/_leanmodal.scss
+++ b/sass/_leanmodal.scss
@@ -202,3 +202,52 @@ div#feedback_div{
     }
   }
 }
+
+div#calculator_div {
+  max-width: 500px;
+
+  form {
+    padding-bottom: lh();
+    margin-bottom: lh();
+    border-bottom: 1px solid #ddd;
+
+    input#calculator_input {
+      width: 400px;
+    }
+
+    input#calculator_button {
+      background: 0;
+      color: $mit-red;
+      border: 0;
+      @include box-shadow(none);
+      padding: 0;
+      text-shadow: none;
+
+      &:hover {
+        color: #333;
+      }
+    }
+
+    input#calculator_output {
+      border: 0;
+      background: 0;
+      padding: lh(.35);
+      width: 60px;
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+
+  dl {
+    dt {
+      float: left;
+      clear: both;
+      padding-right: lh(.5);
+      font-weight: bold;
+    }
+
+    dd {
+      float: left;
+    }
+  }
+}