This repository has been archived by the owner on Sep 2, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (62 loc) · 3.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Neighborhood Map</title>
<link href="https://fonts.googleapis.com/css?family=Asar" rel="stylesheet">
<link href="dist/styles/app.css" rel="stylesheet">
</head>
<body>
<div id="map" class="map"></div>
<div id="error" class="error"></div>
<button class="menu" data-bind="click: toggleMenu, css: { 'menu--hidden' : hideMenu }"><i class="fa fa-bars"></i></button>
<div class="wrapper" data-bind="css: { 'wrapper--hidden' : hideMenu }">
<div class="wrapper-inner">
<label class="search">
<input type="text"
class="search__input"
placeholder="Filter shops..."
data-bind="textInput: searchQuery, event: {keyup: filterMarkers}"></input>
</label>
<ul class="list" data-bind="foreach: visiblePlaces">
<li class="list__item" data-bind="click: $parent.showCurrentPlace">
<span class="list__itemTitle" data-bind="text: name"></span>
<span class="list__itemContent" data-bind="text: address"></span>
</li>
</ul>
</div>
</div>
<div class="shop" data-bind="with: currentPlace, visible: shouldShowCurrentPlace">
<button class="shop__close" data-bind="click: $parent.closeInfoBox">×</button>
<h1 class="shop__title" data-bind="text: name"></h1>
<!-- ko if: yelp_data.image -->
<div class="shop__image" data-bind="attr: {style: 'background-image: url(' + yelp_data.image + ')'}"></div>
<!-- /ko -->
<ul class="shop__info">
<li>
<i class="fa fa-map-marker"></i>
<span data-bind="text: address"></span>
</li>
<!-- ko if: yelp_data.phone -->
<li>
<i class="fa fa-phone"></i>
<a data-bind="text: yelp_data.display_phone, attr: {href: 'tel:' + yelp_data.phone}"></a>
</li>
<!-- /ko -->
<!-- ko if: yelp_data.url -->
<li>
<i class="fa fa-globe"></i>
<a data-bind="text: 'Find out more on YELP', attr: {href: yelp_data.url}"></a>
</li>
<!-- /ko -->
</ul>
<!-- ko if: !yelp_data.is_found -->
<p class="shop__error">We're sorry but we couldn't find any additional data related to this business.</p>
<!-- /ko -->
<p class="yelp">Data provided by YELP!</p>
</div>
<script src="dist/scripts/app.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTxfE1nvYvl4IBrcGyExaX8sVD-sftC2c&callback=app.init" onerror="app.handleError()"></script>
</body>
</html>