Redesign search box on search pages #9146

0simoo · 2024-04-24T18:52:37Z

Feature: New frontend change to search UI. Replaced old search text input and button with new design.

Technical

This fix also tries to solve a visual bug where the space underneath the searchboxes were different in height (varied in height from books search, subjects search, etc.)
This is mostly fixed, except for the Authors search due to a div called contentMeta that is taking up space under the searchbox.

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:

New search button on mobile:

Stakeholders

@jimchamp @RayBB @mekarpeles

RayBB · 2024-05-03T23:21:03Z

@0simoo please see the comment here #9086 (comment)

RayBB

@0simoo
A few small comments, but the main thing is that from the comment here @mekarpeles wants you to use the magnifying glass instead of the word "search"

One you do that and add these other small comments I think we'll be good to go!

openlibrary/templates/search/advancedsearch.html

openlibrary/templates/search/authors.html

openlibrary/templates/search/search_bar.html

for more information, see https://pre-commit.ci

0simoo · 2024-05-10T00:04:46Z

I made a few more changes (sorry for using so many commits), let me know what you think!

RayBB

@0simoo good work on this one! A few comments.

Can you make it so the font size is uniform across all the pages?
Can you make the height below the search bar on each space equal (see video)
Can you make the touch target bigger (maybe even square?) for the search icon? (see pictures)
Lets make the background color white (design folks might have different opinions once they see it).

PS: once you do these I'll ping the design team for comments 👍

search.Open.Library.-.10.May.2024.mp4

Small touch target	Larger touch target

…reased touch target of search icon

RayBB · 2024-05-22T18:08:49Z

@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?

for more information, see https://pre-commit.ci

…earch

0simoo · 2024-05-22T21:23:03Z

@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.

RayBB · 2024-05-22T21:51:26Z

@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.

RayBB

Looks really good just one small change! I'm gonna mark as needing staff now so as soon as you push that fix they can check it out.

static/css/components/work.less

codecov-commenter · 2024-05-22T21:53:57Z

Codecov Report

All modified and coverable lines are covered by tests ✅

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

static/css/components/work.less

for more information, see https://pre-commit.ci

cdrini · 2024-05-23T13:47:37Z

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!

static/css/components/buttonSearch.less

openlibrary/templates/search/search_bar.html

cdrini · 2024-05-23T13:58:40Z

static/css/components/buttonSearch.less

+ max-width: 93% !important;
+}
+
+.search-btn {


This doesn't really make sense in this file ; this css file is just about the searchbox; this is kind of just a random other button :P This should be based on our exisitng cta-btn, which correctly handles things like font size, hover states etc.

See where .cta-btn is defined, and add a new one, cta-btn--search. Then to the element, add class="cta-btn cta-btn--search"

openlibrary/templates/search/search_bar.html

0simoo · 2024-05-25T17:55:00Z

I think I implemented all the changes. Let me know if there are any issues!

RayBB · 2024-05-25T19:47:02Z

@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?

0simoo · 2024-05-25T20:07:16Z

Desktop:

Mobile:

RayBB

I have a few more suggestions here that I'm going to merge in and deploy to testing and then look again so we can do another round of feedback 👍

static/css/components/work.less

static/css/components/searchbox.less

openlibrary/templates/search/searchbox.html

static/css/components/searchbox.less

RayBB

I think it looks pretty great now. Latest version is on testing.
Lets have @cdrini take another look..

Mobile:

Desktop:

RayBB · 2024-05-26T13:57:00Z

@0simoo good work on this so far!

0simoo added 5 commits April 23, 2024 16:41

Changed search buttons to combined rectangle, darker button design

8607bf5

small color adjustment to match the rest of the website

1a5ba53

created new CSS class for search buttons and text inputs

199cbc1

minor change to comment title in buttonSearch.less

7e93eef

fix linter issues

4a2b3e9

mekarpeles assigned cdrini Apr 29, 2024

Created template for new search button design

7ae992f

RayBB requested changes May 8, 2024

View reviewed changes

openlibrary/templates/search/advancedsearch.html Outdated Show resolved Hide resolved

openlibrary/templates/search/authors.html Show resolved Hide resolved

openlibrary/templates/search/search_bar.html Outdated Show resolved Hide resolved

RayBB mentioned this pull request May 8, 2024

Use new search bar template on other pages #9236

Open

0simoo and others added 4 commits May 9, 2024 19:39

new search design and changes to resolve comments

99b3fd0

resolve comment for adding blank line

4c730c0

[pre-commit.ci] auto fixes from pre-commit.com hooks

b129864

for more information, see https://pre-commit.ci

add blank line to search_bar.html to resolve comment

5ea014f

0simoo requested a review from RayBB May 9, 2024 23:55

RayBB requested changes May 10, 2024

View reviewed changes

mekarpeles added the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label May 13, 2024

for search buttons: changed background color, unified font sized, inc…

de1a708

…reased touch target of search icon

github-actions bot removed the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label May 18, 2024

RayBB added the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label May 22, 2024

Merge branch 'master' into fix-unify-search-buttons

07a8d3a

github-actions bot removed the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label May 22, 2024

pre-commit-ci bot and others added 2 commits May 22, 2024 20:49

[pre-commit.ci] auto fixes from pre-commit.com hooks

4cb5e48

for more information, see https://pre-commit.ci

fix some height issues under the search bars except for the authors s…

936186d

…earch

RayBB requested changes May 22, 2024

View reviewed changes

static/css/components/work.less Outdated Show resolved Hide resolved

RayBB added the Needs: Staff / Internal Reviewed a PR but don't have merge powers? Use this. label May 22, 2024

0simoo added 2 commits May 22, 2024 18:26

restore h6 style rule in work.less

c85f5b8

revert accidental changes in work.less

e1bc16a

RayBB requested changes May 23, 2024

View reviewed changes

static/css/components/work.less Outdated Show resolved Hide resolved

Simon Shin and others added 2 commits May 23, 2024 08:45

revert changes made in prior commit in work.less

6e73b6d

[pre-commit.ci] auto fixes from pre-commit.com hooks

0f12539

for more information, see https://pre-commit.ci

cdrini added the On testing.openlibrary.org This PR has been deployed to testing.openlibrary.org for testing label May 23, 2024

cdrini requested changes May 23, 2024

View reviewed changes

cdrini added Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] and removed Needs: Staff / Internal Reviewed a PR but don't have merge powers? Use this. labels May 23, 2024

cdrini reviewed May 23, 2024

View reviewed changes

openlibrary/templates/search/search_bar.html Outdated Show resolved Hide resolved

minor design changes and bug fixes to searchbox

cef5788

github-actions bot removed the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label May 25, 2024

RayBB requested changes May 26, 2024

View reviewed changes

RayBB added 3 commits May 26, 2024 15:40

Apply suggestions from code review

60184fc

revert work.less to master

6e3c603

fix missing >

69a59bc

RayBB approved these changes May 26, 2024

View reviewed changes

cdrini changed the title ~~Fix unify search buttons~~ Redesing search box on search pages May 27, 2024

cdrini changed the title ~~Redesing search box on search pages~~ Redesign search box on search pages May 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign search box on search pages #9146

Redesign search box on search pages #9146

0simoo commented Apr 24, 2024 •

edited

RayBB commented May 3, 2024

RayBB left a comment •

edited

0simoo commented May 10, 2024

RayBB left a comment

RayBB commented May 22, 2024

0simoo commented May 22, 2024

RayBB commented May 22, 2024 •

edited

RayBB left a comment

codecov-commenter commented May 22, 2024

cdrini commented May 23, 2024

cdrini May 23, 2024

0simoo commented May 25, 2024

RayBB commented May 25, 2024

0simoo commented May 25, 2024

RayBB left a comment

RayBB left a comment

RayBB commented May 26, 2024

Redesign search box on search pages #9146

Are you sure you want to change the base?

Redesign search box on search pages #9146

Conversation

0simoo commented Apr 24, 2024 • edited

Technical

Testing

Screenshot

Stakeholders

RayBB commented May 3, 2024

RayBB left a comment • edited

Choose a reason for hiding this comment

0simoo commented May 10, 2024

RayBB left a comment

Choose a reason for hiding this comment

RayBB commented May 22, 2024

0simoo commented May 22, 2024

RayBB commented May 22, 2024 • edited

RayBB left a comment

Choose a reason for hiding this comment

codecov-commenter commented May 22, 2024

Codecov Report

cdrini commented May 23, 2024

cdrini May 23, 2024

Choose a reason for hiding this comment

0simoo commented May 25, 2024

RayBB commented May 25, 2024

0simoo commented May 25, 2024

RayBB left a comment

Choose a reason for hiding this comment

RayBB left a comment

Choose a reason for hiding this comment

RayBB commented May 26, 2024

0simoo commented Apr 24, 2024 •

edited

RayBB left a comment •

edited

RayBB commented May 22, 2024 •

edited