153 lines
3.8 KiB
HTML
153 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block style %}
|
|
<script src="{{ url_for("static", filename="leader-line.min.js") }}"></script>
|
|
<style>
|
|
.right-images {
|
|
position: absolute;
|
|
right: -280px;
|
|
top: 0;
|
|
width: 120px;
|
|
}
|
|
|
|
.left-images {
|
|
position: absolute;
|
|
right: -140px;
|
|
top: 0;
|
|
width: 120px;
|
|
}
|
|
|
|
|
|
|
|
.image {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% set show_images = True %}
|
|
|
|
{% block title %}Conference archive{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
|
|
{% if show_images %}
|
|
|
|
<div class="left-images">
|
|
{% for person, photo in left_photos %}
|
|
<div class="image-container" id="image-{{person.id}}">
|
|
<a href="{{ url_for("person", person_id=person.id) }}">
|
|
<img class="image" src="{{ url_for("static", filename=photo) }}" alt="{{ person.name}}" title="{{ person.name}}">
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="right-images">
|
|
{% for person, photo in right_photos %}
|
|
<div class="image-container">
|
|
<a href="{{ url_for("person", person_id=person.id) }}">
|
|
<img id="image-{{person.id}}" class="image" src="{{ url_for("static", filename=photo) }}" alt="{{ person.name}}" title="{{ person.name}}">
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<h1>Conference archive</h1>
|
|
|
|
<form action="{{ url_for("search_people") }}">
|
|
<div class="mb-3">
|
|
<label for="q" class="form-label">speaker name</label>
|
|
<input type="text" class="form-control" name="q" id="q">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Search</button>
|
|
</form>
|
|
|
|
<h3>Speaker/conference frequency distribution</h3>
|
|
|
|
<p>Distribution of speakers by conference count.</p>
|
|
{% for conf_count, speaker_count in speaker_counts %}
|
|
<div>
|
|
{{ plural(conf_count, "conference") }}:
|
|
{{ plural(speaker_count, "speaker") }}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<h3>Top speakers</h3>
|
|
<ul>
|
|
|
|
{% for person, count in top_speakers %}
|
|
{% if loop.first or loop.previtem[1] != count %}
|
|
<h4>{{ count }} conferences</h4>
|
|
{% endif %}
|
|
<div>
|
|
<span id="person-{{ person.id }}">
|
|
👤
|
|
<a href="{{ url_for("person", person_id=person.id) }}">{{ person.name }}</a>
|
|
({{ count }} conferences, {{ person.event_count }} talks)
|
|
{% if person.photo_filename() %}📷{% endif %}
|
|
{% if person.wikidata_qid %}
|
|
<a href="https://www.wikidata.org/wiki/{{ person.wikidata_qid }}">Wikidata</a>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
{% if show_images %}
|
|
<script>
|
|
{# var person_ids = {{ photo_person_ids | tojson }}; #}
|
|
var left = {{ left | tojson }};
|
|
var right = {{ right | tojson }};
|
|
var lines = {};
|
|
|
|
window.addEventListener('load', function() {
|
|
|
|
for(var i =0; i < left.length; i++) {
|
|
var id = left[i];
|
|
var person = document.getElementById('person-' + id);
|
|
var image = document.getElementById('image-' + id);
|
|
|
|
var line = new LeaderLine(LeaderLine.mouseHoverAnchor(person, 'draw'), image);
|
|
line.setOptions({startSocket: 'right', endSocket: 'left', path: 'fluid'});
|
|
|
|
var line2 = new LeaderLine(LeaderLine.mouseHoverAnchor(image, 'draw'), person);
|
|
line2.setOptions({startSocket: 'left', endSocket: 'right', path: 'fluid'});
|
|
|
|
|
|
// lines[id] = line;
|
|
}
|
|
|
|
for(var i =0; i < right.length; i++) {
|
|
var id = right[i];
|
|
var person = document.getElementById('person-' + id);
|
|
var image = document.getElementById('image-' + id);
|
|
|
|
var line = new LeaderLine(LeaderLine.mouseHoverAnchor(person, 'draw'), image);
|
|
line.setOptions({startSocket: 'right', endSocket: 'left', path: 'fluid'});
|
|
|
|
var line2 = new LeaderLine(LeaderLine.mouseHoverAnchor(image, 'draw'), person);
|
|
line2.setOptions({startSocket: 'left', endSocket: 'right', path: 'fluid'});
|
|
|
|
// lines[id] = line;
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|