Show a "No filters selected" indicator.

3 files changed, 18 insertions, 6 deletions

diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index 34587c81..718e1e88 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -18,10 +18,12 @@ function addFilter(filterName, filterItem) {
 
     // Show a corresponding filter box tag
     $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show();
-    $(".filter-tags").css("padding-bottom", "0.5em");
 
     // Make corresponding resource tags active
     $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active");
+
+    // Hide the "No filters selected" tag.
+    $(".no-tags-selected.tag").hide();
 }
 
 function removeFilter(filterName, filterItem) {
@@ -37,6 +39,11 @@ function removeFilter(filterName, filterItem) {
 
     // Make corresponding resource tags inactive
     $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active");
+
+    // Show "No filters selected" tag, if there are no filters active
+    if (noFilters()) {
+        $(".no-tags-selected.tag").show();
+    }
 }
 
 /* Check if there are no filters */
@@ -107,7 +114,6 @@ function updateUI() {
     if (noFilters()) {
         resources.show();
         filterTags.hide();
-        $(".filter-tags").css("padding-bottom", "0");
         return;
     }
 
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index b06ffd31..88ddee80 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -18,16 +18,16 @@
         {% if 'title_url' in resource %}
             <span class="icon is-size-4 is-medium" style="margin: 5px;">
                 <a href="{{ resource.title_url }}">
-                    <i class="fas fa-link is-size-3 resource-icon is-hoverable is-primary"></i>
+                    <i class="fas fa-external-link-alt fa-fw is-size-3 resource-icon is-hoverable is-primary"></i>
                 </a>
             </span>
         {% endif %}
 
-        {#Add all additional icon #}
+        {# Add all additional icon #}
         {% for icon in resource.urls %}
             <span class="icon is-size-4 is-medium" style="margin: 5px;">
                 <a href="{{ icon.url }}">
-                    <i class="{{ icon.icon|as_icon }} is-size-3 resource-icon is-hoverable is-{{ icon.color }}"></i>
+                    <i class="{{ icon.icon|as_icon }} fa-fw is-size-3 resource-icon is-hoverable is-{{ icon.color }}"></i>
                 </a>
             </span>
         {% endfor %}
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 53feb255..c3881092 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -27,6 +27,12 @@
                         {# Filter box tags #}
                         <div class="card filter-tags">
                             <div class="is-flex ml-auto is-flex-wrap-wrap">
+                                {# A filter tag for when there are no filters active #}
+                                <span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
+                                        <i class="fas fa-ban mr-1"></i>
+                                        No filters selected
+                                </span>
+
                                 {% for filter_name, filter_data in filters.items %}
                                     {% for filter_item in filter_data.filters %}
                                         {% if filter_name == "Difficulty" %}
@@ -125,7 +131,7 @@
             <div class="column is-two-thirds">
                 {# Message to display when there are no hits #}
                 <div class="no-resources-found">
-                    <h2 class="title is-3 has-text-centered pt-0 pb-6 no-resources-found">No matching resources found!</h2>
+                    <h2 class="title is-3 has-text-centered pt-0 pb-6">No matching resources found!</h2>
                     <img src="{% static "images/resources/duck_pond_404.png" %}" width="650px">
                 </div>