Skip to content

Commit 53e61d9

Browse files
bbraithwaitebbraithwaite
committed
refactor 1: remove css and style
1 parent 3ff63d9 commit 53e61d9

File tree

2 files changed

+97
-101
lines changed

2 files changed

+97
-101
lines changed

‎app/index.html

Lines changed: 7 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -3,96 +3,8 @@
33
<head>
44
<title>SF Movies | Find out where the best movies happened in San Fransisco</title>
55
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
6-
<style type="text/css">
7-
html, body, #map-canvas {
8-
height: 100%;
9-
margin: 0;
10-
padding: 0;
11-
}
12-
13-
ul {
14-
list-style-position: outside;
15-
list-style-type: none;
16-
margin: 0 10px 0 0;
17-
padding: 0;
18-
}
19-
20-
li {
21-
background-color: #fff;
22-
width: 100%;
23-
display: list-item;
24-
margin: 0;
25-
padding: 10px 15px;
26-
font-size: 1.4em;
27-
}
28-
29-
li span {
30-
font-size: smaller;
31-
font-style: italic;
32-
}
33-
34-
li .locations {
35-
font-size: smaller;
36-
color: #777;
37-
}
38-
39-
li:hover {
40-
background-color: #eee;
41-
cursor: pointer;
42-
}
43-
44-
#dashboard, #film_detail, #location_detail {
45-
padding-left: 10px;
46-
padding-right: 10px;
47-
}
48-
49-
#top {
50-
width: 85%;
51-
}
52-
53-
#top img {
54-
float: left;
55-
margin-right: 20px;
56-
}
57-
58-
#top input {
59-
width: 100%;
60-
padding: 10px;
61-
margin: 10px 0 0 0;
62-
font-size: 16px;
63-
}
64-
65-
.watermark {
66-
color: #666;
67-
}
68-
69-
input[type=button] {
70-
background: #999;
71-
background-image: -webkit-linear-gradient(top, #999, #333);
72-
background-image: -moz-linear-gradient(top, #999, #333);
73-
background-image: -ms-linear-gradient(top, #999, #333);
74-
background-image: -o-linear-gradient(top, #999, #333);
75-
background-image: linear-gradient(to bottom, #999, #333);
76-
-webkit-border-radius: 8;
77-
-moz-border-radius: 8;
78-
border-radius: 8px;
79-
color: #ffffff;
80-
padding: 5px;
81-
text-decoration: none;
82-
}
83-
84-
::-webkit-scrollbar {
85-
-webkit-appearance: none;
86-
width: 7px;
87-
}
88-
89-
::-webkit-scrollbar-thumb {
90-
border-radius: 4px;
91-
background-color: rgba(0,0,0,.5);
92-
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
93-
}
94-
</style>
95-
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmB6mTdjeQQrC3idzFKh1Vi5mwZ_5ogqo"></script>
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
968
<script type="text/javascript">
979
/*
9810
* NOTE: this (probably) isn't how you should be doing JavaScript!
@@ -124,22 +36,15 @@
12436
map = new google.maps.Map(mapDiv, mapOptions);
12537

12638
var searchControlDiv = document.createElement('div');
127-
searchControlDiv.index = 1;
12839
searchControlDiv.id = 'top';
40+
searchControlDiv.className = 'top';
12941

13042
new SearchControl(searchControlDiv, map);
13143
map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchControlDiv);
13244

13345
var homeControlDiv = document.createElement('div');
134-
homeControlDiv.index = 1;
13546
homeControlDiv.id = 'bottom_panel';
136-
homeControlDiv.style.backgroundColor = 'white';
137-
homeControlDiv.style.borderStyle = 'solid';
138-
homeControlDiv.style.borderColor = '#ccc';
139-
homeControlDiv.style.borderWidth = '1px';
140-
homeControlDiv.style.width = '100%';
141-
homeControlDiv.style.height = '150px';
142-
homeControlDiv.index = 1;
47+
homeControlDiv.className = 'bottom_panel';
14348

14449
new HomeControl(homeControlDiv, map);
14550
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(homeControlDiv);
@@ -153,7 +58,6 @@
15358
controlUI.type = 'text';
15459
controlUI.name = 'q';
15560
controlUI.id = 'q';
156-
controlDiv.style.padding = '10px';
15761
controlUI.value = watermark;
15862
controlUI.className = 'watermark';
15963
controlUI.autocomplete = 'off';
@@ -181,7 +85,6 @@
18185

18286
var resultsUI = document.createElement('div');
18387
resultsUI.id = 'films_results';
184-
resultsUI.index = 1;
18588
controlDiv.appendChild(resultsUI);
18689
}
18790

@@ -282,6 +185,7 @@
282185
// Set CSS for the control interior.
283186
var controlText = document.createElement('div');
284187
controlText.id = 'film_detail';
188+
controlText.className = 'film_detail';
285189
controlText.innerHTML = '<h2>' + response + '</h2><br><em>Loading locations and content...</em>';
286190

287191
document.getElementById('bottom_panel').appendChild(controlText);
@@ -357,6 +261,7 @@
357261
}
358262

359263
locationDiv.id = 'location_detail';
264+
locationDiv.className = 'location_detail';
360265
locationDiv.style.display = '';
361266
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">';
362267

@@ -425,6 +330,7 @@
425330
var dashBoard = document.createElement('div');
426331
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>';
427332
dashBoard.id = 'dashboard';
333+
dashBoard.className = 'dashboard';
428334

429335
controlDiv.appendChild(dashBoard);
430336
}

‎app/style.css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
html, body, #map-canvas {
2+
height: 100%;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
ul {
8+
list-style-position: outside;
9+
list-style-type: none;
10+
margin: 0 10px 0 0;
11+
padding: 0;
12+
}
13+
14+
li {
15+
background-color: #fff;
16+
width: 100%;
17+
display: list-item;
18+
margin: 0;
19+
padding: 10px 15px;
20+
font-size: 1.4em;
21+
}
22+
23+
li span {
24+
font-size: smaller;
25+
font-style: italic;
26+
}
27+
28+
li .locations {
29+
font-size: smaller;
30+
color: #777;
31+
}
32+
33+
li:hover {
34+
background-color: #eee;
35+
cursor: pointer;
36+
}
37+
38+
.dashboard, .film_detail, .location_detail {
39+
padding-left: 10px;
40+
padding-right: 10px;
41+
}
42+
43+
.top {
44+
width: 85%;
45+
padding: 10px;
46+
}
47+
48+
.top input {
49+
padding: 10px;
50+
width: 100%;
51+
font-size: 16px;
52+
}
53+
54+
.bottom_panel {
55+
background-color: #fff;
56+
border: solid 1px #ccc;
57+
width: 100%;
58+
height: 150px;
59+
z-index: 1;
60+
}
61+
62+
.watermark {
63+
color: #666;
64+
}
65+
66+
input[type=button] {
67+
background: #999;
68+
background-image: -webkit-linear-gradient(top, #999, #333);
69+
background-image: -moz-linear-gradient(top, #999, #333);
70+
background-image: -ms-linear-gradient(top, #999, #333);
71+
background-image: -o-linear-gradient(top, #999, #333);
72+
background-image: linear-gradient(to bottom, #999, #333);
73+
-webkit-border-radius: 8;
74+
-moz-border-radius: 8;
75+
border-radius: 8px;
76+
color: #ffffff;
77+
padding: 5px;
78+
text-decoration: none;
79+
}
80+
81+
::-webkit-scrollbar {
82+
-webkit-appearance: none;
83+
width: 7px;
84+
}
85+
86+
::-webkit-scrollbar-thumb {
87+
border-radius: 4px;
88+
background-color: rgba(0,0,0,.5);
89+
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
90+
}

0 commit comments

Comments
 (0)