Skip to content

Commit

Permalink
map fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
etl12003 committed Apr 17, 2017
1 parent 8fd7005 commit 2c77827
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 12 deletions.
14 changes: 12 additions & 2 deletions html-ONLY-site/css/desktop.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
div.well-card {
border: 2px solid #4d4d4d;
margin: 1.5rem;
width: 41rem;
max-width: 41rem;
}

main.list {
Expand All @@ -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;
Expand All @@ -27,7 +32,9 @@
main.search a{
color: inherit;
width: 50%;
max-width: 41rem;
}



}
Expand All @@ -44,4 +51,7 @@
flex-direction: column;
align-items: center;
}
main.map{
margin-top: 0;
}
}
28 changes: 25 additions & 3 deletions html-ONLY-site/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ div.intro{
nav h1{
flex-grow: 1;
margin: 0;
font-size: 1.5rem;
}

nav.top-nav {
Expand Down Expand Up @@ -187,7 +188,7 @@ div.close-menu{
}
h3{
margin: 0;
font-size: 1.5rem;
font-size: 1.25rem;
}
a.settings{
position: absolute;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -412,6 +431,9 @@ div.group{
max-width: 26rem;
}

main.search{
margin-top: 4.2rem;
}


/* ==========================================================================
Expand Down
21 changes: 16 additions & 5 deletions html-ONLY-site/css/map-desktop.css
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
height: 100vh;
overflow-y: scroll;
border-left: solid black 2px;
background-color: white;
}
div.desk-details ul{
margin: 1rem
Expand All @@ -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;
}
}
3 changes: 2 additions & 1 deletion html-ONLY-site/css/well-card.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;*/
Expand Down
2 changes: 1 addition & 1 deletion html-ONLY-site/search.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
150 changes: 150 additions & 0 deletions map.php
Original file line number Diff line number Diff line change
@@ -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
-->

0 comments on commit 2c77827

Please sign in to comment.