form img input lookes better

etl12003 · Apr 24, 2017 · 393b453 · 393b453
1 parent 952925e
commit 393b453
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 28 deletions.
diff --git a/Wello/www/css/main.css b/Wello/www/css/main.css
@@ -330,8 +330,12 @@ main.details {
     justify-content: flex-start;
     align-items: flex-start;
 }
-form{
-
+nav.form a{
+    text-decoration: none;
+	font-weight: 600;
+	color: white;
+	font-size: 1.25rem;
+	padding: .5rem;
 }
 main img{
     width: 100%;
@@ -344,13 +348,12 @@ main.details li, main.details p{
 }
 
 label[for=well-picture] {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 13rem;
+    margin-top: 60px;
     background: lightgray;
 }
-
+label[for=well-picture] img {
+	width: 100%;
+}
 h2{
     width: calc(100% - 2rem);
   font-weight: 700;
@@ -462,6 +465,15 @@ main.list{
   margin-bottom: 66px;
 }
 
+input[type=file]{
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
 /* ==========================================================================
    Helper classes
    ========================================================================== */

diff --git a/Wello/www/form.php b/Wello/www/form.php
@@ -195,19 +195,18 @@ if ($result = $mysqli->query($query)) {
 
 <body>
 
-    <nav class="top-nav">
-        <button><a href="map.php">Cancel</a></button>
-        <button>Save Draft</button>
+    <nav class="top-nav form">
+        <a href="map.php">Cancel</a>
     </nav>
 
     <?php
     echo'<form id="add-well" role="form" action="form.php?Well_ID='.$Well_ID.'" method="post">';
     ?>
 		<div class="group">
         <label for="well-picture">
-            <img src="img/add-img-icon.png"/>
+            <img id="well-pic" src="img/add-img-icon.png"/>
         </label>
-        <input type="file" id="well-picture" accept="image/*">
+        <input type="file" id="well-picture" accept="image/*" onchange="readURL(this);">
         </div>
 		<div class="group">
         <ul class="inputs" id="report-metadata">

diff --git a/Wello/www/img/add-img-icon.png b/Wello/www/img/add-img-icon.png
diff --git a/Wello/www/img/add-img-icon1.png b/Wello/www/img/add-img-icon1.png
diff --git a/Wello/www/js/main.js b/Wello/www/js/main.js
@@ -25,19 +25,15 @@ function showPosition(position) {
     //"<br>Longitude: " + position.coords.longitude;
 }
 
-//function getLoc() {
-//    if (navigator.geolocation) {
-//        navigator.geolocation.getCurrentPosition(showPos);
-//    } else { 
-//        x.innerHTML = "Geolocation is not supported by this browser.";
-//    }
-//}
-//
-//function showPos(position) {
-//    var cur[];
-//    cur[0] = position.coords.latitude;
-//    cur [1] = position.coords.longitude;
-//    return cur;
-//    //x.innerHTML = "Latitude: " + position.coords.latitude + 
-//    //"<br>Longitude: " + position.coords.longitude;
-//}
+function readURL(input) {
+            if (input.files && input.files[0]) {
+                var reader = new FileReader();
+
+                reader.onload = function (e) {
+                    $('#well-pic')
+                        .attr('src', e.target.result);
+                };
+
+                reader.readAsDataURL(input.files[0]);
+            }
+        }