openlibrary
openlibrary copied to clipboard
internetarchive
Fix unify search buttons
Closes #9086
Feature: New frontend change to search UI. Replaced old search text input and button with new design.
Technical
The text input and the submit button html code at /openlibrary/openlibrary/templates/search/search_bar.html are on the same line to avoid adding whitespace between them.
This is what the whitespace looks like:
Testing
Changes can be seen at https://openlibrary.org/search The new design should be present for all 6 types of searches (books, authors, search inside, subjects, lists, advanced search)
Screenshot
Old search button:
New search button:
Stakeholders
@jimchamp @RayBB @mekarpeles
@0simoo please see the comment here https://github.com/internetarchive/openlibrary/issues/9086#issuecomment-2093369982
I made a few more changes (sorry for using so many commits), let me know what you think!
@0simoo are you still working on this or are your latest changes ready for review? If possible, could you resolve the merge conflict that the pr now has?
@RayBB I think I've made all of the changes except for the height issue. I've gotten all the tabs to be the same height except for the Authors search. It look like a div called contentMeta is the reason why the Authors search is a different height from everything else.
I can continue working on this if you'd like, but I've started my internship recently so my progress might be slower.
@0simoo thanks your changes are working great. Lets leave contentmeta for another issue so we can get this one merged in! I tried a quick change to it and it is a little odd so lets not hold this up for that.
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 16.20%. Comparing base (
de01ae3) to head (936186d). Report is 11 commits behind head on master.
Additional details and impacted files
@@ Coverage Diff @@
## master #9146 +/- ##
=======================================
Coverage 16.20% 16.20%
=======================================
Files 91 91
Lines 4740 4740
Branches 822 822
=======================================
Hits 768 768
Misses 3460 3460
Partials 512 512
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
Howdy! Put this up on testing. It's looking great! A few fixes:
- The height looks a little too big; let's make it 30px
- The focus state is broken; when you tab over the search box, it should it should have the browser native glow. This is important for accessiblity. E.g.
- The text doesn't appear in the input field. E.g. https://testing.openlibrary.org/search?q=hello Doesn't show "hello" in the search box.
- Mobile isn't quite working right:
The design is looking fantastic though, can't wait to start using this everywhere! Nice work!
@0simoo I'll have some time to review this in the next few days. Could you provide some screenshots of what it now looks like on desktop and mobile?
Ok I applied some of the quicker ones I could via GitHub; two last comments and then good to merge!