honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

build(aio): render heading anchors on the right 

This approach simplifies the styling needed considerably.
Previously, we had to make room on the left for heading that
are in visual containers. Also we had to apply a `float:right`
when on narrow screens as the gutter not available then.
This float didn't render nicely if the heading text was longer
than could be rendered on a single line.

Closes #22131
This commit is contained in:
Pete Bacon Darwin 2018-02-26 11:34:57 +00:00 committed by Alex Eagle
parent 8d34364ff5
commit 83b32a0a0a
4 changed files with 8 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
aio/src/styles/2-modules/_heading-anchors.scss
View File

@ -1,48 +1,18 @@
.sidenav-content {
h1, h2, h3, h4, h5, h6 {
&.no-anchor .header-link {
display: none;
}
.header-link {
box-sizing: border-box;
color: $mediumgray;
display: inline-block;
margin-left: -42px;
padding: 0 8px;
margin-left: 8px;
text-decoration: none;
user-select: none;
vertical-align: middle;
visibility: hidden;
width: 40px;
@media (max-width: 600px) {
float: right;
margin-left: 0;
}
display: inline-block;
vertical-align: text-top;
}
&:hover .header-link {
visibility: visible;
}
}
.l-sub-section {
h1, h2, h3, h4, h5, h6 {
a {
padding-right: 64px;
margin-left: -74px;
}
}
}
.alert {
h1, h2, h3, h4, h5, h6 {
a {
padding-right: 80px;
margin-left: -90px;
}
}
}
}

2
aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js vendored
View File

@ -20,7 +20,7 @@ const hasClass = (node, cls) => {
const link = options =>
tree => visit(tree, node => {
if (is(node, HEADINGS) && has(node, 'id') && !hasClass(node, NO_ANCHOR_CLASS)) {
node.children.unshift({
node.children.push({
type: 'element',
tagName: 'a',
properties: Object.assign(clone(options.properties), {href: `#${node.properties.id}`}),

6
aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js
View File

@ -20,9 +20,9 @@ describe('autolink-headings postprocessor', () => {
<h3>Heading with encoded chars &#x26;</h3>
`;
const processedContent = `
<h1 id="heading-1"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a>Heading 1</h1>
<h2 id="heading-with-bold"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a>Heading with <strong>bold</strong></h2>
<h3 id="heading-with-encoded-chars-"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a>Heading with encoded chars &#x26;</h3>
<h1 id="heading-1">Heading 1<a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a></h1>
<h2 id="heading-with-bold">Heading with <strong>bold</strong><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a></h2>
<h3 id="heading-with-encoded-chars-">Heading with encoded chars &#x26;<a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a></h3>
`;
const docs = [{docType: 'a', renderedContent: originalContent}];

4
aio/tools/transforms/templates/api/base.template.html
View File

@ -30,9 +30,7 @@
{% if doc.experimental !== undefined %}<label class="api-status-label experimental">experimental</label>{% endif %}
{% if doc.stable !== undefined %}<label class="api-status-label stable">stable</label>{% endif %}
<label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
<h1>
{$ doc.name $}
</h1>
<h1>{$ doc.name $}</h1>
<span class="version">{$ version $}</span>
</header>
<div class="page-actions">