From 2c77827e8cb3daeb0a36af5e17cb18c495e08017 Mon Sep 17 00:00:00 2001
From: Erik Lindsay <erik.lindsay@uconn.edu>
Date: Mon, 17 Apr 2017 15:40:36 -0400
Subject: [PATCH] map fixed

---
 html-ONLY-site/css/desktop.css     |  14 ++-
 html-ONLY-site/css/main.css        |  28 +++++-
 html-ONLY-site/css/map-desktop.css |  21 +++-
 html-ONLY-site/css/well-card.css   |   3 +-
 html-ONLY-site/search.html         |   2 +-
 map.php                            | 150 +++++++++++++++++++++++++++++
 6 files changed, 206 insertions(+), 12 deletions(-)
 create mode 100644 map.php

diff --git a/html-ONLY-site/css/desktop.css b/html-ONLY-site/css/desktop.css
index 146eeaa..3ac26d7 100644
--- a/html-ONLY-site/css/desktop.css
+++ b/html-ONLY-site/css/desktop.css
@@ -2,7 +2,7 @@
 	div.well-card {
     	border: 2px solid #4d4d4d;
 		margin: 1.5rem;
-		width: 41rem;
+		max-width: 41rem;
 	}
 
 	main.list {
@@ -11,13 +11,18 @@
 /*		justify-content: center;*/
 		align-items: center;
 	}
+	
+	main.list a{
+		width: 75%;
+		max-width: 41rem;
+	}
 }
 
 @media only screen and (min-width: 45em) {
 	div.well-card {
     	border: 2px solid #4d4d4d;
 		margin: 1.5rem;
-		width: 41rem;
+		max-width: 41rem;
 	}
 	main.search{
 		display: flex;
@@ -27,7 +32,9 @@
 	main.search a{
 		color: inherit;
 		width: 50%;
+		max-width: 41rem;
 	}
+	
 
 
 }
@@ -44,4 +51,7 @@
 		flex-direction: column;
 		align-items: center;
 	}
+	main.map{
+		margin-top: 0;
+	}
 }
diff --git a/html-ONLY-site/css/main.css b/html-ONLY-site/css/main.css
index 25173e7..fe9e812 100644
--- a/html-ONLY-site/css/main.css
+++ b/html-ONLY-site/css/main.css
@@ -130,6 +130,7 @@ div.intro{
 nav h1{
     flex-grow: 1;
     margin: 0;
+	font-size: 1.5rem;
 }
 
 nav.top-nav {
@@ -187,7 +188,7 @@ div.close-menu{
 }
 h3{
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
 }
 a.settings{
  position: absolute;
@@ -278,16 +279,34 @@ button {
         height: 100% !important;
     }
 */
-
+.google-maps {
+        position: relative;
+	
+        padding-bottom: 100vh; 
+        height: 0;
+        overflow: hidden;
+    }
+    .google-maps iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100% !important;
+        height: 100% !important;
+    }
 main{
-    margin-top: 4.1rem;
+/*    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;
@@ -412,6 +431,9 @@ div.group{
 	max-width: 26rem;
 }
 
+main.search{
+	margin-top: 4.2rem;
+}
 
 
 /* ==========================================================================
diff --git a/html-ONLY-site/css/map-desktop.css b/html-ONLY-site/css/map-desktop.css
index 85ffd4c..c9f8dd0 100644
--- a/html-ONLY-site/css/map-desktop.css
+++ b/html-ONLY-site/css/map-desktop.css
@@ -43,6 +43,7 @@
         height: 100vh;
         overflow-y: scroll;
         border-left: solid black 2px;
+		background-color: white;
     }
     div.desk-details ul{
 		margin: 1rem
@@ -57,9 +58,19 @@
     main.details{
         margin-top: 0rem;
     }
-	a.go-to{
-		float: right;
-		margin: 1rem;
-
-	}
+a.go-to{
+/*
+	width: 23rem;
+	background-color: #65b2ff;
+	color: white;
+*/
+	font-size: 1.25rem;
+	color: #65b2ff;
+/*
+	margin: 0 0 0 0;
+	padding: 2rem;
+*/
+	float: right;
+	margin: 1rem;
+}
 }
diff --git a/html-ONLY-site/css/well-card.css b/html-ONLY-site/css/well-card.css
index d9bb251..9215fef 100644
--- a/html-ONLY-site/css/well-card.css
+++ b/html-ONLY-site/css/well-card.css
@@ -15,7 +15,8 @@ div.well-card p{
 div.well-card {
     border-bottom: 2px solid #4d4d4d;
     max-width: 41rem;
-	width: 100%;
+	width: calc(100% - 16px);
+	box-sizing: border-box;
 /*	display: block;*/
 /*	margin-left: 0;*/
 /*	margin-right: 0;*/
diff --git a/html-ONLY-site/search.html b/html-ONLY-site/search.html
index 9e7faea..4789bda 100644
--- a/html-ONLY-site/search.html
+++ b/html-ONLY-site/search.html
@@ -39,7 +39,7 @@
     </nav>
 
     <main class="search">
-		<a href="details.php" class="search-result">
+		<a href="details.php" class="search-result clearfix">
 			<div class="well-card clearfix">
 				<div class="well-img"></div>
 				<div>
diff --git a/map.php b/map.php
new file mode 100644
index 0000000..1bf2dd6
--- /dev/null
+++ b/map.php
@@ -0,0 +1,150 @@
+
+
+<!DOCTYPE html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>WRA | Map</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/well-card.css">
+    <link rel="stylesheet" href="css/map-desktop.css">
+    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
+</head>
+
+
+
+
+
+
+<body>
+    <!--[if lt IE 8]>
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+    <!-- Add your site or application content here -->
+
+
+
+
+
+
+    <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.html"><button><img src="img/search.svg" alt="menu" /></button></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">
+            
+            <p>Currntly signed in as: <br>
+                
+            </p>
+            <h3>my.name@ct.gov</h3>
+            <a href="#">Logout</a>
+            
+            <button>Terrain</button>
+            <button>Satilite</button>
+            
+            <a class="settings" href="#">Settings</a>
+        
+        </div>
+    </nav>
+
+    <main class="map">
+<!--        <div style=""> -->
+<!--
+            <div id="map">
+                <iframe
+                  width="600"
+                  height="450"
+                  frameborder="0" style="border:0"
+                  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBmQZToyeMOBTd6KlJRFHzv-5sj7u_AidY
+                    &q=41.8077,-72.2540" allowfullscreen>
+                </iframe>
+            
+            </div>
+-->
+<!--        </div>-->
+
+		<div class="google-maps">
+			<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
+		</div>
+		
+<!--
+        <script async defer
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNSoPsxLd0LbvQaH9R6npO7jj-jKAXyQ4&callback=initMap">
+        </script>
+-->
+        
+        <div class="well-preview well-card clearfix">
+            <div class="well-img"></div>
+            <div>
+                <h2>Well Name</h2>
+                <p>short well description</p>
+                <a href="details.html">DETAILS</a>
+            </div>
+        </div>
+        
+        <div class="desk-details">
+			<a href="details.php" class="go-to" > go to > </a>
+        <?php
+            include 'details-content.php';
+            ?>
+        </div>
+
+    </main>
+
+    <nav class="bottom-nav">
+        <button><a href="map.php"><img src="img/map.svg" alt="menu" /></a></button>
+        <button><a href="wells-list.php"><img src="img/well.png" alt="menu" /></a></button>
+    </nav>
+
+    <nav class="fabs">
+        <button class="gps"><img src="img/gps.svg" alt="get location" /></button>
+        <button class="add-well"><a href="form.php"> <img src="img/add.svg" alt="add well" /></a></button>
+    </nav>
+
+
+
+
+
+
+    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
+    <script>
+        window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
+    </script>
+    <script src="js/plugins.js"></script>
+    <script src="js/main.js"></script>
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+        (function (b, o, i, l, e, r) {
+            b.GoogleAnalyticsObject = l;
+            b[l] || (b[l] = function () {
+                (b[l].q = b[l].q || []).push(arguments)
+            });
+            b[l].l = +new Date;
+            e = o.createElement(i);
+            r = o.getElementsByTagName(i)[0];
+            e.src = 'https://www.google-analytics.com/analytics.js';
+            r.parentNode.insertBefore(e, r)
+        }(window, document, 'script', 'ga'));
+        ga('create', 'UA-XXXXX-X', 'auto');
+        ga('send', 'pageview');
+    </script>
+</body>
+
+
+</html>
+<!--
+notes :
+we will need a file where we import the well name, address, longiture and latitude within the range we chose
+
+we need a food loop for it
+-->
\ No newline at end of file