Personnel filtering

content/personal/anezka-kolesova/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Anežka Kolešová"
 role = "Instruktor"
+beh = [3]
 +++

content/personal/bara-vavrinova/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Bára Vavřínová"
 role = "Instruktor"
+beh = [1]
 +++

content/personal/dalibor-brabec/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Dalibor Brabec"
 role = "Instruktor"
+beh = [1]
 +++

content/personal/david-maly/index.md

@@ -4,4 +4,5 @@ weight = 7
 [extra]
 name = "David Malý"
 role = "Hospodář"
+beh = [3]
 +++

content/personal/emil-miler/index.md

@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Emil Miler"
 role = "Oddílák"
+beh = [1,3]
 +++

content/personal/hanka-mala/index.md

@@ -4,4 +4,5 @@ weight = 6
 [extra]
 name = "Hanka Malá"
 role = "Kuchař"
+beh = [3]
 +++

content/personal/hanka-vajsejtlova/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Hanka Vajsejtlová"
 role = "Instruktor"
+beh = [1,3]
 +++

content/personal/honza-kubicek/index.md

@@ -4,4 +4,5 @@ weight = 99
 [extra]
 name = "Honza Kubíček"
 role = "Hlavas na dovolené"
+beh = [3]
 +++

content/personal/jan-sruc/index.md

@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Jan Šruc"
 role = "Oddílák"
+beh = [1]
 +++

content/personal/janca-blahoudkova/index.md

@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Janča Blahoudková"
 role = "Oddílák"
+beh = [3]
 +++

content/personal/jara-dryml/index.md

@@ -4,4 +4,5 @@ weight = 5
 [extra]
 name = "Jára Dryml"
 role = "Technik"
+beh = [3]
 +++

content/personal/jindra-jobbik/index.md

@@ -4,4 +4,5 @@ weight = 7
 [extra]
 name = "Jindra Jobbik"
 role = "Hospodář"
+beh = [3]
 +++

content/personal/kacka-kolarova/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Kačka Kolářová"
 role = "Instruktor"
+beh = [1,3]
 +++

content/personal/kamil-koza/index.md

@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Kamil Koza"
 role = "Oddílák, Hokr"
+beh = [1,3]
 +++

content/personal/karel-matousek/index.md

@@ -4,4 +4,5 @@ weight = 6
 [extra]
 name = "Karel Matoušek"
 role = "Kuchař"
+beh = [3]
 +++

content/personal/kristyna-dusova/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Kristýna Dusová"
 role = "Instruktor"
+beh = [3]
 +++

content/personal/lucka-odradovcova/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Lucka Odradovcová"
 role = "Instruktor"
+beh = [1]
 +++

content/personal/lukas-bruzek/index.md

@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Lukáš Brůžek"
 role = "Oddílák"
+beh = [1]
 +++

content/personal/martin-kocourek/index.md

@@ -4,4 +4,5 @@ weight = 5
 [extra]
 name = "Martin Kocourek"
 role = "Technik"
+beh = [1]
 +++

content/personal/martina-babakova/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Martina Babáková"
 role = "Instruktor"
+beh = [3]
 +++

content/personal/micha-michalova/index.md

@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Míša Michalová"
 role = "Oddílák"
+beh = [3]
 +++

content/personal/michal-roucka/index.md

@@ -4,4 +4,5 @@ weight = 1
 [extra]
 name = "Michal Roučka"
 role = "Hlavní vedoucí"
+beh = [1]
 +++

content/personal/mirka-liskova/index.md

@@ -4,4 +4,5 @@ weight = 4
 [extra]
 name = "Mirka Lišková"
 role = "Zdravotník"
+beh = [1]
 +++

content/personal/ondra-slavik/index.md

@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Ondra Slavík"
 role = "Oddílák"
+beh = [3]
 +++

content/personal/pavel-kacirek/index.md

@@ -4,4 +4,5 @@ weight = 5
 [extra]
 name = "Pavel Kačírek"
 role = "Technik"
+beh = [1]
 +++

content/personal/pavel-sebera/index.md

@@ -4,4 +4,5 @@ weight = 5
 [extra]
 name = "Pavel Sebera"
 role = "Technik"
+beh = [3]
 +++

content/personal/petra-skotnicova/index.md

@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Petra Skotnicová"
 role = "Oddílák"
+beh = [1]
 +++

content/personal/sarka-seberova/index.md

@@ -4,4 +4,5 @@ weight = 4
 [extra]
 name = "Šárka Seberová"
 role = "Zdravotník"
+beh = [3]
 +++

content/personal/standa-skotnica/index.md

@@ -4,4 +4,5 @@ weight = 7
 [extra]
 name = "Standa Skotnica"
 role = "Hospodář"
+beh = [1]
 +++

content/personal/terka-janova/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Terka Jánová"
 role = "Instruktor"
+beh = [1]
 +++

content/personal/tomas-bruzek/index.md

@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Tomáš Brůžek"
 role = "Instruktor"
+beh = [1,3]
 +++

content/personal/tomas-zdobnicky/index.md

@@ -4,4 +4,5 @@ weight = 0
 [extra]
 name = "Tomáš Zdobnický"
 role = "Předseda"
+beh = [1,3]
 +++

content/personal/venca-trestik/index.md

@@ -4,4 +4,5 @@ weight = 6
 [extra]
 name = "Venca Třeštík"
 role = "Kuchař"
+beh = [1]
 +++

content/personal/verca-pekarova/index.md

@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Verča Pekařová"
 role = "Oddílák"
+beh = [3]
 +++

content/personal/verca-rouckova/index.md

@@ -4,4 +4,5 @@ weight = 1
 [extra]
 name = "Verča Roučková"
 role = "Hlavní vedoucí"
+beh = [1,3]
 +++

sass/_personnel.scss

@@ -1,17 +1,43 @@
 .personnel {
 
+	.filters {
+		display: flex;
+		justify-content: center;
+		gap: 1em;
+		margin-bottom: 5em;
+
+		.button {
+			padding: .5em 1.5em;
+			font-weight: bold;
+			border: 2px solid #ccc;
+			border-radius: .5em;
+			cursor: pointer;
+			box-shadow: 0 0 10px rgba(0,0,0,0.1);
+			transition: border-color .2s ease-out;
+
+			&:hover, &.active {
+				border-color: #333;
+			}
+		}
+	}
+
 	.person {
 		text-align: center;
+		transition: opacity .5s ease-out;
 
 		img {
 			border-radius: 1em;
 			margin-bottom: 1em;
-			filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
+			box-shadow: 0 0 15px rgba(0,0,0,0.3);
 		}
 
 		.name {
 			font-weight: bold;
 		}
+
+		&.hidden {
+			opacity: .3;
+		}
 	}
 }
 

static/js/personnel.js

@@ -0,0 +1,17 @@
+let people = Array.from(document.getElementsByClassName("person"));
+let buttons = Array.from(document.getElementsByClassName("button"));
+
+buttons.forEach(button => {
+	button.addEventListener("click", function() {
+		buttons.forEach(button => {
+			button.classList.remove("active");
+		});
+		button.classList.add("active");
+		people.forEach(person => {
+			person.classList.remove("hidden");
+			if (button.dataset.value != 0 && !person.dataset.beh.includes(button.dataset.value)) {
+				person.classList.add("hidden");
+			}
+		});
+	});
+});

templates/base.html

@@ -25,6 +25,8 @@
 		<p>&copy; {{ now() | date(format="%Y") }} {{ config.title }}</p>
 	</footer>
 
+	{% block script %}
+	{% endblock %}
 </body>
 </html>
 

templates/macros.html

@@ -10,6 +10,7 @@
 
 {% macro personnel() %}
 	{% for person in section.pages %}
+
 		{%- set_global image = "/static/img/placeholder.jpg" %}
 		{%- for asset in person.assets %}
 			{%- if asset is matching(person.slug~"[.](jpg|png)$") %}
@@ -18,10 +19,19 @@
 			{% endif %}
 		{%- endfor %}
 		{%- set image = resize_image(path=image, width=300, height=300, op="fill") %}
-		<div class="person">
+
+		{% set_global dataset = "" %}
+		{% if person.extra.beh %}
+			{% for beh in person.extra.beh %}
+				{% set_global dataset = dataset ~ beh %}
+			{% endfor %}
+		{% endif %}
+
+		<div class="person" data-beh="{{ dataset }}">
 			<img src="{{ image.url }}" alt={{ person.extra.name }}>
 			<div class="name">{{ person.extra.name }}</div>
 			<div class="role">{{ person.extra.role }}</div>
 		</div>
+
 	{% endfor %}
 {% endmacro %}

templates/personnel.html

@@ -5,8 +5,17 @@
 		{{ section.content | safe }}
 	</section>
 	<section class="wrap personnel">
+		<div class="filters">
+			<div id="all" class="button active" data-value="0">Všichni</div>
+			<div id="1" class="button" data-value="1">1. Běh</div>
+			<div id="3" class="button" data-value="3">3. Běh</div>
+		</div>
 		<div class="grid grid-5 gap-3">
 			{{ macros::personnel() }}
 		</div>
 	</section>
 {% endblock %}
+
+{% block script %}
+	<script src="{{ get_url(path="/js/personnel.js") }}"></script>
+{% endblock %}