feat: add world listing and world search #24
Conversation
|
This is looking great! I see lots of design decisions being made and that's ok. We'll likely re-unify any of those decisions after the PR. I've been thinking about more long term structure too, but essentially for now, just continue! |
|
Thank you for the comment, @ProbablePrime.
No problem! I am just showing what is possible and providing a different option for the search portion based on some examples of search results pages I looked at.
Page and URL structure, look and feel structure, project structure, or all of the above? |
|
Pretty much all up. I built this very quickly and generally like my strategy for micro sits of keeping things simple. The features we're adding make sense though. So I just want to do some cleanup once we have session and world viewing working. I've been looking for an excuse to use https://htmx.org/ too, and this might be that. But basically anything other than React lol :D |
| @@ -0,0 +1,9 @@ | |||
| include svg.pug | |||
There was a problem hiding this comment.
Oh heck yeah, includes! Good job!
|
Progress was made yesterday to complete the last main item. The "Featured Ribbon" was also added to the individual listing items. I will write a more detailed response after work. |
|
The PR body has been updated with the rest of the information. |
stiefeljackal
force-pushed
the
feat/world-listing
branch
from
d6596de to
46e6484
Compare
|
Rebased. |
This PR adds the following features to go.resonite.com based on #17:
Items marked as completed are in this PR.
World Listing
Currently, the look and feel of the world listing page mimics that of what you would typically see when performing a web search via a search engine. This is how the current listing looks:
Show Featured Ribbon on Listing Item
For featured worlds, the "Featured Ribbon" SVG from the press kit is used here. The SVG itself was modified to remove unnecessary tags and to add CSS styling on the SVG such as the coloring. The "Featured Ribbon" is included in the heading when the world is marked as Featured; visually hidden text ("Featured World") is also provided at the end of the world name for accessibility purposes.
World Search Box
The world search box functions the same way as the one found in Resonite. This means that you can use the "+" and "-" modifiers to include or to exclude certain tagged worlds. Searches are initiated by pressing the Enter key or by pressing the magnifying glass icon. The magnifying glass is the same SVG from the press kit; this SVG has been modified in the same matter as the Featured Ribbon one.
Paging Controls for World Browsing
A pagination component is provided at the end of the page to show the current result number and to provide the ability move forward or to move back between results. Results are currently restricted to 20, but this can be tweaked either by modifying the default max or by including a future control for the user to specify the result size. The Previous and Next buttons have a disabled state that is apparent to the user.
Other Notes
line-clamp, specifically-webkit-line-clamp, that is considered supported on all major browsers. There seems to be confusing information regarding its availability, but it is working correctly.Resolves #17