5
0
mirror of https://git.coop/cotech/website.git synced 2024-12-23 19:15:24 +00:00
cotech-website/_layouts/technology.html
Nick Sellen d634816ef5
Fix bug with map display issue until resize
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
2020-08-20 11:53:58 +02:00

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>