Redesign/DRY 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

static/css/components/buttonSearch.less

openlibrary/templates/search/search_bar.html

static/css/components/buttonSearch.less

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!

cdrini

This looks phenomenol @0simoo ! I tested on latest Chrome, FF, and iOS/iPad and it looks perfect! A few small code fixes, but I think I can knock those out real quick...

openlibrary/templates/search/searchbox.html

openlibrary/templates/work_search.html

static/css/components/searchbox.less

cdrini · 2024-06-11T20:17:32Z

static/css/components/buttonsAndLinks.less

@@ -113,3 +113,4 @@ button {
 @import "components/buttonLink.less";
 @import "components/buttonGhost.less";
 @import "components/buttonBtn.less";
+@import "components/searchbox.less";


This doesn't make sense in buttonsAndLinks anymore; let's put it in page-user, that's the css entry file used by the search page.

static/css/components/searchbox.less

cdrini · 2024-06-11T20:34:33Z

Ok I applied some of the quicker ones I could via GitHub; two last comments and then good to merge!

Co-authored-by: Drini Cami <cdrini@gmail.com>

0simoo · 2024-06-12T01:09:16Z

I've made the changes @cdrini
Let me know if there are any issues!

cdrini

Ok this looks good to me! I'll deploy on testing for one last look then merging up! Great work @0simoo

static/css/components/searchbox.less

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

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

cdrini approved these changes Jun 11, 2024

View reviewed changes

Apply suggestions from code review

1423eb1

0simoo and others added 3 commits June 11, 2024 20:40

Update static/css/components/searchbox.less

ed9feba

Co-authored-by: Drini Cami <cdrini@gmail.com>

move import of searchbox.less to page-user from buttonsAndLinks

db6dd7d

nesting searchbox style rules and also added a comment to page-user.less

22b39ae

cdrini approved these changes Jun 12, 2024

View reviewed changes

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

Feedback from code review

9e01e82

cdrini reviewed Jun 12, 2024

View reviewed changes

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

Update static/css/components/searchbox.less

459cf00

cdrini merged commit 097f52e into internetarchive:master Jun 12, 2024
5 checks passed

cdrini changed the title ~~Redesign search box on search pages~~ Redesign/DRY search box on search pages Jun 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign/DRY search box on search pages #9146

Redesign/DRY 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

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

cdrini left a comment

cdrini Jun 11, 2024

cdrini commented Jun 11, 2024

0simoo commented Jun 12, 2024

cdrini left a comment

Redesign/DRY search box on search pages #9146

Redesign/DRY 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

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

cdrini left a comment

Choose a reason for hiding this comment

cdrini Jun 11, 2024

Choose a reason for hiding this comment

cdrini commented Jun 11, 2024

0simoo commented Jun 12, 2024

cdrini left a comment

Choose a reason for hiding this comment

0simoo commented Apr 24, 2024 •

edited

RayBB left a comment •

edited

RayBB commented May 22, 2024 •

edited