Permalink
Browse files

refactor 1: remove css and style

  • Loading branch information...
bbraithwaite committed Apr 9, 2015
1 parent 3ff63d9 commit 53e61d9d3e528a1e1176698780891933db94e3f4
Showing with 97 additions and 101 deletions.
  1. +7 −101 app/index.html
  2. +90 −0 app/style.css
@@ -3,96 +3,8 @@
<head>
<title>SF Movies | Find out where the best movies happened in San Fransisco</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
ul {
list-style-position: outside;
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}
li {
background-color: #fff;
width: 100%;
display: list-item;
margin: 0;
padding: 10px 15px;
font-size: 1.4em;
}
li span {
font-size: smaller;
font-style: italic;
}
li .locations {
font-size: smaller;
color: #777;
}
li:hover {
background-color: #eee;
cursor: pointer;
}
#dashboard, #film_detail, #location_detail {
padding-left: 10px;
padding-right: 10px;
}
#top {
width: 85%;
}
#top img {
float: left;
margin-right: 20px;
}
#top input {
width: 100%;
padding: 10px;
margin: 10px 0 0 0;
font-size: 16px;
}
.watermark {
color: #666;
}
input[type=button] {
background: #999;
background-image: -webkit-linear-gradient(top, #999, #333);
background-image: -moz-linear-gradient(top, #999, #333);
background-image: -ms-linear-gradient(top, #999, #333);
background-image: -o-linear-gradient(top, #999, #333);
background-image: linear-gradient(to bottom, #999, #333);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
color: #ffffff;
padding: 5px;
text-decoration: none;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmB6mTdjeQQrC3idzFKh1Vi5mwZ_5ogqo"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/*
* NOTE: this (probably) isn't how you should be doing JavaScript!
@@ -124,22 +36,15 @@
map = new google.maps.Map(mapDiv, mapOptions);
var searchControlDiv = document.createElement('div');
searchControlDiv.index = 1;
searchControlDiv.id = 'top';
searchControlDiv.className = 'top';
new SearchControl(searchControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchControlDiv);
var homeControlDiv = document.createElement('div');
homeControlDiv.index = 1;
homeControlDiv.id = 'bottom_panel';
homeControlDiv.style.backgroundColor = 'white';
homeControlDiv.style.borderStyle = 'solid';
homeControlDiv.style.borderColor = '#ccc';
homeControlDiv.style.borderWidth = '1px';
homeControlDiv.style.width = '100%';
homeControlDiv.style.height = '150px';
homeControlDiv.index = 1;
homeControlDiv.className = 'bottom_panel';
new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(homeControlDiv);
@@ -153,7 +58,6 @@
controlUI.type = 'text';
controlUI.name = 'q';
controlUI.id = 'q';
controlDiv.style.padding = '10px';
controlUI.value = watermark;
controlUI.className = 'watermark';
controlUI.autocomplete = 'off';
@@ -181,7 +85,6 @@
var resultsUI = document.createElement('div');
resultsUI.id = 'films_results';
resultsUI.index = 1;
controlDiv.appendChild(resultsUI);
}
@@ -282,6 +185,7 @@
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.id = 'film_detail';
controlText.className = 'film_detail';
controlText.innerHTML = '<h2>' + response + '</h2><br><em>Loading locations and content...</em>';
document.getElementById('bottom_panel').appendChild(controlText);
@@ -357,6 +261,7 @@
}
locationDiv.id = 'location_detail';
locationDiv.className = 'location_detail';
locationDiv.style.display = '';
locationDiv.innerHTML = '<h2>' + location.location + '</h2><img src="https://maps.googleapis.com/maps/api/streetview?size=120x120&location=' + location.geo.lat + ',' + location.geo.lng + '" align="right">';
@@ -425,6 +330,7 @@
var dashBoard = document.createElement('div');
dashBoard.innerHTML = '<h2>SF Movies</h2><div>See film locations for all movies filmed in San Fransisco. <strong>Click on a marker to see more information about a location.</strong>.</div><p>This is a sample project from <a href="http://www.bradoncode.com">Bradley Braithwaite</a>.</p>';
dashBoard.id = 'dashboard';
dashBoard.className = 'dashboard';
controlDiv.appendChild(dashBoard);
}
@@ -0,0 +1,90 @@
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
ul {
list-style-position: outside;
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}
li {
background-color: #fff;
width: 100%;
display: list-item;
margin: 0;
padding: 10px 15px;
font-size: 1.4em;
}
li span {
font-size: smaller;
font-style: italic;
}
li .locations {
font-size: smaller;
color: #777;
}
li:hover {
background-color: #eee;
cursor: pointer;
}
.dashboard, .film_detail, .location_detail {
padding-left: 10px;
padding-right: 10px;
}
.top {
width: 85%;
padding: 10px;
}
.top input {
padding: 10px;
width: 100%;
font-size: 16px;
}
.bottom_panel {
background-color: #fff;
border: solid 1px #ccc;
width: 100%;
height: 150px;
z-index: 1;
}
.watermark {
color: #666;
}
input[type=button] {
background: #999;
background-image: -webkit-linear-gradient(top, #999, #333);
background-image: -moz-linear-gradient(top, #999, #333);
background-image: -ms-linear-gradient(top, #999, #333);
background-image: -o-linear-gradient(top, #999, #333);
background-image: linear-gradient(to bottom, #999, #333);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
color: #ffffff;
padding: 5px;
text-decoration: none;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

0 comments on commit 53e61d9

Please sign in to comment.