mohamad
d4ec85add4
Add independent map profiles, offline city lookup, bundled world artwork and collision-free portrait placement with optional person details. Deploy with updated requirements, migrations 0029-0031 and collectstatic.
32 lines
2.7 KiB
HTML
32 lines
2.7 KiB
HTML
{% load static %}
|
|
{% for placement in placements %}
|
|
<section class="section"><div class="container">
|
|
<article class="people-map people-map--{{ placement.people_map.style }}">
|
|
<header class="people-map-heading"><span class="people-map-eyebrow">CONNECTED ACROSS THE WORLD</span><h2>{{ placement.people_map.title }}</h2><p>{{ placement.people_map.description }}</p></header>
|
|
<div class="people-map-scroll" tabindex="0" aria-label="World map. Scroll horizontally on small screens.">
|
|
<div class="people-map-canvas" data-people-map>
|
|
<img class="people-map-land{% if placement.people_map.background_style != 'classic' %} people-map-land--preset{% endif %}" src="{% if placement.people_map.background_image %}{{ placement.people_map.background_image.url }}{% else %}{% static placement.people_map.background_static_path %}{% endif %}" alt="World map" />
|
|
<svg class="people-map-lines" aria-hidden="true"></svg>
|
|
{% for member in placement.people_map.memberships.all %}
|
|
<{% if placement.people_map.show_people_details %}a{% else %}span{% endif %} class="people-map-pin" {% if placement.people_map.show_people_details %}href="#map-{{ placement.pk }}-person-{{ member.pk }}"{% endif %} data-lat="{{ member.latitude|stringformat:'.6f' }}" data-lon="{{ member.longitude|stringformat:'.6f' }}" aria-label="{{ member.person.name }} — {{ member.city }} {{ member.country }}">
|
|
{% if member.person.photo %}<img src="{{ member.person.photo.url }}" alt="" loading="lazy" />{% else %}<span class="people-map-initial">{{ member.person.name|first }}</span>{% endif %}
|
|
<span class="people-map-label">{{ member.person.name }}</span>
|
|
</{% if placement.people_map.show_people_details %}a{% else %}span{% endif %}>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% if placement.people_map.show_people_details %}
|
|
<div class="people-map-directory">
|
|
{% for member in placement.people_map.memberships.all %}
|
|
<article class="people-map-person" id="map-{{ placement.pk }}-person-{{ member.pk }}" tabindex="-1">
|
|
{% if member.person.photo %}<img src="{{ member.person.photo.url }}" alt="{{ member.person.name }}" loading="lazy" />{% endif %}
|
|
<div><h3>{{ member.person.name }}{% if member.person.qualifications %}, {{ member.person.qualifications }}{% endif %}</h3><p>{{ member.person.role }}</p><p>{{ member.person.institution }}</p><small>{{ member.city }}{% if member.city and member.country %}, {% endif %}{{ member.country }}</small>
|
|
{% if member.person.biography %}<p>{{ member.person.biography|linebreaksbr }}</p>{% endif %}
|
|
{% if member.person.profile_url %}<a href="{{ member.person.profile_url }}" rel="noopener noreferrer">View profile ↗</a>{% endif %}</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</article></div></section>
|
|
{% endfor %}
|