style and details enhancements

Wello/www/css/main.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
+
 /*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
 /*
  * What follows is the result of much research on cross-browser styling.
@@ -10,7 +12,8 @@
 html {
   color: #222;
   font-size: 1em;
-  line-height: 1.4; }
+  line-height: 1.4; 
+}
 
 /*
  * Remove text-shadow in selection highlight:
@@ -84,6 +87,9 @@ textarea {
   box-sizing: border-box;
   font-family: "roboto";
 }
+body{
+width: 100vw;
+}
 main.intro{
     margin: 0;
     padding: 0;
@@ -132,6 +138,7 @@ nav h1{
     margin: 0 0;
 	font-size: 1.5rem;
 	margin-left: 1.25rem;
+	color: white;
 }
 h1.title{
   display: none;
@@ -164,6 +171,11 @@ div.slide-menu{
   box-shadow: 5px 0px 8px rgba(0, 0, 0, 0.35);
 }
 
+nav img{
+	max-width: 3rem;
+	width: 100%;
+}
+
 div.main-bttns{
     display: flex;
     align-items: center;
@@ -192,6 +204,15 @@ div.close-menu{
 h3{
   margin: 0;
   font-size: 1.25rem;
+	font-weight: 600;
+}
+h4{
+	font-weight: 400;
+	font-size: 1.1rem;
+	margin-bottom: 0;
+}
+p{
+	font-weight: 300;
 }
 a.settings{
  position: absolute;
@@ -273,29 +294,6 @@ button, a {
     button.gps img {
       width: 100%; }
 
-
-/*
-#map {
-  width: 100vw !important;
-  height: 100vh !important;
-  height: calc(100vh - 8.1rem); 
-}
-*/
-/*
-#map {
-        position: relative;
-        padding-bottom: 75%; // This is the aspect ratio
-        height: 0;
-        overflow: hidden;
-    }
-    #map iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100% !important;
-        height: 100% !important;
-    }
-*/
 .google-maps {
         position: relative;
 
@@ -311,24 +309,16 @@ button, a {
         height: 100% !important;
     }
 main{
-/*    margin-top: 4.1rem;*/
 	margin-top: 0;
 }
 
-/*
-main.map {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-}
-*/
 
 main.details {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
+	width: 100%;
 }
 nav.form a{
     text-decoration: none;
@@ -361,6 +351,10 @@ h2{
   border-bottom: 1px solid black;
 }
 
+h3{
+	font-weight: 500;
+}
+
 label {
   display: block;
   font-weight: 500;
@@ -459,9 +453,11 @@ div.group{
 main.search{
 	margin-top: 4.2rem;
 }
-
+main.details{
+	margin-top: 53px;
+}
 main.list{
-  margin-top: 66px;
+  margin-top: 64px;
   margin-bottom: 66px;
 }
 

Wello/www/css/well-card.css

@@ -8,23 +8,26 @@ div.well-card h2{
     border-bottom: none;
     margin: 0;
     font-size: 1rem;
+	color: black;
 }
 div.well-card p{
+	font-size: 1rem;
     border-bottom: none;
     margin-top: .25rem;
+	color: black;
 }
 div.well-card {
     border-bottom: 2px solid #4d4d4d;
     max-width: 41rem;
-	width: calc(100% - 16px);
+	width: 100%;
 	box-sizing: border-box;
 /*	display: block;*/
 /*	margin-left: 0;*/
 /*	margin-right: 0;*/
 }
 
 div.well-card .well-img{
-    background-image: url(https://s-media-cache-ak0.pinimg.com/originals/33/c2/c4/33c2c4cf367ecee38a162d362a31fd68.jpg);
+    background-image: url("../img/well-default.png");
     background-size: cover;
     background-position: center;
     float: left;
@@ -33,7 +36,7 @@ div.well-card .well-img{
 }
 
 a.search-result{
-	color: inherit;
+	color: black;
 }
 div.pending{
 	position: relative;

Wello/www/details-content.php

@@ -1,6 +1,6 @@
 
 <div class="group">
-            <img src="https://s-media-cache-ak0.pinimg.com/originals/33/c2/c4/33c2c4cf367ecee38a162d362a31fd68.jpg"/>
+            <img src="img/well-default.png"/>
         <ul class="inputs" id="report-metadata">
             <li>
                 <h3>Date well completed</h3>

Wello/www/details.php

@@ -56,6 +56,19 @@
 if ($result = $mysqli->query($query)) {
     $row = $result->fetch_assoc();
 }
+
+foreach ($row as $key => $value) {
+    if (is_null($value)) {
+         $row[$key] = "-";
+    } elseif ($value == ""){
+		$row[$key] = "-";
+	} elseif ($value == "1"){
+		$row[$key] = "yes";
+	} elseif ($value == "0"){
+		$row[$key] = "no";
+	}
+}
+
 ?>
 <!doctype html>
 <html class="no-js" lang="">
@@ -81,9 +94,9 @@
     <!-- Add your site or application content here -->
 
     <nav class="top-nav">
-        <button><a href="map.php"><img alt="back" src="img/back.svg" ></a></button> <h1>Details</h1>
+        <a href="map.php"><img alt="back" src="img/back.svg" ></a> <h1>Details</h1>
         <?php
-        echo'<button><a href="form.php?Well_ID='.$Well_ID.'"><img alt="edit" src="img/edit.svg" ></a></button>';
+        echo'<a href="form.php?Well_ID='.$Well_ID.'"><img alt="edit" src="img/edit.svg" ></a>';
         ?>
     </nav>
 <main class="details">

Wello/www/map.php

@@ -34,20 +34,9 @@
 
     <nav class="top-nav">
         <div class="main-bttns">
-        <button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button> 
             <h1>Well Report App</h1>
         <a href="search.php"><img src="img/search.svg" alt="menu" /></a>
         </div>
-
-        <div class="close-menu closed" id="close-menu" onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"></div>
-        <div class="slide-menu closed" id="menu">
-
-
-            <button>Terrain</button>
-            <button>Satilite</button>
-
-
-        </div>
     </nav>
 
     <main class="map">
@@ -67,7 +56,7 @@
 
     <nav class="bottom-nav">
         <a href="map.php"><img src="img/map.svg" alt="menu" /></a>
-        <a href="wells-list.php"><img src="img/well.png" alt="menu" /></a>
+        <a href="wells-list.php"><img src="img/list.svg" alt="menu" /></a>
     </nav>
 
     <nav class="fabs">