From dbc758412ba5e0c54046e28ed9f3afb0cc4d9cdc Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sat, 12 Feb 2022 17:38:01 +0100 Subject: Add a search bar to the top of the filter sidebar. --- pydis_site/static/css/resources/resources.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index b8456e38..f46803e2 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -73,6 +73,11 @@ display: block; margin-right: 0.25em !important; } +/* Style the search bar */ +#resource-search { + margin: 0.25em 0.25em 0 0.25em; +} + /* Center the 404 div */ .no-resources-found { display: none; -- cgit v1.2.3 From 6addd63c2f5ea34382d3561073945a9ae6f2ea12 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 13 Feb 2022 13:18:48 +0100 Subject: Add a filter tag when searching. --- pydis_site/static/css/resources/resources.css | 8 ++++++++ pydis_site/static/js/resources/resources.js | 17 +++++++++++++++-- pydis_site/templates/resources/resources.html | 10 ++++++++-- 3 files changed, 31 insertions(+), 4 deletions(-) (limited to 'pydis_site/static/css') 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 @@
{# A filter tag for when there are no filters active #} - - + + No filters selected + {# A filter tag for search queries #} + + + Search: ... + + {% for filter_name, filter_data in filters.items %} {% for filter_item in filter_data.filters %} {% if filter_name == "Difficulty" %} -- cgit v1.2.3 From 836a288d482f765a38f2a60e59116e0036894840 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 13 Feb 2022 13:32:37 +0100 Subject: Make the search tag look more like normal filters. --- pydis_site/static/css/resources/resources.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 6f97422b..b9d3c4a5 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -94,10 +94,14 @@ display: block; /* By default, we hide the search tag. We'll add it only when there's a search happening. */ .tag.search-query { display: none; + max-width: fit-content; } .tag.search-query .inner { padding: 0; } +.tag.search-query i { + margin: 0 !important; +} /* Disable clicking on the checkbox itself. */ /* Instead, we want to let the anchor tag handle clicks. */ @@ -194,7 +198,8 @@ button.delete.is-info::after { /* Give outlines to active tags */ span.filter-box-tag, -span.resource-tag.active { +span.resource-tag.active, +.tag.search-query { outline-width: 1px; outline-style: solid; } -- cgit v1.2.3 From bfe6f21f3efe67c32647cbbe818cf98850b26930 Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 13 Feb 2022 15:24:38 +0100 Subject: Fix search tag width bug on firefox. Without a min-width, the tag would not extend to fit the full size of the contents on Firefox. It seemed to work just fine on Chrome, though. The fix is simple - just enforce a min-width equal to fit-content. --- pydis_site/static/css/resources/resources.css | 1 + 1 file changed, 1 insertion(+) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index b9d3c4a5..e33ffa22 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -95,6 +95,7 @@ display: block; .tag.search-query { display: none; max-width: fit-content; + min-width: fit-content; } .tag.search-query .inner { padding: 0; -- cgit v1.2.3 From 2ea2596a625bf27cbbaa13ed0135eba82bacb34c Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 13 Feb 2022 16:08:50 +0100 Subject: Edge case: Fix extremely long search overflow. --- pydis_site/static/css/resources/resources.css | 18 ++++++++++++++++++ pydis_site/templates/resources/resources.html | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index e33ffa22..36fa51dc 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -98,10 +98,25 @@ display: block; min-width: fit-content; } .tag.search-query .inner { + display: inline-block; padding: 0; + max-width: 17.5rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 2em; } .tag.search-query i { margin: 0 !important; + display: inline-block; + line-height: 2em; + float: left; + padding-right: 1em; +} + +/* Don't allow the tag pool to exceed its parent containers width. */ +#tag-pool { + max-width: 100%; } /* Disable clicking on the checkbox itself. */ @@ -264,6 +279,9 @@ span.resource-tag.active.has-background-info-light { padding-top: 4px; padding-bottom: 4px; } + .tag.search-query .inner { + max-width: 16.2rem; + } } /* Constrain the width of the filterbox */ diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index 19750612..201caf85 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -42,7 +42,7 @@ {# Filter box tags #}
-
+
{# A filter tag for when there are no filters active #} -- cgit v1.2.3 From ad4897c2c3df493bceea6c231cbe3733148db1dc Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 13 Feb 2022 16:50:51 +0100 Subject: Edge case: Fix a bug with overflow on Chrome. --- pydis_site/static/css/resources/resources.css | 1 - 1 file changed, 1 deletion(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 36fa51dc..79e153d9 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -94,7 +94,6 @@ display: block; /* By default, we hide the search tag. We'll add it only when there's a search happening. */ .tag.search-query { display: none; - max-width: fit-content; min-width: fit-content; } .tag.search-query .inner { -- cgit v1.2.3 From b30e94372956b616dc15c038fca6f2164872be5b Mon Sep 17 00:00:00 2001 From: Leon Sandøy Date: Sun, 13 Feb 2022 19:59:21 +0100 Subject: Fix bug with search tag taking up too much width. --- pydis_site/static/css/resources/resources.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css index 79e153d9..96d06111 100644 --- a/pydis_site/static/css/resources/resources.css +++ b/pydis_site/static/css/resources/resources.css @@ -95,11 +95,13 @@ display: block; .tag.search-query { display: none; min-width: fit-content; + max-width: fit-content; + padding-right: 2em; } .tag.search-query .inner { display: inline-block; padding: 0; - max-width: 17.5rem; + max-width: 16.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -157,7 +159,6 @@ i.is-primary { color: #7289DA; } - /* Set default display to inline-flex, for centering. */ span.filter-box-tag { display: none; -- cgit v1.2.3 From fc982b4bfad66ae9e5adfdb2ec42e142920dff49 Mon Sep 17 00:00:00 2001 From: minalike Date: Tue, 26 Apr 2022 23:45:37 -0400 Subject: Force line break at arbritrary points for really long words --- pydis_site/static/css/staff/logs.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/staff/logs.css b/pydis_site/static/css/staff/logs.css index acf4f1f7..56a12380 100644 --- a/pydis_site/static/css/staff/logs.css +++ b/pydis_site/static/css/staff/logs.css @@ -25,7 +25,10 @@ main.site-content { .discord-message:first-child { border-top: 1px; +} +.discord-message-content { + overflow-wrap: break-word; } .discord-message-header { -- cgit v1.2.3