pedf
/
fakulta-online
Archived
1
0
Fork 0

Filtr nástrojů

master
Emil Miler 4 years ago
parent a6e079f240
commit a43e4522d9

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

@ -157,6 +157,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 { &.software {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -166,6 +187,9 @@ main {
width: 48%; width: 48%;
box-sizing: border-box; box-sizing: border-box;
margin-top: 4em; margin-top: 4em;
display: none; // for filtering
&.show { display: block; } // when filtered
img { img {
max-height: 3em; max-height: 3em;

@ -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";
});
}

@ -63,4 +63,5 @@
<script> <script>
function togglevisible(id){document.querySelector(id).classList.toggle("visible")} function togglevisible(id){document.querySelector(id).classList.toggle("visible")}
</script> </script>
{% block customjs %}{% endblock %}
</html> </html>

@ -1,5 +1,11 @@
{% macro print_tool(program) %} {% 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 %} {% if program.extra.linkto and program.extra.directlink %}
<a href="{{ program.extra.linkto }}"> <a href="{{ program.extra.linkto }}">
{% else %} {% else %}

@ -1,6 +1,10 @@
{% extends "index.html" %} {% extends "index.html" %}
{% import "macros.html" as macros %} {% import "macros.html" as macros %}
{% block customjs %}
<script type="text/javascript" src="/js/filters.js"></script>
{% endblock %}
{% block content %} {% block content %}
<section class="meta"> <section class="meta">
<div> <div>
@ -17,6 +21,26 @@
{% set section = get_section(path="software/_index.md") %} {% set section = get_section(path="software/_index.md") %}
{% if section.pages %} {% if section.pages %}
<h3>Doporučené nástroje</h3> <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"> <section class="software">
{% for program in section.pages %} {% for program in section.pages %}
{% if program.taxonomies.categories and program.taxonomies.categories is containing(page.slug) %} {% if program.taxonomies.categories and program.taxonomies.categories is containing(page.slug) %}
@ -33,6 +57,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</section> </section>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endblock %} {% endblock %}