www/layouts/contributors/list.html

96 lines
4.2 KiB
HTML

{{ define "main" }}
<style>body { height: auto !important; min-height: 100vh !important; }</style>
<link rel="stylesheet" href="/css/projects.css">
<link rel="stylesheet" href="/css/contributors.css">
<div class="contributors-page">
{{/* ── Header ── */}}
<h1 class="projects-title">Contributors</h1>
<p class="projects-subtitle">Neuropsychobiology of Aggression</p>
<div class="area-bar" style="margin-bottom:2rem">
<div class="area-bar-a" style="flex:8"></div>
<div class="area-bar-b" style="flex:5"></div>
<div class="area-bar-c" style="flex:7"></div>
<div class="area-bar-q" style="flex:3"></div>
</div>
{{/* ── Intro + figure ── */}}
<div class="projects-intro-row" style="margin-bottom:2.5rem">
<div class="projects-intro-text">
<h2 class="projects-areas-title">Contributors</h2>
<p>TRR379 is a large collaborative research initiative. Many individuals contribute their expertise in various roles, such as:</p>
<ul>
<li><a href="/roles/spokesperson/">Spokesperson</a></li>
<li><a href="/roles/deputy-spokesperson/">Deputy spokesperson</a></li>
<li><a href="/roles/pi/">Principal investigator / project lead</a></li>
<li><a href="/roles/postdoc/">Postdoctoral researchers</a></li>
<li><a href="/roles/doctoral-researcher/">Doctoral researchers</a></li>
<li><a href="/roles/research-assistant/">Research assistants</a></li>
<li><a href="/roles/sab-member/">Scientific Advisory Board</a></li>
<li><a href="/roles/eoc-member/">Equal Opportunity Committee</a></li>
<li><a href="/roles/cab-member/">Citizen Advisory Board</a></li>
</ul>
<p>The following individuals are contributing to this effort.</p>
</div>
<div class="projects-intro-figure">
<img src="/people.png" alt="">
</div>
</div>
{{/* ── Role filter buttons ── */}}
<div class="role-filters">
<button class="role-btn active" data-role="all">All</button>
<button class="role-btn" data-role="spokesperson">Spokesperson</button>
<button class="role-btn" data-role="deputy-spokesperson">Deputy spokesperson</button>
<button class="role-btn" data-role="pi">Principal investigator</button>
<button class="role-btn" data-role="postdoc">Postdoc</button>
<button class="role-btn" data-role="doctoral-researcher">Doctoral researcher</button>
</div>
{{/* ── Portrait grid ── */}}
<div class="contributors-grid" id="contributorsGrid">
{{ range sort .Pages ".Params.sortkey" }}
{{ $portrait := .Resources.GetMatch "*portrait*" }}
{{ $roles := delimit (.Params.roles | default slice) " " }} <a class="contributor-card"
href="{{ .Permalink }}"
data-roles="{{ $roles }}">
<div class="contributor-portrait">
{{ with $portrait }}
<img src="{{ (.Fill "300x300 Center").RelPermalink }}" alt="{{ $.Title }}">
{{ else }}
<div class="contributor-placeholder">
<span>{{ substr .Title 0 1 }}</span>
</div>
{{ end }}
</div>
<div class="contributor-name">
{{ with .Params.params }}{{ with .name_title }}<span class="contributor-title">{{ . }}</span> {{ end }}{{ end }}
{{ .Title }}
</div>
</a>
{{ end }}
</div>
</div>
<script>
document.querySelectorAll('.role-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.role-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const role = btn.dataset.role;
document.querySelectorAll('.contributor-card').forEach(card => {
if (role === 'all' || card.dataset.roles.includes(role)) {
card.style.display = '';
} else {
card.style.display = 'none';
}
});
});
});
</script>
{{ end }}