mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix scraped examples background gradient

Browse Source
This commit is contained in:
Guillaume Gomez 2024-09-01 23:59:46 +02:00
parent 5a85632623
commit 01d8235ae1
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/librustdoc/html/static/css/rustdoc.css
View File

@ -2282,8 +2282,13 @@ in src-script.js and main.js
.example-wrap.scraped-example .button-holder {
top: calc(var(--pre-line-height) + 4px);
}
.scraped-example:not(.expanded)::before {
/* The gradient effect needs to be moved under the title */
top: var(--pre-line-height);
}
}
/* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */
@media (min-width: 701px) {
/* Places file-link for a scraped example on top of the example to save space.
@ -2305,6 +2310,12 @@ in src-script.js and main.js
.item-table > li > div {
overflow-wrap: anywhere;
}
/* Starting this width, the "title" of scraped example will be in the code block so we can
put the background gradient at the top. */
.scraped-example:not(.expanded)::before {
top: 0;
}
}
@media print {
@ -2395,7 +2406,6 @@ in src-script.js and main.js
z-index: 1;
}
.scraped-example:not(.expanded)::before {
top: 0;
background: linear-gradient(to bottom,
var(--scrape-example-code-wrapper-background-start),
var(--scrape-example-code-wrapper-background-end));

11
tests/rustdoc-gui/scrape-examples-layout.goml
View File

@ -56,10 +56,19 @@ store-value: (offset_y, 4)
assert-position: (".scraped-example", {"y": 226})
assert-position: (".scraped-example .prev", {"y": 226 + |offset_y|})
// Gradient background should be at the top of the code block.
assert-css: (".scraped-example::before", {"top": "0px"})
assert-css: (".scraped-example::after", {"bottom": "0px"})
// Then with mobile
set-window-size: (600, 600)
store-size: (".example-wrap.scraped-example .scraped-example-title", {"height": title_height})
assert-position: (".scraped-example", {"y": 284})
assert-position: (".scraped-example .prev", {"y": 284 + |offset_y|})
assert-position: (".scraped-example .prev", {"y": 284 + |offset_y| + |title_height|})
// Gradient background should be at the top of the code block, which is now below the "title".
assert-css: (".scraped-example::before", {"top": |title_height| + "px"})
assert-css: (".scraped-example::after", {"bottom": "0px"})
define-function: (
"check_title_and_code_position",