form

etl12003 · Feb 13, 2017 · e5309a1 · e5309a1
1 parent a2caa29
commit e5309a1
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 16 deletions.
diff --git 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
@@ -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 @@
 
             <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 @@
 
             <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 @@
 
             <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 @@
                     <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 @@
                     <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
diff --git 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")
+    }; 
+
+});