location-list.html

---
layout: default
classname: "location-list"

canonical_url: /locations/

include_map: true
include_map_nav: true
include_footer: false

stylesheets:
  - "https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css"
---

<h2><a href="#list-results" id="list-results-title">List Results</a></h2>

<ul class="location-list" id="list-results">
	{% if page.collection %}

		{% assign data_collection = site.collections | where: "label", page.collection | first %}
		{% assign data_list = data_collection.docs %}
		{% assign list_limit = page.items_per_page %}
		{% assign list_offset = page.list_offset %}

		{% include list.html %}

	{% else %}

		{% assign data_list = site.data['generated-locations-for-jekyll'] %}
		{% assign list_limit = page.items_per_page %}
		{% assign list_offset = page.list_offset %}

		{% include list.html %}

	{% endif %}
</ul>

{% if page.next %}

<div class="pagination">
	<p><a href="{{ page.next }}"><span>Next {{ page.items_per_page }} results</span> <img src="/assets/images/icons/forward.svg" /></a></p>
</div>

<script>
(function() {
	if (PAGE_PARAMETERS.type || PAGE_PARAMETERS.address || PAGE_PARAMETERS.deserts) {

		// SHIM: Pass the query string onto the next page
		var paginationLink = document.querySelector('.pagination a[href]');
		if (paginationLink) {
			updateLink(paginationLink);
		}
	}
})();
</script>

{% endif %}

<!-- For location-list.js -->
<script type="text/template" id="you-are-here-template">
	<div class="you-are-here"><span>You are here</span></div>
</script>

<script type="text/template" id="search-this-area-template">
	<p class="action search-this-area"><a href="">Search this area</a></p>
</script>

<script type="text/template" id="list-item-template">
	<a href="" class="location-summary">
		<img src="" alt="" />
		<h2></h2>
		<p class="address"></p>
		<p class="type"></p>
		<p class="open">Open Now</p>
		<p class="distance"><span></span> <abbr title="miles">mi</abbr></p>
	</a>
</script>

<script type="text/template" id="list-item-template-detailed">
	<p class="action" style="text-align: center; font-size: 0.75em; margin-top: -0.375rem; margin-bottom: 0; display: none;">
		<button type="button" onclick="event.preventDefault(); if (window.oasis.hideLocationSummary) { window.oasis.hideLocationSummary(); }">
			Close
		</button>
	</p>

	<a href="" class="location-summary">
		<img src="" alt="" />
		<h2></h2>
		<p class="address"></p>
		<p class="type"></p>
		<p class="open">Open Now</p>
		<p class="distance"><span></span> <abbr title="miles">mi</abbr></p>
	</a>

	<ul class="options action">
		<li><a href="#shareable-link"><span><img src="/assets/images/icons/share.svg" height="24" class="icon" alt="" /></span> <span>Share</span></a></li>
		<li><a href="#directions"><span><img src="/assets/images/icons/directions.svg" height="24" class="icon" alt="" /></span> <span>Directions</span></a></li>
	</ul><!-- /.options -->

	<div class="shareable-link" id="shareable-link">
		<h2>Share</h2>
		<p class="copy-paste">
			<label>
				<span>Here’s a link you can copy and paste:</span>
				<input type="text" onclick="this.setSelectionRange(0, this.value.length)" readonly="readonly" />
			</label>
		</p>
	</div><!-- /.shareable-link -->

	<div class="directions" id="directions">
		<h2>Directions</h2>
		<p class="copy-paste">
			<label>
				<span>Here’s an address you can copy and paste:</span>
				<textarea onclick="this.setSelectionRange(0, this.value.length)" readonly="readonly"></textarea>
			</label>
		</p>
		
		<p><a href="https://maps.google.com/maps?q={ directions_url }">Get Directions on Google Maps</a></p>
	</div>

	<section class="dates">
		<h2>Dates</h2>
		<p></p>
	</section>

	<section class="hours">
		<h2>Hours</h2>
		<dl></dl>
	</section>

	<section class="information">
		<h2>Information</h2>
		<dl>
			<dt class="website">Website</dt>
			<dd class="website"></dd>
			<dt class="phone">Phone</dt>
			<dd class="phone"></dd>
			<dt class="facebook">Facebook</dt>
			<dd class="facebook"></dd>
			<dt class="instagram">Instagram</dt>
			<dd class="instagram"></dd>
			<dt class="twitter">Twitter</dt>
			<dd class="twitter"></dd>
		</dl>
	</section>

	<div class="content"></div>

	<section class="note">
		<h2>This location’s address and hours may have changed.</h2> 
		<p></p>
	</section>

	<section class="location-details-options">
		<h2>Options</h2>

		<ul class="options action secondary">
			<li><a href="mailto:contact@foodoasis.la?subject=Claim Business, { data.name }, Food Oasis LA&body=Hello team at Food Oasis LA. I’d like to claim this business… { data.name }: https://foodoasis.la{ data.uri }">Claim Business</a></li>
			<li><a href="https://form.jotform.com/62638504761156?businessName={ data.name }&amp;address={ data.address_1 }&amp;category={ data.category }&amp;longitude={ data.longitude }&amp;latitude={ data.latitude }">Report Issue</a></li>
		</ul>
	</section>
</script>

<script type="text/template" id="no-results-template">
	<section role="status" class="message">
		<h1>Oops! We couldn’t find any matching locations.</h1>
		<p>You may want to <a href="/search/">try a new search</a></p>
	</section>
</script>

<script src="/assets/js/helpers.js"></script>
<script src="/assets/js/location-list-toggle-view.js"></script>

<!-- Jim’s Google Maps API key -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBP5KxqO9v1sLhXlkrG3vDiDdOJvYLJ0H4"></script>

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js"></script>

<script>
	if (!mapboxgl.supported()) {
		if (console && console.log) console.log('MapboxGL doesn’t appear to be supported in this web browser. Showing the list instead…');
		window.oasis.showList();
		window.oasis.hideToggleButtons();
	} else {
		document.body.classList.add('has-active-map');
	}
</script>

<script>
var itemsPerPage = {{ page.items_per_page }};
var listOffset = {{ page.list_offset }};
</script>

{% if page.collection %}
<script src="/api/{{ page.collection }}.js"></script>
{% else %}
<script src="/api/locations.js"></script>
{% endif %}

<script>
(function() {

	var foodSourcesList = document.querySelector('ul.location-list');
	if (foodSourcesList) foodSourcesList.classList.add('sorting');

	// If sorting is taking a long time, show the default list again.
	setTimeout(function() {
		var foodSourcesList = document.querySelector('ul.location-list');
		if (foodSourcesList) foodSourcesList.classList.remove('sorting');
	}, 5000);

})();
</script>

<script src="/assets/js/geolocate.js"></script>
<script src="/assets/js/location-list-sort.js"></script>
<script src="/assets/js/location-list-item.js"></script>
<script src="/assets/js/location-list-map.js"></script>