93 lines
2.9 KiB
HTML
93 lines
2.9 KiB
HTML
---
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en-US">
|
|
|
|
{% include head.html %}
|
|
|
|
<body>
|
|
|
|
{% include header.html %}
|
|
|
|
<div class="technology">
|
|
|
|
<div id="page-banner">
|
|
<div class="row">
|
|
<div class="small-12 small-centered columns">
|
|
<img src="/images/technologies/{{ page.slug }}" alt="{{ page.name }}">
|
|
<h1>Coops that use <span>{{ page.name }}</span></h1>
|
|
{% if page.description %}
|
|
<p>{{ page.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="small-12 columns">
|
|
|
|
<div class="view float-center">
|
|
<ul class="tabs" data-tabs id="coops-view-tabs">
|
|
<li class="tabs-title is-active"><a href="#grid" aria-selected="true">Grid</a></li>
|
|
<li class="separator">|</li>
|
|
<li class="tabs-title"><a href="#map">Map</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tabs-content" data-tabs-content="coops-view-tabs">
|
|
<!-- START Grid View Content -->
|
|
<div class="tabs-panel is-active" id="grid">
|
|
<div class="row small-up-2 medium-up-4 large-up-6 small-collapse">
|
|
{% for coop in site.coops %}
|
|
{% if coop.technologies contains page.slug %}
|
|
<div class="column">
|
|
<a href="{{ coop.url | relative_url }}" class="coop-thumb" id="#{{ coop.slug }}">
|
|
<img src="/images/coops/{{ coop.slug }}" alt="{{ coop.name }}">
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<!-- END Grid View Content -->
|
|
|
|
<!-- START Map View Content -->
|
|
<div class="tabs-panel" id="map">
|
|
<div class="row small-up-2 medium-up-4 large-up-6 small-collapse">
|
|
<div id="map-technologies"></div>
|
|
<script type="text/javascript">
|
|
var mapEntries = [
|
|
{% for coop in site.coops %}
|
|
{% if coop.technologies contains page.slug %}
|
|
{
|
|
lat: {{ coop.latitude }},
|
|
lng: {{ coop.longitude }},
|
|
markerText: '<b><a href=\"{{ coop.url | relative_url }}\">{{ coop.name }}</a></b><br><br>{{ coop.address | split: "," | join: "<br>" }}'
|
|
},
|
|
{% endif %}
|
|
{% endfor %}
|
|
];
|
|
|
|
$(document).ready(function() {
|
|
window.app.createMapMultiMarker('map-technologies', 54.7, -4.2, 6, mapEntries);
|
|
});
|
|
|
|
// TODO fix bug with tiles not displaying properly until window resized
|
|
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<!-- END Map View Content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include footer.html %}
|
|
|
|
{% include javascripts.html %}
|
|
</body>
|
|
|
|
</html>
|