Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search bar display on smaller viewports looks bad #1239

Closed
cbeer opened this issue Oct 27, 2022 · 2 comments · Fixed by #1297
Closed

Search bar display on smaller viewports looks bad #1239

cbeer opened this issue Oct 27, 2022 · 2 comments · Fixed by #1297
Assignees

Comments

@cbeer
Copy link
Member

cbeer commented Oct 27, 2022

Screen Shot 2022-10-27 at 10 09 39

@ggeisler
Copy link
Contributor

I think at at md and wider breakpoints we're okay:

Screen Shot 2022-10-31 at 11 28 52 AM


At below md, I suggest we put the two distinct groups of elements on their own line:

Screen Shot 2022-10-31 at 11 25 17 AM

My rough, possibly incorrect, reading of the relevant code is that we should be putting the new, ArcLight-specfic elements (the "Search" and "this collection | all collections" elements) in their own input-group instead of just inserting them into Blacklight's existing input-group. And then we display both input-groups on a single line at md and above, but on their own line at below md.

Also, to better handle the really narrow viewports, maybe we should drop the "Search" text part of the button label at below sm viewport (or even at below md just to keep things simple, although with the two button groups in their own row I don't think the text label is a problem until we get into the xs viewport range):

Screen Shot 2022-10-31 at 11 45 12 AM

Note that in the mockup above I also increased the size of the search icon. It looks like it is currently set to be 1rem and we really should make it more like 24px (or 1.5rem).

@marlo-longley
Copy link
Contributor

Blocked by Blacklight PRs?
Team should pair on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants