Merge pull request #660 from python-discord/659/lemon/resource_search_bar

Smarter Resources - Search bar!

3 files changed, 23 insertions, 8 deletions

diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index e26203e9..5ca46296 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -2,7 +2,7 @@
 {% load to_kebabcase %}
 {% load get_category_icon %}
 
-<div class="box resource-box {{ resource.css_classes }}">
+<div class="box resource-box {{ resource.css_classes }}" data-resource-name="{{ resource.name }}">
     {% if 'title_url' in resource %}
         <a href="{{ resource.title_url }}">
             {% include "resources/resource_box_header.html" %}
diff --git a/pydis_site/templates/resources/resource_box_header.html b/pydis_site/templates/resources/resource_box_header.html
index 84e1a79b..dfbdd92f 100644
--- a/pydis_site/templates/resources/resource_box_header.html
+++ b/pydis_site/templates/resources/resource_box_header.html
@@ -17,8 +17,7 @@
 <span class="is-size-4 has-text-weight-bold">
     {% if 'title_image' in resource %}
         <img src="{{ resource.title_image }}" alt="" style="height: 50px; {{ resource.title_image_style }}">
-    {% endif %}
-    {% if 'name' in resource %}
+    {% elif 'name' in resource %}
         {{ resource.name }}
     {% endif %}
 </span>
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 70fad097..101f9965 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -16,6 +16,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script defer src="{% static "js/resources/resources.js" %}"></script>
     <script defer src="{% static "js/collapsibles.js" %}"></script>
+    <script defer src="{% static "js/fuzzysort/fuzzysort.js" %}"></script>
 {% endblock %}
 
 {% block content %}
@@ -27,18 +28,33 @@
             <div class="column filtering-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>
+                        <p class="panel-heading has-text-centered" id="filter-panel-header">Filter resources</p>
+
+                        {# Search bar #}
+                        <p id="resource-search" class="control has-icons-left">
+                            <input class="input" placeholder="Search resources ">
+                            <span class="icon is-small is-left">
+                                <i class="fas fa-magnifying-glass"></i>
+                            </span>
+                        </p>
+
 
                         {# Filter box tags #}
                         <div class="card filter-tags">
                             <div class="is-flex ml-auto">
-                                <div>
+                                <div id="tag-pool">
                                     {# 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>
+                                    <span class="tag no-tags-selected is-secondary ml-2 mt-2">
+                                            <i class="fas fa-fw fa-ban mr-1"></i>
                                             No filters selected
                                     </span>
 
+                                    {# A filter tag for search queries #}
+                                    <span class="tag search-query is-secondary ml-2 mt-2">
+                                            <i class="fas fa-fw fa-magnifying-glass mr-1"></i>
+                                            <span class="tag inner">Search: ...</span>
+                                    </span>
+
                                     {% for filter_name, filter_data in filters.items %}
                                         {% for filter_item in filter_data.filters %}
                                             {% if filter_name == "Difficulty" %}
@@ -152,7 +168,7 @@
 
                 {# Resource cards #}
                 <div class="content is-flex is-justify-content-center">
-                    <div>
+                    <div class="container is-fullwidth">
                         {% for resource in resources.values %}
                             {% include "resources/resource_box.html" %}
                         {% endfor %}