aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--pydis_site/static/css/resources/resources.css6
-rw-r--r--pydis_site/static/js/resources.js11
-rw-r--r--pydis_site/templates/resources/resources.html162
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 %}
+
+
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-31 15:48:55 +0000