Nezobrazovat outline při kliknutí na objekt

content/chci-ucit-online.md

@@ -7,6 +7,7 @@ description = "Zabezpečit kvalitní on-line výuku v době povinně naří
 indexnav = true
 mainimage = "uceni.jpg"
 softwarelist = true
+filters = true
 +++
 
 ### Jak učit online?

content/software/adobe-connect.md

@@ -55,10 +55,12 @@ Aktuální obsazenost Adobe Connect můžete sledovat na stránkách [knihovna.c
 
 ### Návody
 
-{{ youtube(id="HaynBpLQ7uM") }}
-
 Bližší informace o programu včetně návodů můžete dohledat na stránce [dl.cuni.cz/adobe-connect](https://dl.cuni.cz/adobe-connect/).
 
+{{ youtube(
+	id = "HaynBpLQ7uM"
+) }}
+
 
 {{ coordinator(
 	name = "Centrum pro podporu e-learningu"

content/software/basecamp.md

@@ -33,9 +33,10 @@ Jedná se o placený nástroj, který stojí 99 dolarů měsíčně pro cel
 
 [Oficiální návody od společnosti 37 signals](https://www.youtube.com/user/37signals), výrobce basecampu. V anglickém jazyce, nicméně výborně zpracované.
 
-Kratší, méně komplexní návod. Postačí pro základní pochopení funkcí nástroje.
-
-{{ youtube(id="Ir4blgRsak4") }}
+{{ youtube(
+	id = "Ir4blgRsak4"
+	description = "Kratší, méně komplexní návod. Postačí pro základní pochopení funkcí nástroje."
+) }}
 
 
 {{ coordinator(

content/software/coggle.md

@@ -33,13 +33,15 @@ negative = [
 
 ### Návody
 
-Oficiální návod od Coogle. Pouze v anglickém jazyce s titulky.
-
-{{ youtube(id="iL40u0uNYa8") }}
-
-Jak na Brainstorming s Coogle. V anglickém jazyce s titulky.
+{{ youtube(
+	id = "iL40u0uNYa8"
+	description = "Oficiální návod od Coogle. Pouze v anglickém jazyce s titulky."
+) }}
 
-{{ youtube(id="cmluHtiB_f0") }}
+{{ youtube(
+	id = "cmluHtiB_f0"
+	description = "Jak na Brainstorming s Coogle. V anglickém jazyce s titulky."
+) }}
 
 
 {{ coordinator(

content/software/evernote.md

@@ -32,17 +32,20 @@ negative = [
 
 ### Návody
 
-Velmi srozumitelný český návod na starší verzi Evernote, ale postačí pro seznámení se základními principy programu.
-
-{{ youtube(id="XWG2So2N7o8") }}
-
-Základní seznámení s programem v českém jazyce. Co umí, jak ho využívat.
-
-{{ youtube(id="Lu8oSmDJdMM") }}
+{{ youtube(
+	id = "XWG2So2N7o8"
+	description = "Velmi srozumitelný český návod na starší verzi Evernote, ale postačí pro seznámení se základními principy programu."
+) }}
 
-Obšírnější a velmi srozumitelný návod v anglickém jazyce. Seznámí uživatele s většinou funkcí a naučí ho pracovat s Evernote efektivněji.
+{{ youtube(
+	id = "Lu8oSmDJdMM"
+	description = "Základní seznámení s programem v českém jazyce. Co umí, jak ho využívat."
+) }}
 
-{{ youtube(id="kSz9uavfLpI") }}
+{{ youtube(
+	id = "kSz9uavfLpI"
+	description = "Obšírnější a velmi srozumitelný návod v anglickém jazyce. Seznámí uživatele s většinou funkcí a naučí ho pracovat s Evernote efektivněji."
+) }}
 
 
 {{ coordinator(

content/software/microsoft-planner.md

@@ -29,13 +29,15 @@ Jedná se o placený nástroj, který stojí 99 dolarů měsíčně pro cel
 
 ### Návody
 
-Český návod „Jak pracovat s Microsoft Plannerem“.
-
-{{ youtube(id="G2-5r5Cstck") }}
-
-Anglický návod na práci s MS Plannerem.
+{{ youtube(
+	id = "G2-5r5Cstck"
+	description = "Český návod „Jak pracovat s Microsoft Plannerem“."
+) }}
 
-{{ youtube(id="To2EHXgqcJc") }}
+{{ youtube(
+	id = "To2EHXgqcJc"
+	description = "Anglický návod na práci s MS Plannerem."
+) }}
 
 
 {{ coordinator(

content/software/onenote.md

@@ -31,17 +31,20 @@ negative = [
 
 ### Návody
 
-Velmi srozumitelný český návod. Postačí pro seznámení se základními principy programu.
-
-{{ youtube(id="upVNKqLJkYI") }}
-
-Webinář zaměřený na práci učitele a žáka s OneNote. Delší, ale velmi pěkně vedený.
-
-{{ youtube(id="5NSkDAs5dOg") }}
+{{ youtube(
+	id = "upVNKqLJkYI"
+	description = "Velmi srozumitelný český návod. Postačí pro seznámení se základními principy programu."
+) }}
 
-Obšírnější ale velmi srozumitelný návod v anglickém jazyce. Seznámí s většinou funkcí a naučí uživatele pracovat s OneNote efektivněji. Dostupný s anglickými titulky.
+{{ youtube(
+	id = "5NSkDAs5dOg"
+	description = "Webinář zaměřený na práci učitele a žáka s OneNote. Delší, ale velmi pěkně vedený."
+) }}
 
-{{ youtube(id="6E3eC2HfQJ0") }}
+{{ youtube(
+	id = "6E3eC2HfQJ0"
+	description = "Obšírnější ale velmi srozumitelný návod v anglickém jazyce. Seznámí s většinou funkcí a naučí uživatele pracovat s OneNote efektivněji. Dostupný s anglickými titulky."
+) }}
 
 
 {{ coordinator(

content/software/slack.md

@@ -32,13 +32,15 @@ negative = [
 
 ### Návody
 
-Návod v anglickém jazyce. Velmi dobře zpracované desetiminutové video.
-
-{{ youtube(id="7YUTc4Cigc8") }}
-
-Návod od neziskové organizace česko.digital, která používá Slack jako hlavní komunikační platformu. Doporučujeme se inspirovat.
+{{ youtube(
+	id = "7YUTc4Cigc8"
+	description = "Návod v anglickém jazyce. Velmi dobře zpracované desetiminutové video."
+) }}
 
-{{ youtube(id="JJldgrqxzU8") }}
+{{ youtube(
+	id = "JJldgrqxzU8"
+	description = "Návod od neziskové organizace česko.digital, která používá Slack jako hlavní komunikační platformu. Doporučujeme se inspirovat."
+) }}
 
 
 {{ coordinator(

sass/_mobile.scss

@@ -45,6 +45,11 @@ main {
 				text-align: center;
 			}
 		}
+
+		div.video iframe {
+			margin: 0 0 2em 0;
+			width: 100%;
+		}
 	}
 }
 

sass/style.scss

@@ -6,6 +6,7 @@
 $header-width: 1560px;
 $main-width: 1024px;
 
+:focus { outline: none; }
 
 body {
 	margin: 0;
@@ -157,6 +158,27 @@ main {
 			}
 		}
 
+		&.filters {
+			display: flex;
+			justify-content: center;
+			flex-wrap: wrap;
+
+			button {
+				color: #fff;
+				background-color: #d22d40;
+				border: 2px solid #fff;
+				border-radius: 1em;
+				font-weight: bold;
+				padding: .8em 1em;
+				margin: .5em;
+
+				&:hover, &.active {
+					color: #d22d40;
+					background-color: #fff;
+				}
+			}
+		}
+
 		&.software {
 			display: flex;
 			justify-content: space-between;
@@ -166,6 +188,9 @@ main {
 				width: 48%;
 				box-sizing: border-box;
 				margin-top: 4em;
+				display: none; // for filtering
+
+				&.show { display: block; } // when filtered
 
 				img {
 					max-height: 3em;
@@ -231,6 +256,18 @@ main {
 				}
 			}
 		}
+
+		div.video {
+			min-height: 15em;
+			margin: 3em 0;
+
+			iframe {
+				float: left;
+				margin: 0 2em 0 0;
+				width: 50%;
+				min-height: inherit;
+			}
+		}
 	}
 }
 

static/js/filters.js

@@ -0,0 +1,19 @@
+filterSelection("all");
+function filterSelection(c) {
+	var x = document.getElementsByClassName("program");
+	if (c == "all") c = "";
+	for (var i = 0; i < x.length; i++) {
+		x[i].classList.remove("show");
+		if (x[i].className.indexOf(c) >= 0) x[i].classList.add("show");
+	}
+}
+
+var btnContainer = document.getElementById("filters");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+	btns[i].addEventListener("click", function() {
+		var current = document.getElementsByClassName("active");
+		current[0].className = current[0].className.replace(" active", "");
+		this.className += " active";
+	});
+}

templates/index.html

@@ -20,7 +20,11 @@
 			{% if section.pages %}
 				<ul>
 				{% for page in section.pages %}
-					<li><a href="{{ page.permalink }}">{{ page.title }}</a></li>
+					{% if page.extra.linkto %}
+						<li><a href="{{ page.extra.linkto }}">{{ page.title }}</a></li>
+					{% else %}
+						<li><a href="{{ page.permalink }}">{{ page.title }}</a></li>
+					{% endif %}
 				{% endfor %}
 				</ul>
 			{% endif %}
@@ -59,4 +63,5 @@
 	<script>
 		function togglevisible(id){document.querySelector(id).classList.toggle("visible")}
 	</script>
+	{% block customjs %}{% endblock %}
 </html>

templates/macros.html

@@ -1,5 +1,11 @@
 {% macro print_tool(program) %}
-	<div class="program">
+	<div class="program
+		{% if program.taxonomies.tags %}
+			{% for tag in program.taxonomies.tags %}
+				 {{ tag | slugify }}
+			{% endfor %}
+		{% endif %}
+	">
 		{% if program.extra.linkto and program.extra.directlink %}
 			<a href="{{ program.extra.linkto }}">
 		{% else %}

templates/page.html

@@ -1,6 +1,10 @@
 {% extends "index.html" %}
 {% import "macros.html" as macros %}
 
+{% block customjs %}
+	<script type="text/javascript" src="/js/filters.js"></script>
+{% endblock %}
+
 {% block content %}
 	<section class="meta">
 		<div>
@@ -17,6 +21,26 @@
 		{% set section = get_section(path="software/_index.md") %}
 		{% if section.pages %}
 			<h3>Doporučené nástroje</h3>
+
+			{% if page.extra.filters %}
+				{% set tags = [] %}
+				{% for program in section.pages %}
+					{% if program.taxonomies.categories and program.taxonomies.categories is containing(page.slug) %}
+						{% if program.taxonomies.tags %}
+							{% set_global tags = tags | concat(with=program.taxonomies.tags) %}
+						{% endif %}
+					{% endif %}
+				{% endfor %}
+				{% set_global tags = tags | unique %}
+
+				<section class="filters" id="filters">
+					<button class="btn active" onclick="filterSelection('all')">Ukázat vše</button>
+					{% for tag in tags %}
+						<button class="btn" onclick="filterSelection('{{ tag | slugify }}')">{{ tag }}</button>
+					{% endfor %}
+				</section>
+			{% endif %}
+
 			<section class="software">
 			{% for program in section.pages %}
 				{% if program.taxonomies.categories and program.taxonomies.categories is containing(page.slug) %}
@@ -33,6 +57,7 @@
 				{% endif %}
 			{% endfor %}
 			</section>
+
 		{% endif %}
 	{% endif %}
 {% endblock %}

templates/shortcodes/youtube.html

@@ -0,0 +1,6 @@
+<div class="video">
+	<iframe src="//www.youtube.com/embed/{{ id }}" frameborder="0" allowfullscreen></iframe>
+	{% if description %}
+		<p>{{ description | safe }}</p>
+	{% endif %}
+</div>