feat: highlighted sidebar as you scroll on doc reference pages

This commit is contained in:
Fabio Berger
2018-10-15 17:35:40 +01:00
parent 96d145f54f
commit ce151f630d
5 changed files with 58 additions and 20 deletions

View File

@@ -97,15 +97,15 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
if (!_.isUndefined(markdownFileIfExists)) {
// Special-case replace the `introduction` sectionName with the package name
const isIntroductionSection = sectionName === 'introduction';
const finalSectionName = isIntroductionSection ? this.props.docsInfo.displayName : sectionName;
const headerSize = isIntroductionSection ? HeaderSizes.H1 : HeaderSizes.H3;
return (
<MarkdownSection
key={`markdown-section-${sectionName}`}
sectionName={finalSectionName}
sectionName={sectionName}
headerSize={headerSize}
markdownContent={markdownFileIfExists}
shouldReformatTitle={false}
alternativeSectionTitle={isIntroductionSection ? this.props.docsInfo.displayName : undefined}
/>
);
}
@@ -196,7 +196,9 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
)}
{!_.isEmpty(docSection.functions) && (
<div>
{!isExportedFunctionSection && <h2 style={headerStyle}>Functions</h2>}
{!isExportedFunctionSection && (
<div style={{ ...headerStyle, fontSize: '1.5em' }}>Functions</div>
)}
<div>{functionDefs}</div>
</div>
)}

View File

@@ -55,7 +55,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu
<div
id={`${this.props.sectionName}-${method.name}`}
style={{ overflow: 'hidden', width: '100%' }}
className="pb4"
className="pb4 pt2"
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>