Improve alignment of additional scraped examples, add scrape examples help page
This commit is contained in:
Will Crichton
parent
f1e3e2c366
commit
ae5d0cbe74
9 changed files with 164 additions and 42 deletions
|
|
@ -2671,6 +2671,7 @@ fn render_call_locations(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item) {
|
|||
<span></span>\
|
||||
<h5 id=\"{id}\">\
|
||||
<a href=\"#{id}\">Examples found in repository</a>\
|
||||
<a class=\"scrape-help\" href=\"https://doc.rust-lang.org/rustdoc/scraped-examples.html\" target=\"_blank\">?</a>\
|
||||
</h5>",
|
||||
id = id
|
||||
);
|
||||
|
|
@ -2842,6 +2843,7 @@ fn render_call_locations(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item) {
|
|||
<summary class=\"hideme\">\
|
||||
<span>More examples</span>\
|
||||
</summary>\
|
||||
<div class=\"hide-more\">Hide additional examples</div>\
|
||||
<div class=\"more-scraped-examples\">\
|
||||
<div class=\"toggle-line\"><div class=\"toggle-line-inner\"></div></div>\
|
||||
<div class=\"more-scraped-examples-inner\">"
|
||||
|
|
|
|||
|
|
@ -618,7 +618,7 @@ h2.location a {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.docblock > :not(.information) {
|
||||
.docblock > :not(.information):not(.more-examples-toggle) {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -836,8 +836,8 @@ h2.small-section-header > .anchor {
|
|||
content: '§';
|
||||
}
|
||||
|
||||
.docblock a:not(.srclink):not(.test-arrow):hover,
|
||||
.docblock-short a:not(.srclink):not(.test-arrow):hover, .item-info a {
|
||||
.docblock a:not(.srclink):not(.test-arrow):not(.scrape-help):hover,
|
||||
.docblock-short a:not(.srclink):not(.test-arrow):not(.scrape-help):hover, .item-info a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -2034,10 +2034,36 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
|
||||
/* Begin: styles for --scrape-examples feature */
|
||||
|
||||
.scraped-example-list .section-header .scrape-help {
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
margin-left: 10px;
|
||||
padding: 0 4px;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
background: transparent;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.scraped-example-title {
|
||||
font-family: 'Fira Sans';
|
||||
}
|
||||
|
||||
.scraped-example .code-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scraped-example:not(.expanded) .code-wrapper {
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.scraped-example:not(.expanded) .code-wrapper pre {
|
||||
overflow-y: hidden;
|
||||
max-height: 240px;
|
||||
|
|
@ -2072,14 +2098,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scraped-example .code-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scraped-example:not(.expanded) .code-wrapper:before {
|
||||
content: " ";
|
||||
width: 100%;
|
||||
|
|
@ -2087,7 +2105,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.scraped-example:not(.expanded) .code-wrapper:after {
|
||||
|
|
@ -2097,12 +2114,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
position: absolute;
|
||||
z-index: 100;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.scraped-example:not(.expanded) .code-wrapper {
|
||||
overflow: hidden;
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.scraped-example .code-wrapper .line-numbers {
|
||||
|
|
@ -2121,34 +2132,37 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.scraped-example:not(.expanded) .code-wrapper .example-wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.scraped-example .code-wrapper .example-wrap pre.rust {
|
||||
overflow-x: inherit;
|
||||
width: inherit;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.scraped-example .example-wrap .rust span.highlight {
|
||||
background: #fcffd6;
|
||||
}
|
||||
|
||||
.scraped-example .example-wrap .rust span.highlight.focus {
|
||||
background: #f6fdb0;
|
||||
}
|
||||
|
||||
.more-examples-toggle {
|
||||
max-width: calc(100% + 25px);
|
||||
margin-top: 10px;
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
.more-examples-toggle summary {
|
||||
color: #999;
|
||||
.more-examples-toggle .hide-more {
|
||||
margin-left: 25px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.more-examples-toggle summary, .more-examples-toggle .hide-more {
|
||||
font-family: 'Fira Sans';
|
||||
}
|
||||
|
||||
.more-scraped-examples {
|
||||
margin-left: 25px;
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
|
||||
.more-scraped-examples-inner {
|
||||
|
|
@ -2164,13 +2178,8 @@ details.rustdoc-toggle[open] > summary.hideme::after {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-line:hover .toggle-line-inner {
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
.toggle-line-inner {
|
||||
min-width: 2px;
|
||||
background: #ddd;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -611,6 +611,18 @@ input:checked + .slider {
|
|||
background-color: #ffb454 !important;
|
||||
}
|
||||
|
||||
|
||||
.scraped-example-list .section-header .scrape-help {
|
||||
border-color: #999;
|
||||
color: #999;
|
||||
}
|
||||
.scraped-example-list .section-header .scrape-help:hover {
|
||||
border-color: #c5c5c5;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
.more-examples-toggle summary, .more-examples-toggle .hide-more {
|
||||
color: #999;
|
||||
}
|
||||
.scraped-example .example-wrap .rust span.highlight {
|
||||
background: rgb(91, 59, 1);
|
||||
}
|
||||
|
|
@ -624,8 +636,8 @@ input:checked + .slider {
|
|||
background: linear-gradient(to top, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0));
|
||||
}
|
||||
.toggle-line-inner {
|
||||
background: #616161;
|
||||
background: #999;
|
||||
}
|
||||
.toggle-line:hover .toggle-line-inner {
|
||||
background: #898989;
|
||||
background: #c5c5c5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -478,6 +478,17 @@ div.files > .selected {
|
|||
border-bottom-color: #ddd;
|
||||
}
|
||||
|
||||
.scraped-example-list .section-header .scrape-help {
|
||||
border-color: #999;
|
||||
color: #999;
|
||||
}
|
||||
.scraped-example-list .section-header .scrape-help:hover {
|
||||
border-color: #c5c5c5;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
.more-examples-toggle summary, .more-examples-toggle .hide-more {
|
||||
color: #999;
|
||||
}
|
||||
.scraped-example .example-wrap .rust span.highlight {
|
||||
background: rgb(91, 59, 1);
|
||||
}
|
||||
|
|
@ -491,8 +502,8 @@ div.files > .selected {
|
|||
background: linear-gradient(to top, rgba(53, 53, 53, 1), rgba(53, 53, 53, 0));
|
||||
}
|
||||
.toggle-line-inner {
|
||||
background: #616161;
|
||||
background: #999;
|
||||
}
|
||||
.toggle-line:hover .toggle-line-inner {
|
||||
background: #898989;
|
||||
background: #c5c5c5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -462,3 +462,33 @@ div.files > .selected {
|
|||
.setting-line > .title {
|
||||
border-bottom-color: #D5D5D5;
|
||||
}
|
||||
|
||||
.scraped-example-list .section-header .scrape-help {
|
||||
border-color: #999;
|
||||
color: #999;
|
||||
}
|
||||
.scraped-example-list .section-header .scrape-help:hover {
|
||||
border-color: black;
|
||||
color: black;
|
||||
}
|
||||
.more-examples-toggle summary, .more-examples-toggle .hide-more {
|
||||
color: #999;
|
||||
}
|
||||
.scraped-example .example-wrap .rust span.highlight {
|
||||
background: #fcffd6;
|
||||
}
|
||||
.scraped-example .example-wrap .rust span.highlight.focus {
|
||||
background: #f6fdb0;
|
||||
}
|
||||
.scraped-example:not(.expanded) .code-wrapper:before {
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
||||
}
|
||||
.scraped-example:not(.expanded) .code-wrapper:after {
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
||||
}
|
||||
.toggle-line-inner {
|
||||
background: #ccc;
|
||||
}
|
||||
.toggle-line:hover .toggle-line-inner {
|
||||
background: #999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,8 +84,10 @@
|
|||
onEach(document.querySelectorAll('.more-examples-toggle'), function(toggle) {
|
||||
// Allow users to click the left border of the <details> section to close it,
|
||||
// since the section can be large and finding the [+] button is annoying.
|
||||
toggle.querySelector('.toggle-line').addEventListener('click', function() {
|
||||
toggle.open = false;
|
||||
toggle.querySelectorAll('.toggle-line, .hide-more').forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
toggle.open = false;
|
||||
});
|
||||
});
|
||||
|
||||
var moreExamples = toggle.querySelectorAll('.scraped-example');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue