Improvements

templates/conference.html

@@ -1,5 +1,28 @@
 {% 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 %}
@@ -8,36 +31,84 @@
   <h1>{{ item.title }}</h1>
   <p><a href="{{ url_for("index") }}">home</a></p>
 
-  <ul>
-    <li>start: {{ item.start }}</li>
-    <li>end: {{ item.end }}</li>
+  <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 %}
-      <li>days: {{ item.days }}</li>
+      <div>days: {{ item.days }}</div>
     {% endif %}
-    <li>short name: {{ item.short_name }}</li>
-    <li>country: {{ item.country or "n/a" }}</li>
-  </ul>
+    {# <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 class="card my-2">
-  <div class="card-body">
-    <h5 class="card-title">
-      <a href="{{ url_for("event_page", event_id=event.id) }}">{{ event.title }}</a>
-    </h5>
-    <h6 class="card-subtitle mb-2 text-body-secondary">
+  <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("%d %b %Y at %H:%M") }}
+        📅 {{ event.event_date.strftime("%a, %d %b %Y at %H:%M") }}
       {% else %}
         event date missing
       {% endif %}
-    </h6>
-    <p class="card-text">
+
+      <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 %}
-      <a href="{{ event.url }}">talk on conference website</a>
+      <p><a href="{{ event.url }}">talk on conference website</a></p>
       {% endif %}
 
     {% if event.abstract %}
@@ -60,12 +131,7 @@
     </p>
     {% endif %}
 
-    <p class="card-text">
-      Speakers:
-      {% for p in event.people %}
-        <a href="{{ url_for("person", person_id=p.id) }}">{{ p.name }}</a>
-      {% endfor %}
-    </p>
+    </div>
   </div>
 </div>
 
@@ -74,3 +140,32 @@
   </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 %}