conference-archive/templates/conference.html
2023-09-21 04:59:17 +01:00

172 lines
4.8 KiB
HTML

{% extends "base.html" %}
{% block style %}
<style>
.image-container {
width: 200px; /* Adjust this to your desired square size */
height: 240px; /* Same as width for a square */
display: inline-flex; /* Use inline-flex to display containers horizontally */
margin-right: 10px; /* Add some spacing between images (adjust as needed) */
justify-content: center; /* Horizontally center the content */
align-items: center; /* Vertically center the content */
overflow: hidden; /* Hide overflowing image parts */
}
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: cover; /* Crop and scale the image to fit the container */
object-position: center; /* Center the cropping horizontally */
}
</style>
{% endblock %}
{% set show_images = True %}
{% block title %}{{ item.title }}{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<h1>{{ item.title }}</h1>
<p><a href="{{ url_for("index") }}">home</a></p>
<div>
<div>series: {{ item.series.name }}
{% if item.series.wikidata_qid %}
<a href="https://www.wikidata.org/wiki/{{ item.series.wikidata_qid }}">Wikidata</a>
{% endif %}
</div>
<div>start: {{ item.start }}</div>
<div>end: {{ item.end }}</div>
{% if days %}
<div>days: {{ item.days }}</div>
{% endif %}
{# <div>short name: {{ item.short_name }}</div> #}
{% if item.venue %}
{% set country = item.venue.city.country %}
<div>
venue: {{ item.venue.name }}
{% if item.venue.wikidata_qid %}
<a href="https://www.wikidata.org/wiki/{{ item.venue.wikidata_qid }}">Wikidata</a>
{% endif %}
</div>
<div>
city: {{ item.venue.city.name }}
{% if item.venue.city.wikidata_qid %}
<a href="https://www.wikidata.org/wiki/{{ item.venue.city.wikidata_qid }}">Wikidata</a>
{% endif %}
</div>
<div>country: {{ country.name }} {{ country.flag }}</div>
{% endif %}
{% if item.wikidata_qid %}
<div>wikidata: <a href="https://www.wikidata.org/wiki/{{ item.wikidata_qid }}">{{ item.wikidata_qid }}</a></div>
{% endif %}
</div>
{% if show_images %}
<div>
{% for person in item.people %}
{% if person.wikidata_photo %}
<span class="image-container">
<a href="{{ url_for("person", person_id=person.id) }}">
<img src="{{ url_for("static", filename=person_image_filename(person.id)) }}" alt="{{ person.name}}" title="{{ person.name}}">
</a>
</span>
{% endif %}
{% endfor %}
</div>
{% endif %}
<h3>Talks</h3>
<p>{{ item.events.count() }} talks</p>
{% for event in item.events %}
<div>
<div>
<p>
🎤
<a href="{{ url_for("event_page", event_id=event.id) }}">{{ event.title }}</a><br>
Speakers:
{% for p in event.people %}
👤
<a href="{{ url_for("person", person_id=p.id) }}">{{ p.name }}</a>
{% endfor %}<br>
{% if event.event_date %}
📅 {{ event.event_date.strftime("%a, %d %b %Y at %H:%M") }}
{% else %}
event date missing
{% endif %}
<a class="event-detail-toggle" href="#">show details</a><br>
</p>
<div class="event-detail" id="event_{{event.id }}" style="display:none">
{% if event.url %}
<p><a href="{{ event.url }}">talk on conference website</a></p>
{% endif %}
{% if event.abstract %}
<p class="card-text">
{% if "<" in event.abstract %}
{{ event.abstract | safe }}
{% else %}
{{ event.abstract }}
{% endif %}
</p>
{% endif %}
{% if event.description %}
<p class="card-text">
{% if "<" in event.description %}
{{ event.description | safe }}
{% else %}
{{ event.description }}
{% endif %}
</p>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
{% block script %}
<script>
// Get all elements with the class "event-detail-toggle"
var toggleLinks = document.querySelectorAll(".event-detail-toggle");
// Loop through each toggle link and attach a click event handler
toggleLinks.forEach(function(link) {
link.addEventListener("click", function(e) {
e.preventDefault(); // Prevent the default link behavior
// Find the parent div of the clicked link
var parentDiv = this.closest("div");
// Find the element with class "event-detail" inside the parent div
var detailElement = parentDiv.querySelector(".event-detail");
// Toggle the display of the detail element
if (detailElement.style.display === "none" || detailElement.style.display === "") {
detailElement.style.display = "block";
this.textContent = "hide detail"; // Change the link text
} else {
detailElement.style.display = "none";
this.textContent = "show detail"; // Change the link text
}
});
});
</script>
{% endblock %}