d634816ef5
As the map tab is created hidden by default, leaflet seems unable to deal with the sizing properly initially, but we can hook into the "tab changed" event, and tell leaflet to recalculate the size after switching tabs
94 lines
3.0 KiB
HTML
94 lines
3.0 KiB
HTML
---
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
|
|
{% 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() {
|
|
var map = window.app.createMapMultiMarker('map-technologies', 54.7, -4.2, 6, mapEntries);
|
|
$('#coops-view-tabs').on('change.zf.tabs', function() {
|
|
map.invalidateSize();
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<!-- END Map View Content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include footer.html %}
|
|
|
|
{% include javascripts.html %}
|
|
</body>
|
|
|
|
</html>
|