From e5309a1804b2a4c95d87a0dae48ef56047d807e7 Mon Sep 17 00:00:00 2001
From: Erik Lindsay <erik.lindsay@uconn.edu>
Date: Mon, 13 Feb 2017 15:20:00 -0500
Subject: [PATCH] form

---
 html-ONLY-site/css/main.css         |  49 +++++++++++++++++++++++++---
 html-ONLY-site/form.html            |  27 ++++++++-------
 html-ONLY-site/img/add-img-icon.png | Bin 0 -> 760 bytes
 html-ONLY-site/js/main.js           |  11 +++++++
 4 files changed, 71 insertions(+), 16 deletions(-)
 create mode 100644 html-ONLY-site/img/add-img-icon.png

diff --git a/html-ONLY-site/css/main.css b/html-ONLY-site/css/main.css
index 4cd49cb..ba2bbd2 100644
--- a/html-ONLY-site/css/main.css
+++ b/html-ONLY-site/css/main.css
@@ -141,14 +141,25 @@ button {
 form {
     display: flex;
     flex-direction: column;
-  margin: 1rem;
   
     margin-top: 2.6rem;
 }
+form ul, h2{
+    margin: 1rem
+}
+
+label[for=well-picture] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 13rem;
+    background: lightgray;
+}
 
 h2{
   font-weight: 700;
   margin-bottom: 0;
+border-bottom: 1px solid black;
 }
 
 label {
@@ -171,18 +182,48 @@ ul.inputs li{
   font-size: 1.2rem;
 }
 
-li input[type=text], select {
+li input[type=text], select, input[type=number].long-num {
   width: 100%;
   height: 2.5rem;
 }
+
+li input[type=date] {
+  height: 2.5rem;
+}
+input[type=number].med-num{
+    width: 6rem;
+}
+
+textarea{
+    width: 100%;
+}
+
 li input[type=number] {
   width: 4.4rem;;
   height: 2.5rem;
 }
-form button{
-    border: black 2px solid;
+#get-gps-local input{
+    width: calc(100% - 3.5rem);
+}
+#get-gps-local button img{
+    height: 2.4rem;
+}
+
+.other{
+    margin-top: 1rem;
+    display: none;
+}
+
+#depth-from-surface input[type=text]{
+    margin: 1rem 4rem;
+    width: calc(100% - 8rem);
+    align-self: flex-start;
 }
 
+input[type=submit]{
+    margin: 1rem;
+    height: 3rem;
+}
 /* ==========================================================================
    Helper classes
    ========================================================================== */
diff --git a/html-ONLY-site/form.html b/html-ONLY-site/form.html
index f464b91..5a6a7c8 100644
--- a/html-ONLY-site/form.html
+++ b/html-ONLY-site/form.html
@@ -36,6 +36,9 @@
     </nav>
 
     <form>
+        <label for="well-picture">
+            <img src="img/add-img-icon.png"/>
+        </label>
         <input type="file" id="well-picture" accept="image/*">
         
         <ul class="inputs" id="report-metadata">
@@ -49,22 +52,22 @@
             
             <li>
                 <label for="permit-number">Permit number</label>
-                <input type="number" min="1" id="permit-number">
+                <input type="number" min="1" id="permit-number" class="long-num">
             </li>
             
             <li>
                 <label for="registrant-number">Registrant number</label>
-                <input type="number" min="1" id="registrant-number">
+                <input type="number" min="1" id="registrant-number" class="long-num">
             </li>
             
             <li>
                 <label for="state-well-number">State well number</label>
-                <input type="number" min="1" id="state-well-number">
+                <input type="number" min="1" id="state-well-number" class="long-num">
             </li>
             
             <li>
                 <label for="other-number">Other number</label>
-                <input type="number" min="1" id="other-number">
+                <input type="number" min="1" id="other-number" class="long-num">
             </li>
         </ul>
         
@@ -86,7 +89,7 @@ <h2>Owner Info</h2>
             
             <li>
                 <label for="zip-code">Zip code</label>
-                <input type="number" min="1" id="zip-code">
+                <input type="number" min="1" id="zip-code" class="med-num">
             </li>
         </ul>
         
@@ -105,18 +108,18 @@ <h2>Well location</h2>
             
             <li>
                 <label for="zip-code">Zip code</label>
-                <input type="number" min="1" id="zip-code">
+                <input type="number" min="1" id="zip-code" class="med-num">
             </li>
             
             <li>
                 <label for="lot-number">Lot number</label>
-                <input type="number" min="1" id="lot-number">
+                <input type="number" min="1" id="lot-number" class="med-num">
             </li>
             
-            <li>
+            <li id="get-gps-local">
                 <label for="gps-coordinates">GPS coordinates</label>
                 <input type="text" id="gps-coordinates">
-                <button onclick="getLocation()">get loction</button>
+                <button onclick="getLocation()"><img alt="get location" src="img/gps.svg"></button>
             </li>
             
             <li>
@@ -126,7 +129,7 @@ <h2>Well location</h2>
             
             <li>
                 <label for="use">Use</label>
-                <select id="use"> 
+                <select id="use" onchange='showOther(this.value, this);'> 
                     <option value="Domestic">Domestic</option>
                     <option value="Buisness Establishment">Buisness Establishment</option>
                     <option value="Farm">Farm</option>
@@ -136,7 +139,7 @@ <h2>Well location</h2>
                     <option value="Air Conditioning">Air Conditioning</option>
                     <option value="Other">Other</option>
                 </select>
-                <input type="text" id="other-use-case">
+                <input type="text" id="other-use-case" class="other">
             </li>
             
             <li>
@@ -147,7 +150,7 @@ <h2>Well location</h2>
                     <option value="Cable Percussion">Cable Percussion</option>
                     <option value="Other">Other</option>
                 </select>
-                <input type="text" id="other-equipment">
+                <input type="text" id="other-equipment" class="other">
             </li>
             
         </ul>
diff --git a/html-ONLY-site/img/add-img-icon.png b/html-ONLY-site/img/add-img-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..47a122150acf35fd65de1065aed3845c2e5e5769
GIT binary patch
literal 760
zcmV<U0tfwxP)<h;3K|Lk000e1NJLTq002Ay001@!1^@s6n`inI00001b5ch_0Itp)
z=>Px%vPnciRA>e5SxZU;F%WeGmmWZIC+J>WiB}NZsv9q%N1BC#cmxk1xKuCTtlYX7
z@l$W;Nb%@TDxGwK-33LblB!p)I_d5jovqpBheBp#7j3Q=%`O4Cso(@RwJ6AGhl|>d
z1Z1WiPH<C;f}D1^sO?BVX4>HdH?=58^ugR4rzV)S_nwY)>g~;qKe`<bd7k*055dT`
z(WBepQVPD3Eyu~RC}IW?Ce=6Tr2u@3GH#cR7{n$QCekP2i3ER&GN!MMSYRX-CKH<M
zSOPyp8P94116av~3DqUqk;%E}n<)DaZG!{2fK!k#VFm&4yD0nRw!tZ=XeQ1D<8HD~
zDfT?1X#jaGjDaJxr5y?yFPN+kx2}SD-3N0ppHdo+q6@~U&>E90zN@#Q7oz*3o0VdW
zIjq5_C<%Q*-ANU@9+kiczM*+MQrKLqM7{(*q%TGcVy*dX)p&SY3DgyfN9I8EtWu2Y
zUa*L@=97@PVj+N|$#NtU&!UWjIjpf*k2lBnwwY*?y_8J+%wEe}+cCu&e6#=qSWS6&
zUdKimbAl%OhO%Mz+KP2J@Zp^XmRs+-QriAzS3<Xbu2SLotUJcem#^^E&or>ur^!}n
z;|!Y;@%)}jhnEtsciD(>0<13o)q2iO3q7|JG!|CTF&e8CCuhN}#8NHhEO=WL^{U3c
zLmi{BTH|vTe5jZ`$@oRtT|@XH#)-yqbAw&IULL|`bf2ZA6g{fO11Dirt))Bqqx$iH
zqR}eW6)n@Pf*7Ax)ZJKjZ3PWkbimdtjyFHkb@}0A{e|?$Mfan1;30DW4;B3R=DyNL
zxw;Mt-&uTmPAlDzYmk&ya8MDJpq!0|g=aM16a_D$v5OD1NKx=Ze4fz|lW_ZY|4j3_
q-6(o4inr|FCn3`q9KdDupTl2xo6E_?G39Ll0000<MNUMnLSTY3a%Bbp

literal 0
HcmV?d00001

diff --git a/html-ONLY-site/js/main.js b/html-ONLY-site/js/main.js
index 0c3098c..585f1fe 100644
--- a/html-ONLY-site/js/main.js
+++ b/html-ONLY-site/js/main.js
@@ -9,3 +9,14 @@ function initMap() {
           map: map
         });
       }
+
+
+$('select').change(function() { 
+    
+    if ($(this).val() == "Other"){
+        $(this).next().css("display", "block")
+    } else {
+        $(this).next().css("display", "none")
+    }; 
+
+});
\ No newline at end of file