diff options
| -rw-r--r-- | pydis_site/static/css/resources/resources.css | 8 | ||||
| -rw-r--r-- | pydis_site/static/js/resources/resources.js | 17 | ||||
| -rw-r--r-- | pydis_site/templates/resources/resources.html | 10 |
3 files changed, 31 insertions, 4 deletions
diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index f46803e2..6f97422b 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -91,6 +91,14 @@ display: block; display: flex !important; } +/* By default, we hide the search tag. We'll add it only when there's a search happening. */ +.tag.search-query { + display: none; +} +.tag.search-query .inner { + padding: 0; +} + /* 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/resources.js b/pydis_site/static/js/resources/resources.js index 79c33cc7..713a7402 100644 --- a/pydis_site/static/js/resources/resources.js +++ b/pydis_site/static/js/resources/resources.js @@ -136,10 +136,19 @@ function updateURL() { function filterBySearch(resourceItems) { let searchQuery = $("#resource-search input").val(); + /* Show and update the tag if there's a search query */ + if (searchQuery) { + let tag = $(".tag.search-query"); + let tagText = $(".tag.search-query span"); + tagText.text(`Search: ${searchQuery}`); + tag.show(); + } + resourceItems.filter(function() { // Run a fuzzy search over the item. Does the search query match? let name = $(this).attr("name"); - return Boolean(fuzzysort.single(searchQuery, name, fuzzysortOptions)); + let result = fuzzysort.single(searchQuery, name, fuzzysortOptions); + return Boolean(result) && result.score > fuzzysortOptions.threshold; }).show(); } @@ -151,6 +160,7 @@ function updateUI() { let noTagsSelected = $(".no-tags-selected.tag"); let closeFiltersButton = $(".close-filters-button"); let searchQuery = $("#resource-search input").val(); + let searchTag = $(".tag.search-query"); // Update the URL to match the new filters. updateURL(); @@ -160,13 +170,15 @@ function updateUI() { // If we have a searchQuery, we need to run all resources through a search. if (searchQuery.length > 0) { resources.hide(); + noTagsSelected.hide(); filterBySearch(resources); } else { resources.show(); + noTagsSelected.show(); + $(".tag.search-query").hide(); } filterTags.hide(); - noTagsSelected.show(); closeFiltersButton.hide(); resourceTags.removeClass("active"); $(`.filter-checkbox:checked`).prop("checked", false); @@ -240,6 +252,7 @@ function updateUI() { filterBySearch(filteredResources); } else { filteredResources.show(); + searchTag.hide(); } // If there are no matches, show the no matches message diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 1f16e5ec..19750612 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -44,11 +44,17 @@ <div class="is-flex ml-auto"> <div> {# 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" %} |