Skip to content

Smarter Resources - Search bar!#660

Merged
lemonsaurus merged 23 commits into
mainfrom
659/lemon/resource_search_bar
Feb 13, 2022
Merged

Smarter Resources - Search bar!#660
lemonsaurus merged 23 commits into
mainfrom
659/lemon/resource_search_bar

Conversation

@lemonsaurus
Copy link
Copy Markdown
Contributor

@lemonsaurus lemonsaurus commented Feb 13, 2022 •
edited
Loading

Implements a search feature on the resources page
search final

You can test it on the deploy preview!
https://deploy-preview-660--pydis-static.netlify.app/

Features

  • Uses fuzzysort to do fuzzy matching against resource titles.
  • Fully reactive! ✨ Every keypress triggers a search.
  • Updates the URL to match the search query, and loads the search on page load when a ?search= parameter is provided.
    live updating query
  • Will match even if the user has a typo in the search query.
    image
  • Adds a tag to the filter tag pool whenever a search is live.
    search tag

Kaizen

  • Fixes redirects to /pages/resources/communities, these are used in the !guild tag on the bot.
  • Ensures that resource cards are always fullwidth. Previously they would only fill the width needed for the longest description of the visible resource cards.
  • Update the URL for Two Scoops of Django. The previous one was broken.

@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 13, 2022 •
edited
Loading

✔️ Deploy Preview for pydis-static ready!

🔨 Explore the source changes: d612953

🔍 Inspect the deploy log: https://app.netlify.com/sites/pydis-static/deploys/62095818a1a38e0008893a3a

😎 Browse the preview: https://deploy-preview-660--pydis-static.netlify.app

@coveralls
Copy link
Copy Markdown

coveralls commented Feb 13, 2022 •
edited
Loading

Coverage Status

Coverage remained the same at 100.0% when pulling d612953 on 659/lemon/resource_search_bar into db67e67 on main.

@lemonsaurus lemonsaurus linked an issue Feb 13, 2022 that may be closed by this pull request
Smarter Resources: Search bar #659
Closed
@lemonsaurus
Search the resource description too.
1ea2cbb
@lemonsaurus
Fix duck pond not showing for search results of 0.
b4fc433
@lemonsaurus
Make the remove all tags affect search, too.
0b8da4d
@lemonsaurus
Fix search tag width bug on firefox.
bfe6f21 
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.
@lemonsaurus
Edge case: Fix extremely long search overflow.
2ea2596
@jchristgit jchristgit self-requested a review February 13, 2022 15:16
jchristgit
jchristgit reviewed Feb 13, 2022
View reviewed changes
Comment thread pydis_site/templates/resources/resource_box.html Outdated
jchristgit
jchristgit reviewed Feb 13, 2022
View reviewed changes
Comment thread pydis_site/templates/resources/resources.html Outdated
jchristgit
jchristgit approved these changes Feb 13, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@jchristgit jchristgit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great lemon. Stunning work on the Smarter Resources. I don't understand anything about JavaScript or CSS or HTML for that matter, but I think this is great.

whispersofthedawn
whispersofthedawn approved these changes Feb 13, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@whispersofthedawn whispersofthedawn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks wonderful! I don't know much about Django, but from what I do know about JS, that all looks great. The search experience is flawless, too.

MarkKoz
MarkKoz requested changes Feb 13, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@MarkKoz MarkKoz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The close button doesn't look great when the bar is really wide
bild

I think this is actually a problem with the bar's width, as it shouldn't get that wide in the first place. It seems to try to match the width of the line below it, but when a 3rd line gets added, it gets too wide:

bild

bild

Comment thread pydis_site/apps/resources/resources/python_discord_videos.yaml Outdated
Comment thread pydis_site/templates/resources/resources.html
lemonsaurus and others added 2 commits February 13, 2022 19:50
@lemonsaurus @MarkKoz
Titlecase the PyDis YouTube resource
0d9faf4 
Co-authored-by: Mark <1515135+MarkKoz@users.noreply.github.com>
@lemonsaurus
Fix bug with search tag taking up too much width.
b30e943
MarkKoz
MarkKoz approved these changes Feb 13, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@MarkKoz MarkKoz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've gone over the code and played around with it on netlify. Looks good!

@lemonsaurus lemonsaurus merged commit 4196696 into main Feb 13, 2022
@lemonsaurus lemonsaurus deleted the 659/lemon/resource_search_bar branch February 13, 2022 19:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@MarkKoz MarkKoz MarkKoz approved these changes

@jchristgit jchristgit jchristgit approved these changes

@whispersofthedawn whispersofthedawn whispersofthedawn approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Smarter Resources: Search bar

5 participants

@lemonsaurus @coveralls @MarkKoz @jchristgit @whispersofthedawn