feat(docs): adding page title to anchors (#323)

Page title is added to anchor's menu and is separated by border-bottom. Bug of not updating anchors on contentRenderFailed error is fixed.
positive-js · Oct 29, 2019 · 69c3b37 · 69c3b37
1 parent 950e264
commit 69c3b37
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/packages/docs/src/app/components/anchors/_anchors-theme.scss b/packages/docs/src/app/components/anchors/_anchors-theme.scss
@@ -14,6 +14,31 @@
     .anchors-menu__list-element {
         color: $text;
 
+        &:first-child {
+            padding:  {
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 16px;
+            }
+            margin: {
+                top: 0;
+                right: 0;
+                bottom: 6px;
+                left: 0;
+            }
+
+            & .anchors-menu__link {
+                border-bottom: 1px solid rgba($shadow, 0.2);
+                padding: {
+                    top: 6px;
+                    right: 16px;
+                    bottom: 6px;
+                    left: 0;
+                }
+            }
+        }
+
         &:hover { @include box-shadow( inset 3px 0 0 rgba($shadow, 0.2) ); }
 
         &_active, &_active:hover { @include box-shadow( inset 3px 0 0 $primary_500 ); }

diff --git a/packages/docs/src/app/components/anchors/anchors.component.html b/packages/docs/src/app/components/anchors/anchors.component.html
@@ -2,7 +2,7 @@
     <div class="anchors-menu__container">
         <div class="anchors-menu__list">
             <div *ngFor="let anchor of anchors; let i = index" class="anchors-menu__list-element {{anchors[i].active? activeClass: null}}">
-                <a [routerLink]="[this.pathName]" fragment="{{anchor.href}}" (click)="setFragment(i)">{{anchor.name}}</a>
+                <a [routerLink]="[this.pathName]" fragment="{{anchor.href}}" (click)="setFragment(i)" class="anchors-menu__link">{{anchor.name}}</a>
             </div>
         </div>
     </div>

diff --git a/packages/docs/src/app/components/anchors/anchors.component.ts b/packages/docs/src/app/components/anchors/anchors.component.ts
@@ -21,7 +21,7 @@ interface IAnchor {
 })
 export class AnchorsComponent {
     @Input() anchors: IAnchor[] = [];
-    @Input() headerSelectors = '.docs-header-link_3';
+    @Input() headerSelectors = '.mc-display-3.title, .docs-header-link_3';
 
     click: boolean = false;
     container: string;
@@ -146,7 +146,8 @@ export class AnchorsComponent {
             const bodyTop = this.document.body.getBoundingClientRect().top;
             for (let i = 0; i < headers.length; i++) {
                 const name = headers[i].innerText.trim();
-                const href = `${headers[i].querySelector('span').id}`;
+                const anchorHeader = headers[i].querySelector('span');
+                const href = anchorHeader ? `${anchorHeader.id}` : '';
                 const top = headers[i].getBoundingClientRect().top - bodyTop + this.headerHeight;
 
                 anchors.push({

diff --git a/packages/docs/src/app/components/component-viewer/component-viewer.component.ts b/packages/docs/src/app/components/component-viewer/component-viewer.component.ts
@@ -157,6 +157,10 @@ export class ComponentOverviewComponent implements OnDestroy {
     showDocumentLostAlert() {
         this.documentLost = true;
         this.showView();
+
+        if (this.anchorsComponent) {
+            this.anchorsComponent.setScrollPosition();
+        }
     }
 
     showView() {