Correctly handle code examples buttons position

This commit is contained in:
Guillaume Gomez 2024-09-01 23:43:27 +02:00
parent 4825fb198f
commit 5a85632623
2 changed files with 26 additions and 1 deletions

View File

@ -34,6 +34,7 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
</g></svg>'); </g></svg>');
--button-left-margin: 4px; --button-left-margin: 4px;
--button-border-radius: 2px; --button-border-radius: 2px;
--pre-line-height: 1.5rem;
} }
/* See FiraSans-LICENSE.txt for the Fira Sans license. */ /* See FiraSans-LICENSE.txt for the Fira Sans license. */
@ -365,7 +366,7 @@ code, pre, .code-header {
} }
pre { pre {
padding: 14px; padding: 14px;
line-height: 1.5; /* https://github.com/rust-lang/rust/issues/105906 */ line-height: var(--pre-line-height); /* https://github.com/rust-lang/rust/issues/105906 */
} }
pre.item-decl { pre.item-decl {
overflow-x: auto; overflow-x: auto;
@ -2278,6 +2279,9 @@ in src-script.js and main.js
/* Dirty hacky to force it to remain on the same line as the line numbers. */ /* Dirty hacky to force it to remain on the same line as the line numbers. */
width: 10px; width: 10px;
} }
.example-wrap.scraped-example .button-holder {
top: calc(var(--pre-line-height) + 4px);
}
} }
/* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */ /* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */

View File

@ -94,3 +94,24 @@ call-function: ("check-buttons",{
"filter": "invert(0.5)", "filter": "invert(0.5)",
"filter_hover": "invert(0.35)", "filter_hover": "invert(0.35)",
}) })
define-function: (
"check-buttons-position",
[pre_selector],
block {
move-cursor-to: |pre_selector| + " .rust:not(.item-decl)"
store-position: (|pre_selector| + " .rust:not(.item-decl)", {"x": x, "y": y})
assert-position: (|pre_selector| + " .rust:not(.item-decl) + .button-holder", {
"y": |y| + 4,
})
}
)
call-function: ("check-buttons-position", {"pre_selector": ".example-wrap"})
go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
// We should work as well for scraped examples.
call-function: ("check-buttons-position", {"pre_selector": ".example-wrap.scraped-example"})
// And also when the scraped example "title" goes above.
set-window-size: (600, 600)
call-function: ("check-buttons-position", {"pre_selector": ".example-wrap.scraped-example"})