diff --git a/content/chci-ucit-online.md b/content/chci-ucit-online.md index 551852f..a6797dc 100644 --- a/content/chci-ucit-online.md +++ b/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? diff --git a/sass/style.scss b/sass/style.scss index 6797ac3..22e717e 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -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 { display: flex; justify-content: space-between; @@ -166,6 +187,9 @@ main { width: 48%; box-sizing: border-box; margin-top: 4em; + display: none; // for filtering + + &.show { display: block; } // when filtered img { max-height: 3em; diff --git a/static/js/filters.js b/static/js/filters.js new file mode 100644 index 0000000..b78c2e8 --- /dev/null +++ b/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"; + }); +} diff --git a/templates/index.html b/templates/index.html index c0b84dd..edf57ee 100644 --- a/templates/index.html +++ b/templates/index.html @@ -63,4 +63,5 @@ + {% block customjs %}{% endblock %} diff --git a/templates/macros.html b/templates/macros.html index 4cbd05c..fcc8c3d 100644 --- a/templates/macros.html +++ b/templates/macros.html @@ -1,5 +1,11 @@ {% macro print_tool(program) %} -
+
{% if program.extra.linkto and program.extra.directlink %} {% else %} diff --git a/templates/page.html b/templates/page.html index 43ee733..d05d137 100644 --- a/templates/page.html +++ b/templates/page.html @@ -1,6 +1,10 @@ {% extends "index.html" %} {% import "macros.html" as macros %} +{% block customjs %} + +{% endblock %} + {% block content %}
@@ -17,6 +21,26 @@ {% set section = get_section(path="software/_index.md") %} {% if section.pages %}

Doporučené nástroje

+ + {% 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 %} + +
+ + {% for tag in tags %} + + {% endfor %} +
+ {% endif %} +
{% for program in section.pages %} {% if program.taxonomies.categories and program.taxonomies.categories is containing(page.slug) %} @@ -33,6 +57,7 @@ {% endif %} {% endfor %}
+ {% endif %} {% endif %} {% endblock %}