diff options
author | 2022-01-29 12:39:21 +0100 | |
---|---|---|
committer | 2022-01-29 12:39:21 +0100 | |
commit | 72ca8758da4b80b638a83093a35a031210a8d9f2 (patch) | |
tree | 9c0f585dda0ba2a6745bc63f681d28f34dbfebfb | |
parent | Make all tags interactive. (diff) |
Let the user know when there are no matches.
-rw-r--r-- | pydis_site/static/css/resources/resources.css | 6 | ||||
-rw-r--r-- | pydis_site/static/js/resources.js | 11 | ||||
-rw-r--r-- | pydis_site/templates/resources/resources.html | 162 |
3 files changed, 91 insertions, 88 deletions
diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index c6347eab..218d9a59 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -15,6 +15,12 @@ padding:0 } +/* Hide the no resources h2 by default */ +h2.no-resources-found { + display: none; + margin-top: 1em; +} + /* Disable clicking on the checkbox itself. */ /* Instead, we want to let the anchor tag handle clicks. */ .filter-checkbox { diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js index c9ce408b..89b8ae06 100644 --- a/pydis_site/static/js/resources.js +++ b/pydis_site/static/js/resources.js @@ -112,6 +112,8 @@ function updateUI() { } // Otherwise, hide everything and then filter the resources to decide what to show. + let hasMatches = false; + console.log(hasMatches); resources.hide(); resources.filter(function() { let validation = { @@ -140,11 +142,20 @@ function updateUI() { // If validation passes, show the resource. if (Object.values(validation).every(Boolean)) { + hasMatches = true; return true; } else { return false; } }).show(); + + // If there are no matches, show the no matches message + console.log(hasMatches); + if (!hasMatches) { + $(".no-resources-found").show(); + } else { + $(".no-resources-found").hide(); + } } // Executed when the page has finished loading. diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 87c28153..b82f16e1 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -16,141 +16,127 @@ {% block content %} {% include "base/navbar.html" %} - {% if resources|length > 0 %} - <section class="section"> - <div class="columns is-centered"> - {# Filtering toolbox #} - <div class="column is-one-third"> - <div class="content is-justify-content-center"> - <nav id="resource-filtering-panel" class="panel is-primary"> - <p class="panel-heading has-text-centered" id="filter-panel-header">Filter Resources</p> + <section class="section"> + <div class="columns is-centered"> + {# Filtering toolbox #} + <div class="column is-one-third"> + <div class="content is-justify-content-center"> + <nav id="resource-filtering-panel" class="panel is-primary"> + <p class="panel-heading has-text-centered" id="filter-panel-header">Filter Resources</p> - {# Filter box tags #} - <div class="card filter-tags"> - <div class="is-flex ml-auto is-flex-wrap-wrap"> - {% for filter_name, filter_data in filters.items %} - {% for filter_item in filter_data.filters %} - {% if filter_name == "Complexity" %} - <span + {# Filter box tags #} + <div class="card filter-tags"> + <div class="is-flex ml-auto is-flex-wrap-wrap"> + {% for filter_name, filter_data in filters.items %} + {% for filter_item in filter_data.filters %} + {% if filter_name == "Complexity" %} + <span class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2" data-filter-name="{{ filter_name|as_css_class }}" data-filter-item="{{ filter_item|as_css_class }}" - > + > <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> {{ filter_item|title }} <button class="delete is-small is-info has-background-info-light"></button> </span> - {% endif %} - {% if filter_name == "Type" %} - <span + {% endif %} + {% if filter_name == "Type" %} + <span class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2" data-filter-name="{{ filter_name|as_css_class }}" data-filter-item="{{ filter_item|as_css_class }}" - > + > <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> {{ filter_item|title }} <button class="delete is-small is-success has-background-success-light"></button> </span> - {% endif %} - {% if filter_name == "Payment tiers" %} - <span + {% endif %} + {% if filter_name == "Payment tiers" %} + <span class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2" data-filter-name="{{ filter_name|as_css_class }}" data-filter-item="{{ filter_item|as_css_class }}" - > + > <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> {{ filter_item|title }} <button class="delete is-small is-danger has-background-danger-light"></button> </span> - {% endif %} - {% if filter_name == "Topics" %} - <span + {% endif %} + {% if filter_name == "Topics" %} + <span class="filter-box-tag tag is-primary is-light ml-2 mt-2" data-filter-name="{{ filter_name|as_css_class }}" data-filter-item="{{ filter_item|as_css_class }}" - > + > <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> {{ filter_item|title }} <button class="delete is-small is-primary has-background-primary-light"></button> </span> - {% endif %} - {% endfor %} + {% endif %} {% endfor %} - </div> + {% endfor %} </div> + </div> - {# Filter checkboxes #} - {% for filter_name, filter_data in filters.items %} - <div class="card"> - <button type="button" class="card-header collapsible"> + {# Filter checkboxes #} + {% for filter_name, filter_data in filters.items %} + <div class="card"> + <button type="button" class="card-header collapsible"> <span class="card-header-title subtitle is-6 my-2 ml-2"> <i class="{{ filter_data.icon }} is-primary" aria-hidden="true"></i>  {{ filter_name }} </span> - <span class="card-header-icon"> + <span class="card-header-icon"> {% if not filter_data.hidden %} <i class="far fa-window-minimize is-6 title" aria-hidden="true"></i> {% else %} <i class="fas fa-angle-down is-6 title" aria-hidden="true"></i> {% endif %} </span> - </button> + </button> - {# Checkboxes #} - {% if filter_data.hidden %} - <div class="collapsible-content"> - {% else %} - <div class="collapsible-content" style="max-height: 480px;"> - {% endif %} - <div class="card-content"> - {% for filter_item in filter_data.filters %} - <a class="panel-block filter-panel"> - <label class="checkbox"> - <input - class="filter-checkbox" - type="checkbox" - data-filter-name="{{ filter_name|as_css_class }}" - data-filter-item="{{ filter_item|as_css_class }}" - > - {{ filter_item }} - </label> - </a> - {% endfor %} - </div> - </div> - </div> + {# Checkboxes #} + {% if filter_data.hidden %} + <div class="collapsible-content"> + {% else %} + <div class="collapsible-content" style="max-height: 480px;"> + {% endif %} + <div class="card-content"> + {% for filter_item in filter_data.filters %} + <a class="panel-block filter-panel"> + <label class="checkbox"> + <input + class="filter-checkbox" + type="checkbox" + data-filter-name="{{ filter_name|as_css_class }}" + data-filter-item="{{ filter_item|as_css_class }}" + > + {{ filter_item }} + </label> + </a> {% endfor %} - </nav> - </div> + </div> + </div> + </div> + {% endfor %} + </nav> </div> + </div> - {# Actual resources #} - <div class="column is-two-thirds"> - <div class="content is-flex is-justify-content-center"> - <div> - {% for resource in resources.values %} - {% include "resources/resource_box.html" %} - {% endfor %} - - {% for subcategory in subcategories %} - <h2 id="{{ subcategory.category_info.raw_name }}"> - <a href="whatevenisthis#{{ subcategory.category_info.raw_name }}"> - {{ subcategory.category_info.name }} - </a> - </h2> - <p>{{ subcategory.category_info.description|safe }}</p> + <div class="column is-two-thirds"> + {# Message to display when there are no hits #} + <h2 class="title is-3 has-text-centered pt-0 pb-6 no-resources-found">No matching resources found!</h2> - {% for resource in subcategory.resources %} - {% with category_info=subcategory.category_info %} - {% include "resources/resource_box.html" %} - {% endwith %} - {% endfor %} - {% endfor %} - </div> + {# Resource cards #} + <div class="content is-flex is-justify-content-center"> + <div> + {% for resource in resources.values %} + {% include "resources/resource_box.html" %} + {% endfor %} </div> </div> </div> - </section> - {% else %} - <h2 class="title is-3 has-text-centered pt-0 pb-6 ">No resources matching search.</p> - {% endif %} + </div> + </section> {% endblock %} + + |