Let the user know when there are no matches.

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>&nbsp&nbsp{{ 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 %}
+
+