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

Add a bit more padding in search box #93382

Merged
merged 1 commit into from
Feb 16, 2022

Conversation

GuillaumeGomez
Copy link
Member

As asked in #93113 (comment), here is a bit more padding.

You can check it here.

r? @camelid

@GuillaumeGomez GuillaumeGomez added the A-rustdoc-ui Area: Rustdoc UI (generated HTML) label Jan 27, 2022
@rust-highfive
Copy link
Collaborator

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez,@Folyd

@rustbot rustbot added the T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. label Jan 27, 2022
@rust-highfive rust-highfive added the S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. label Jan 27, 2022
@rust-log-analyzer

This comment has been minimized.

@GuillaumeGomez
Copy link
Member Author

Weird failure...

@notriddle
Copy link
Contributor

notriddle commented Jan 27, 2022

#93384

@camelid
Copy link
Member

camelid commented Jan 27, 2022

Hmm, this looks almost the same as before. The issue is more the vertical padding, not the horizontal, which I think might be hard to fix without creating inconsistencies with the buttons.

Perhaps if we made the buttons a bit larger, we could further increase the vertical padding of the search box?

@camelid camelid changed the title Add a bit more padding on search padding Add a bit more padding in search box Jan 27, 2022
@GuillaumeGomez
Copy link
Member Author

We can but then maybe they'll become bigger again compared to the title. What do you think @jsha?

@jsha
Copy link
Contributor

jsha commented Jan 28, 2022

I looked around for some examples to compare. eBay has 9px/9px top/bottom margins. Amazon has 7px/10px. I couldn't figure out Google's due to weird CSS. Readthedocs has 6px/6px, but also has font-size: 80%, so in relative terms to a 16px font size, that's more like 7.5px compared to the others. pkg.go.dev has 6.5px/6.5 px, but with the default 16px font size.

In rustdoc we currently have 5px/5px, with a font-size of 17px (1.0625rem). So our padding-to-text ratio is indeed a bit lower than those other sites. On stable our margins were 10px/10px, slightly on the high end of the compared sites.

I think we should definitely reduce the font size to 16px (1rem) for consistency with the rest of the page. If we do that, the margins will be larger in relative terms. We should then try 7px/7px margins, or even 8px/8px. That would give us a total height of 30px or 32px, both smaller than our <h1>, which is currently 34px tall.

Also worth pointing out that when #59840 mentioned search was "visually larger than the main heaing," that included the line under the search bar plus the padding to reach that line. We've since removed that, which improves the situation.

@jsha
Copy link
Contributor

jsha commented Jan 28, 2022

7px padding, 1rem font size:

image

5px padding, 1.0625rem font size:

image

8px padding, 1rem font-size:

image

Note: It's a little hard to compare these directly because GitHub scales them. But I like the 7px version and I think it does a decent job alleviating the cramped feeling.

Note: You have to adjust the height constraint on search-container to allow the padding to actually expand the <input> element. And you'll need to tweak the button sizes too.

Thanks for working on this!

@camelid
Copy link
Member

camelid commented Jan 28, 2022

By "margin", I assume you mean "padding"?

@camelid camelid added S-waiting-on-author Status: This is awaiting some action (such as code changes or more information) from the author. and removed S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. labels Jan 28, 2022
@GuillaumeGomez
Copy link
Member Author

So I reduced the font size and set the padding to 8px (and, I think he was talking about padding haha). I updated the published docs and here's a new screenshot:

Screenshot from 2022-01-29 10-24-33

@camelid
Copy link
Member

camelid commented Jan 29, 2022

Hmm, I guess that's better. My only concern is that searching is really common, so making the font too small could make it more difficult.

@GuillaumeGomez
Copy link
Member Author

The change in font size is quite small, not sure if anyone will notice the difference unless they look at the CSS.

1 similar comment
@GuillaumeGomez
Copy link
Member Author

The change in font size is quite small, not sure if anyone will notice the difference unless they look at the CSS.

@jsha
Copy link
Contributor

jsha commented Jan 31, 2022

I think this looks good. And yeah, the change in font size is not "make it small," it's "make it the same size as the body text." It doesn't seem like there's a good reason for it to be just slightly bigger than body text.

@GuillaumeGomez
Copy link
Member Author

Is there anything else for me to do in here?

@bors
Copy link
Contributor

bors commented Feb 9, 2022

☔ The latest upstream changes (presumably #93795) made this pull request unmergeable. Please resolve the merge conflicts.

@GuillaumeGomez
Copy link
Member Author

Rebased!

@GuillaumeGomez GuillaumeGomez added S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. and removed S-waiting-on-author Status: This is awaiting some action (such as code changes or more information) from the author. labels Feb 12, 2022
@GuillaumeGomez
Copy link
Member Author

ping @jsha :)

@camelid camelid assigned jsha and unassigned camelid Feb 15, 2022
@jsha
Copy link
Contributor

jsha commented Feb 16, 2022

@bors r+ rollup

@bors
Copy link
Contributor

bors commented Feb 16, 2022

📌 Commit b12d926 has been approved by jsha

@bors bors added S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. and removed S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. labels Feb 16, 2022
bors added a commit to rust-lang-ci/rust that referenced this pull request Feb 16, 2022
…askrgr

Rollup of 10 pull requests

Successful merges:

 - rust-lang#92366 (Resolve concern of `derive_default_enum`)
 - rust-lang#93382 (Add a bit more padding in search box)
 - rust-lang#93962 (Make [u8]::cmp implementation branchless)
 - rust-lang#94015 (rustdoc --check option documentation)
 - rust-lang#94017 (Clarify confusing UB statement in MIR)
 - rust-lang#94020 (Support pretty printing of invalid constants)
 - rust-lang#94027 (Update browser UI test version)
 - rust-lang#94037 (Fix inconsistent symbol mangling with -Zverbose)
 - rust-lang#94045 (Update books)
 - rust-lang#94054 (:arrow_up: rust-analyzer)

Failed merges:

r? `@ghost`
`@rustbot` modify labels: rollup
@bors bors merged commit 01f0da2 into rust-lang:master Feb 16, 2022
@rustbot rustbot added this to the 1.60.0 milestone Feb 16, 2022
@GuillaumeGomez GuillaumeGomez deleted the search-input-padding branch February 16, 2022 22:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-rustdoc-ui Area: Rustdoc UI (generated HTML) S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants