Skip to content

Commit

Permalink
desktop friendly map and search page
Browse files Browse the repository at this point in the history
  • Loading branch information
etl12003 committed Mar 26, 2017
1 parent c00123e commit 9d93939
Show file tree
Hide file tree
Showing 10 changed files with 249 additions and 108 deletions.
21 changes: 21 additions & 0 deletions html-ONLY-site/css/desktop.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@media only screen and (min-width: 65em) {


}

@media only screen and (min-width: 45em) {
div.well-card {
border: 2px solid #4d4d4d;
margin: 1.5rem;
}
main.search{
display: flex;
justify-content: center;
}

main.search a{
color: inherit;
width: 50%;
}

}
64 changes: 49 additions & 15 deletions html-ONLY-site/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -84,36 +84,48 @@ textarea {
box-sizing: border-box;
font-family: "roboto";
}

main.intro{
position: fixed;
margin-top: 0;
padding: 3rem;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: #65b2ff;
display: flex;
justify-content: center;
align-items: center;
}
div.intro{
margin-top: 1rem;
margin: 1rem 1rem 1rem 1rem;
padding: 3rem;
height: 100vh;
top: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: center;
max-width: 35rem;
max-height: 40rem;
}

main.intro h1{
font-size: 2.75rem;
.intro h1{
font-size: 2.3rem;
color: #000633;
}
main.intro p{
.intro p{
text-align: left;
height: 40vh;
color: white
color: white;
line-height: 1.45rem;
}
main.intro a{
.intro a{
font-size: 2rem;
color: white;
text-decoration: none;
padding: 1rem;
background-color: #000633;
border-radius: 10px;
width: 100%;
}
nav h1{
flex-grow: 1;
Expand Down Expand Up @@ -145,20 +157,26 @@ div.slide-menu{
display: flex;
flex-direction: column;
padding: 1rem;
//padding-top: 5rem;
box-shadow: 5px 0px 8px rgba(0, 0, 0, 0.35);
}

div.main-bttns{
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
}
div.slide-menu button{
margin: 1rem 0;
text-align: left;
font-weight: 600;
font-size: 1.2rem;
}
div.slide-menu p{
//margin-top: rem;
/* margin-top: rem;*/
}
div.slide-menu a{
//margin-top: 0rem;
/* margin-top: 0rem;*/
}
div.close-menu{
position: fixed;
Expand Down Expand Up @@ -246,11 +264,17 @@ button {
main{
margin-top: 4.1rem;
}
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
align-items: flex-start;
}
form{

Expand Down Expand Up @@ -350,14 +374,24 @@ input[type=search]{
margin: .5rem;
background: rgba(255, 255, 255, 0.19);
border: none;
//border-bottom: 2px rgb(255, 255, 255) solid;
/* //border-bottom: 2px rgb(255, 255, 255) solid;*/
color: white;
font-weight: 600;
font-size: 1.2rem;
border-radius: 5px;
max-width: 40rem;
}
main.details{
nav.search{
justify-content: center;
}
div.desk-details {
display: none;
}






/* ==========================================================================
Helper classes
Expand Down
60 changes: 60 additions & 0 deletions html-ONLY-site/css/map-desktop.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
@media only screen and (min-width: 65em) {
/* Style adjustments for viewports that meet the condition */
nav.top-nav{
width: 5rem;
}
nav.top-nav div.main-bttns{
flex-direction: column;
}
nav.top-nav h1{
display: none;
}
nav .slide-menu{
}

nav.bottom-nav{
width: 5rem;
flex-direction: column;
height: calc(100vh - 8rem);
margin-top: 5rem;
justify-content: flex-start;
padding-top: 4rem;
}
nav.bottom-nav button{
margin-bottom: 3rem;
}

div.well-card{
margin-left: 0;
margin-right: 0;
top: auto;
bottom: 1rem;
left: auto;
right: auto;
display: none;
}

div.desk-details{
display: block;
position: fixed;
right: 0;
top: 0;
width: 23rem;
height: 100vh;
overflow-y: scroll;
border-left: solid black 2px;
}
div.desk-details ul{
margin: 1rem
}
div.desk-details li, div.desk-details p{
margin: 0rem
}
nav.fabs{
left: 6rem;
bottom: 1rem;
}
main.details{
margin-top: 0rem;
}
}
13 changes: 13 additions & 0 deletions html-ONLY-site/css/well-card.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ div.well-card p{
}
div.well-card {
border-bottom: 2px solid #4d4d4d;
max-width: 41rem;
width: 100%;
/* display: block;*/
/* margin-left: 0;*/
/* margin-right: 0;*/
}

div.well-card .well-img{
Expand All @@ -23,4 +28,12 @@ div.well-card .well-img{
float: left;
width: 35%;
height: 8rem;
}

a.search-result{
color: inherit;
}

@media only screen and (min-width: 65em) {

}
Original file line number Diff line number Diff line change
@@ -1,41 +1,4 @@
<!doctype html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></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">
<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">
<button><a href="map.html"><img alt="back" src="img/back.svg" ></a></button> <h1>Details</h1>
<button><a href="form.html"><img alt="edit" src="img/edit.svg" ></a></button>
</nav>

<main class="details">
<img src="https://s-media-cache-ak0.pinimg.com/originals/33/c2/c4/33c2c4cf367ecee38a162d362a31fd68.jpg"/>
<ul class="inputs" id="report-metadata">
Expand Down Expand Up @@ -271,31 +234,4 @@ <h2>Other Notes</h2>
</ul>
<p type="submit" value="Submit">
</main>


<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>
67 changes: 67 additions & 0 deletions html-ONLY-site/details.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!doctype html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></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">
<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">
<button><a href="map.html"><img alt="back" src="img/back.svg" ></a></button> <h1>Details</h1>
<button><a href="form.html"><img alt="edit" src="img/edit.svg" ></a></button>
</nav>
<main class="details">

<?php
include 'details-content.php';
?>
<main class="details">
<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>
2 changes: 1 addition & 1 deletion html-ONLY-site/form.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@


<nav class="top-nav">
<button><a href="map.html">Cancel</a></button>
<button><a href="map.php">Cancel</a></button>
<button>Save Draft</button>
</nav>

Expand Down
Loading

0 comments on commit 9d93939

Please sign in to comment.