bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

Rollup merge of #99086 - GuillaumeGomez:search-result-crate-filter-dropdown, r=notriddle

Browse source 
Fix display of search result crate filter dropdown

In case a crate name is too long, the `<select>` completely overflows its parent. Another problem is that there is left margin on the `select` which break the alignment. You can see both issues here:

![Screenshot from 2022-07-09 15-31-12](https://user-images.githubusercontent.com/3050060/178108959-0eb5af19-ec60-4d34-a2fd-c27147683c78.png)

And with the fix:

![Screenshot from 2022-07-09 15-33-37](https://user-images.githubusercontent.com/3050060/178108980-71030a92-84ee-4ee5-98e3-f97d03a6fbaf.png)

cc `@jsha`
r? `@notriddle`
This commit is contained in:
Matthias Krüger 2022-07-10 11:52:15 +02:00 • committed by GitHub
commit ca51d325e8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/librustdoc/html/static/css/rustdoc.css
View file

@ -924,7 +924,6 @@ table,
#crate-search { #crate-search {
min-width: 115px; min-width: 115px;
margin-top: 5px; margin-top: 5px;
margin-left: 0.25em;
padding-left: 0.3125em; padding-left: 0.3125em;
padding-right: 23px; padding-right: 23px;
border: 1px solid; border: 1px solid;
@ -941,6 +940,8 @@ table,
background-size: 20px; background-size: 20px;
background-position: calc(100% - 1px) 56%; background-position: calc(100% - 1px) 56%;
background-image: /* AUTOREPLACE: */url("down-arrow.svg"); background-image: /* AUTOREPLACE: */url("down-arrow.svg");
max-width: 100%;
text-overflow: ellipsis;
} }
.search-container { .search-container {
margin-top: 4px; margin-top: 4px;

28
src/test/rustdoc-gui/search-result-display.goml
View file

@ -10,3 +10,31 @@ size: (600, 100)
// As counter-intuitive as it may seem, in this width, the width is "100%", which is why // As counter-intuitive as it may seem, in this width, the width is "100%", which is why
// when computed it's larger. // when computed it's larger.
assert-css: (".search-results div.desc", {"width": "570px"}) assert-css: (".search-results div.desc", {"width": "570px"})
// Check that the crate filter `<select>` is correctly handled when it goes to next line.
// To do so we need to update the length of one of its `<option>`.
size: (900, 900)
// First we check the current width and position.
assert-css: ("#crate-search", {"width": "222px"})
compare-elements-position-near: (
"#crate-search",
"#search-settings .search-results-title",
{"y": 5},
)
// Then we update the text of one of the `<option>`.
text: (
"#crate-search option",
"sdjfaksdjfaksjdbfkadsbfkjsadbfkdsbkfbsadkjfbkdsabfkadsfkjdsafa",
)
// Then we compare again.
assert-css: ("#crate-search", {"width": "640px"})
compare-elements-position-near-false: (
"#crate-search",
"#search-settings .search-results-title",
{"y": 5},
)
// And we check that the `<select>` isn't bigger than its container.
assert-css: ("#search", {"width": "640px"})