Skip to content

Commit 0cc3e5a

Browse files
bjorn2404bjorn2404
committed
Added Bootstrap example, removed blanket (couldn't get it working with current plugin pattern), added resize listener to re-center map, added getData test
1 parent 9f49739 commit 0cc3e5a

14 files changed

+607
-67
lines changed

‎Gruntfile.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ module.exports = function (grunt) {
1515
},
1616
less : {
1717
dist: {
18-
src : 'src/css/storelocator.less',
19-
dest: 'dist/css/storelocator.css'
18+
files: {
19+
'dist/css/storelocator.css' : 'src/css/storelocator.less',
20+
'dist/css/bootstrap-example.css' : 'src/css/bootstrap-example.less'
21+
}
2022
}
2123
},
2224
concat : {
@@ -79,7 +81,8 @@ module.exports = function (grunt) {
7981
cssmin : {
8082
dist: {
8183
files: {
82-
'dist/css/storelocator.min.css': 'dist/css/storelocator.css'
84+
'dist/css/storelocator.min.css': 'dist/css/storelocator.css',
85+
'dist/css/bootstrap-example.min.css': 'dist/css/bootstrap-example.css'
8386
}
8487
}
8588
},

‎dist/bootstrap-example.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Map Example</title>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
9+
<link rel="stylesheet" type="text/css" href="css/bootstrap-example.min.css" />
10+
</head>
11+
12+
<body>
13+
14+
<div class="bh-sl-container container-fluid">
15+
<div class="jumbotron">
16+
<div class="container">
17+
<h1>Using Chipotle as an Example</h1>
18+
<p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden
19+
Prarie, etc. would be good for testing the functionality. You can use just the city as the address - ex:
20+
Edina, MN.</p>
21+
22+
<div class="bh-sl-form-container">
23+
<form id="bh-sl-user-location" class="form-inline" method="post" action="#" role="form">
24+
<div id="form-input" class="form-group">
25+
<label for="bh-sl-address">Enter Address or Zip Code:</label>
26+
<input class="form-control" type="text" id="bh-sl-address" name="bh-sl-address" />
27+
</div>
28+
29+
<button id="bh-sl-submit" class="btn btn-primary" type="submit">Submit</button>
30+
</form>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div id="map-container" class="bh-sl-map-container">
36+
<div class="row">
37+
<div id="map-results-container" class="container">
38+
<div id="bh-sl-map" class="bh-sl-map col-md-9"></div>
39+
<div class="bh-sl-loc-list col-md-3">
40+
<ul class="list list-unstyled"></ul>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
48+
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
49+
<script src="js/handlebars.min.js"></script>
50+
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
51+
<script src="js/jquery.storelocator.js"></script>
52+
<script>
53+
$(function() {
54+
$('#map-container').storeLocator();
55+
});
56+
</script>
57+
58+
</body>
59+
</html>

‎dist/css/bootstrap-example.css

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
/* Infowindow Roboto font override */
2+
.gm-style div,
3+
.gm-style span,
4+
.gm-style label,
5+
.gm-style a {
6+
font-family: Arial, Helvetica, sans-serif;
7+
}
8+
.bh-sl-error {
9+
clear: both;
10+
float: left;
11+
width: 100%;
12+
padding: 10px 0;
13+
color: #ae2118;
14+
font-weight: bold;
15+
}
16+
.bh-sl-container {
17+
color: #333333;
18+
}
19+
.bh-sl-container .jumbotron {
20+
padding-top: 30px;
21+
}
22+
.bh-sl-container .form-input input,
23+
.bh-sl-container .form-input select,
24+
.bh-sl-container .form-input label {
25+
margin-right: 10px;
26+
}
27+
.bh-sl-container .bh-sl-loading {
28+
float: left;
29+
margin: 4px 0 0 10px;
30+
width: 16px;
31+
height: 16px;
32+
background: url(../img/ajax-loader.gif) no-repeat;
33+
}
34+
.bh-sl-container .bh-sl-filters-container {
35+
clear: both;
36+
width: 100%;
37+
margin: 15px 0;
38+
}
39+
.bh-sl-container .bh-sl-filters-container .bh-sl-filters {
40+
list-style: none;
41+
float: left;
42+
padding: 0;
43+
margin: 0 100px 0 0;
44+
}
45+
.bh-sl-container .bh-sl-filters-container .bh-sl-filters li {
46+
display: block;
47+
clear: left;
48+
float: left;
49+
width: 100%;
50+
margin: 5px 0;
51+
}
52+
.bh-sl-container .bh-sl-filters-container .bh-sl-filters li label {
53+
display: inline;
54+
}
55+
.bh-sl-container .bh-sl-filters-container .bh-sl-filters li input {
56+
display: block;
57+
float: left;
58+
margin: 2px 8px 2px 0;
59+
}
60+
.bh-sl-container .bh-sl-map-container {
61+
margin-top: 27px;
62+
}
63+
.bh-sl-container .bh-sl-map-container a {
64+
color: #e76737;
65+
text-decoration: none;
66+
}
67+
.bh-sl-container .bh-sl-map-container a:hover,
68+
.bh-sl-container .bh-sl-map-container a:active {
69+
text-decoration: underline;
70+
}
71+
.bh-sl-container .bh-sl-loc-list {
72+
height: 530px;
73+
overflow-x: auto;
74+
}
75+
.bh-sl-container .bh-sl-loc-list ul {
76+
display: block;
77+
clear: left;
78+
float: left;
79+
width: 100%;
80+
list-style: none;
81+
margin: 0;
82+
padding: 0;
83+
}
84+
.bh-sl-container .bh-sl-loc-list ul li {
85+
display: block;
86+
clear: left;
87+
float: left;
88+
margin: 3% 4%;
89+
cursor: pointer;
90+
width: 92%;
91+
border: 1px solid #ffffff;
92+
/* Adding this to prevent moving li elements when adding the list-focus class*/
93+
}
94+
.bh-sl-container .bh-sl-loc-list .list-label {
95+
float: left;
96+
margin: 10px 0 0 6px;
97+
padding: 2px 3px;
98+
width: 10%;
99+
max-width: 25px;
100+
text-align: center;
101+
background: #451400;
102+
color: #ffffff;
103+
font-weight: bold;
104+
}
105+
.bh-sl-container .bh-sl-loc-list .list-details {
106+
float: left;
107+
margin-left: 6px;
108+
width: 80%;
109+
}
110+
.bh-sl-container .bh-sl-loc-list .list-details .list-content {
111+
padding: 10px;
112+
}
113+
.bh-sl-container .bh-sl-loc-list .list-details .loc-dist {
114+
font-weight: bold;
115+
font-style: italic;
116+
color: #8e8e8e;
117+
}
118+
.bh-sl-container .bh-sl-loc-list .list-focus {
119+
border: 1px solid rgba(82, 168, 236, 0.9);
120+
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.7);
121+
-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.7);
122+
box-shadow: 0 0 8px rgba(82, 168, 236, 0.7);
123+
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
124+
}
125+
.bh-sl-container .bh-sl-loc-list .bh-sl-close-directions-container {
126+
width: 100%;
127+
height: 20px;
128+
position: relative;
129+
}
130+
.bh-sl-container .bh-sl-loc-list .bh-sl-close-directions-container .bh-sl-close-icon {
131+
top: 0;
132+
right: 6px;
133+
}
134+
.bh-sl-container .bh-sl-loc-list .bh-sl-noresults-title {
135+
font-weight: bold;
136+
color: #ae2118;
137+
}
138+
.bh-sl-container .loc-name {
139+
/* Picked up by both list and infowindows */
140+
color: #ae2118;
141+
font-weight: bold;
142+
}
143+
.bh-sl-container .bh-sl-map {
144+
height: 530px;
145+
}
146+
.bh-sl-container .bh-sl-pagination-container {
147+
clear: both;
148+
}
149+
.bh-sl-container .bh-sl-pagination-container ol {
150+
list-style-type: none;
151+
text-align: center;
152+
margin: 0;
153+
padding: 10px 0;
154+
}
155+
.bh-sl-container .bh-sl-pagination-container ol li {
156+
display: inline-block;
157+
padding: 10px;
158+
cursor: pointer;
159+
font: bold 14px Arial, Helvetica, sans-serif;
160+
color: #ae2118;
161+
text-decoration: underline;
162+
}
163+
.bh-sl-container .bh-sl-pagination-container ol .bh-sl-current {
164+
color: #333333;
165+
cursor: auto;
166+
text-decoration: none;
167+
}
168+
/* Modal window */
169+
.bh-sl-overlay {
170+
position: fixed;
171+
left: 0px;
172+
top: 0px;
173+
width: 100%;
174+
height: 100%;
175+
z-index: 10000;
176+
background: url(../img/overlay-bg.png) repeat;
177+
}
178+
.bh-sl-overlay .bh-sl-modal-window {
179+
position: absolute;
180+
left: 50%;
181+
margin-left: -460px;
182+
/* width divided by 2 */
183+
margin-top: 60px;
184+
width: 920px;
185+
height: 590px;
186+
z-index: 10010;
187+
background: #ffffff;
188+
border-radius: 10px;
189+
box-shadow: 0 0 10px #656565;
190+
}
191+
.bh-sl-overlay .bh-sl-modal-window .bh-sl-modal-content {
192+
float: left;
193+
padding: 0 22px;
194+
/* there's already a margin on the top of the map-container div */
195+
}
196+
.bh-sl-overlay .bh-sl-modal-window .bh-sl-close-icon {
197+
top: -6px;
198+
right: -6px;
199+
}
200+
.bh-sl-close-icon {
201+
position: absolute;
202+
width: 18px;
203+
height: 18px;
204+
cursor: pointer;
205+
background: #2c2c2c url(../img/close-icon.png) 3px 3px no-repeat;
206+
border: 1px solid #000000;
207+
border-radius: 3px;
208+
box-shadow: 0 0 3px #656565;
209+
}

‎dist/css/bootstrap-example.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/storelocator.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@
1010
.gm-style a {
1111
font-family: Arial, Helvetica, sans-serif;
1212
}
13+
.bh-sl-error {
14+
clear: both;
15+
float: left;
16+
width: 100%;
17+
padding: 10px 0;
18+
color: #ae2118;
19+
font-weight: bold;
20+
}
1321
.bh-sl-container {
1422
float: left;
1523
margin-left: 20px;
@@ -132,6 +140,7 @@
132140
margin: 10px 0 0 6px;
133141
padding: 2px 3px;
134142
width: 10%;
143+
max-width: 25px;
135144
text-align: center;
136145
background: #451400;
137146
color: #ffffff;

0 commit comments

Comments
 (0)