From 5afa52bc7dee683f25f437dddf338dbc6ad32eb8 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Fri, 21 May 2021 16:39:03 +0200 Subject: [PATCH 1/7] Fix search results display --- src/librustdoc/html/static/rustdoc.css | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 6d581108836..173256e979e 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -768,16 +768,29 @@ a { display: block; } -.search-results a { +.search-results > a { /* A little margin ensures the browser's outlining of focused links has room to display. */ margin-left: 2px; margin-right: 2px; display: block; } -.result-name { +.search-results > a > div { + display: flex; +} + +.search-results > a > div > div { + min-width: 50%; + max-width: 50%; width: 50%; - float: left; +} + +.result-name { + padding-right: 10px; +} + +.result-name > span { + display: inline-block; } tr.result span.primitive::after { From 221cba370c7971197750908107d6485a3ae8b1d3 Mon Sep 17 00:00:00 2001 From: Stefan Schindler Date: Fri, 21 May 2021 23:11:06 +0200 Subject: [PATCH 2/7] Implement staggered mobile layout --- src/librustdoc/html/static/rustdoc.css | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 173256e979e..358a447a5cf 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -759,6 +759,8 @@ a { .search-results.active { display: block; + /* prevent overhanging tabs from moving the first result */ + clear: both; } .search-results .desc { @@ -769,24 +771,24 @@ a { } .search-results > a { + display: block; /* A little margin ensures the browser's outlining of focused links has room to display. */ margin-left: 2px; margin-right: 2px; - display: block; + border-bottom: 1px solid #aaa3; } .search-results > a > div { display: flex; + flex-flow: row wrap; } .search-results > a > div > div { - min-width: 50%; - max-width: 50%; width: 50%; } .result-name { - padding-right: 10px; + padding-right: 1em; } .result-name > span { @@ -1746,6 +1748,17 @@ details.undocumented[open] > summary::before { .search-container > div { width: calc(100% - 32px); } + + /* Display an alternating layout on tablets and phones */ + .search-results > a { + border-bottom: 1px solid #aaa9; + } + .search-results > a > div > div { + width: 100%; + } + .search-results > a > div > div:nth-child(2) { + padding-left: 2em; + } } @media print { From d8de2b4c338471aacaf0e8a096f9a7148b146ab4 Mon Sep 17 00:00:00 2001 From: Stefan Schindler Date: Fri, 21 May 2021 23:54:49 +0200 Subject: [PATCH 3/7] Prepar to remove deep nesting --- src/librustdoc/html/static/rustdoc.css | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 358a447a5cf..d213c5cd156 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -783,15 +783,14 @@ a { flex-flow: row wrap; } -.search-results > a > div > div { +.search-results .result-name, .search-results > a > div > div:nth-child(2), .search-results .result-description { width: 50%; } - -.result-name { +.search-results .result-name { padding-right: 1em; } -.result-name > span { +.search-results .result-name > span { display: inline-block; } @@ -1753,10 +1752,10 @@ details.undocumented[open] > summary::before { .search-results > a { border-bottom: 1px solid #aaa9; } - .search-results > a > div > div { + .search-results .result-name { width: 100%; } - .search-results > a > div > div:nth-child(2) { + .search-results > a > div > div:nth-child(2), .search-results .result-description { padding-left: 2em; } } From ee7cc63e04bfdc514c32ad7840a516354545ef3f Mon Sep 17 00:00:00 2001 From: Stefan Schindler Date: Sat, 22 May 2021 09:01:33 +0000 Subject: [PATCH 4/7] Add padding to mobile layout and fix width issue on both --- src/librustdoc/html/static/rustdoc.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index d213c5cd156..35248b1024a 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -772,6 +772,7 @@ a { .search-results > a { display: block; + width: 100%; /* A little margin ensures the browser's outlining of focused links has room to display. */ margin-left: 2px; margin-right: 2px; @@ -1751,6 +1752,7 @@ details.undocumented[open] > summary::before { /* Display an alternating layout on tablets and phones */ .search-results > a { border-bottom: 1px solid #aaa9; + padding: 5px 0px; } .search-results .result-name { width: 100%; From 0415e0d88239bafd7a41875b725d92f0f314fb60 Mon Sep 17 00:00:00 2001 From: Stefan Schindler Date: Sat, 22 May 2021 09:05:17 +0000 Subject: [PATCH 5/7] Mobile description width: 100% --- src/librustdoc/html/static/rustdoc.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 35248b1024a..cbed08695e7 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -1754,7 +1754,7 @@ details.undocumented[open] > summary::before { border-bottom: 1px solid #aaa9; padding: 5px 0px; } - .search-results .result-name { + .search-results .result-name, .search-results > a > div > div:nth-child(2), .search-results .result-description { width: 100%; } .search-results > a > div > div:nth-child(2), .search-results .result-description { From c2bd786734c2b94e9cbe332a11caadae122ebd99 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sat, 22 May 2021 16:05:20 +0200 Subject: [PATCH 6/7] Set desc class on the div instead of the span to simplify CSS --- src/librustdoc/html/static/rustdoc.css | 8 ++++---- src/librustdoc/html/static/search.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index cbed08695e7..fb410044781 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -763,7 +763,7 @@ a { clear: both; } -.search-results .desc { +.search-results .desc > span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -784,7 +784,7 @@ a { flex-flow: row wrap; } -.search-results .result-name, .search-results > a > div > div:nth-child(2), .search-results .result-description { +.search-results .result-name, .search-results div.desc, .search-results .result-description { width: 50%; } .search-results .result-name { @@ -1754,10 +1754,10 @@ details.undocumented[open] > summary::before { border-bottom: 1px solid #aaa9; padding: 5px 0px; } - .search-results .result-name, .search-results > a > div > div:nth-child(2), .search-results .result-description { + .search-results .result-name, .search-results div.desc, .search-results .result-description { width: 100%; } - .search-results > a > div > div:nth-child(2), .search-results .result-description { + .search-results div.desc, .search-results .result-description { padding-left: 2em; } } diff --git a/src/librustdoc/html/static/search.js b/src/librustdoc/html/static/search.js index 01cfffc5429..9fa6f4678c2 100644 --- a/src/librustdoc/html/static/search.js +++ b/src/librustdoc/html/static/search.js @@ -994,8 +994,8 @@ window.initSearch = function(rawSearchIndex) { ("" + item.alias + "  - see ") : "") + item.displayPath + "" + - name + "
" + - "" + item.desc + + name + "
" + + "" + item.desc + " 
"; }); output += ""; From 8968c0e48f460d042f20d79aa0ff8ef6b317f086 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sat, 22 May 2021 16:41:26 +0200 Subject: [PATCH 7/7] Add test for search result resize width --- src/test/rustdoc-gui/search-result-display.goml | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/test/rustdoc-gui/search-result-display.goml diff --git a/src/test/rustdoc-gui/search-result-display.goml b/src/test/rustdoc-gui/search-result-display.goml new file mode 100644 index 00000000000..96d15c624f1 --- /dev/null +++ b/src/test/rustdoc-gui/search-result-display.goml @@ -0,0 +1,12 @@ +goto: file://|DOC_PATH|/test_docs/index.html +size: (900, 1000) +write: (".search-input", "test") +// Waiting for the search results to appear... +wait-for: "#titles" +// The width is returned by "getComputedStyle" which returns the exact number instead of the +// CSS rule which is "50%"... +assert: (".search-results div.desc", {"width": "320px"}) +size: (600, 100) +// As counter-intuitive as it may seem, in this width, the width is "100%", which is why +// when computed it's larger. +assert: (".search-results div.desc", {"width": "570px"})