From e99af93a2413013083007aa60d338a6fd1c8a8d8 Mon Sep 17 00:00:00 2001
From: Zhicheng Wang <zcwang@thoughtworks.com>
Date: Wed, 16 Aug 2017 09:06:29 +0800
Subject: [PATCH] fix: can't update title with translation result fix: display
 h1 as block element

---
 aio/src/app/embedded/toc/toc.component.html        |  4 ++--
 .../app/layout/doc-viewer/doc-viewer.component.ts  | 14 +++++---------
 aio/src/styles/0-base/_typography.scss             |  1 -
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/aio/src/app/embedded/toc/toc.component.html b/aio/src/app/embedded/toc/toc.component.html
index 81c026a4f5..a94cd597b0 100644
--- a/aio/src/app/embedded/toc/toc.component.html
+++ b/aio/src/app/embedded/toc/toc.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="type !== 'None'" class="toc-inner" [class.collapsed]="isCollapsed">
 
   <div *ngIf="type === 'EmbeddedSimple'" class="toc-heading embedded">
-    Contents
+    目录
   </div>
 
   <button *ngIf="type === 'EmbeddedExpandable'" type="button" (click)="toggle(false)"
@@ -9,7 +9,7 @@
     title="Expand/collapse contents"
     aria-label="Expand/collapse contents"
     [attr.aria-pressed]="!isCollapsed">
-    Contents
+    目录
     <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></md-icon>
   </button>
 
diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
index 4d7161c7f5..a6555dc0b0 100644
--- a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
+++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
@@ -103,20 +103,16 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
   private addTitleAndToc(docId: string) {
     this.tocService.reset();
     let title = '';
-    const titleElements = this.hostElement.querySelectorAll('h1');
-    let titleEl;
-    if (titleElements.length > 1) {
-      titleEl = titleElements[1];
-    } else if (titleElements.length > 0) {
-      titleEl = titleElements[0];
-    }
+    const translatedTitleEl = this.hostElement.querySelector('h1[translation-result]');
+    const originalTitleEl = this.hostElement.querySelector('h1[translation-origin]');
+    const titleEl = translatedTitleEl || originalTitleEl;
     // Only create TOC for docs with an <h1> title
     // If you don't want a TOC, add "no-toc" class to <h1>
     if (titleEl) {
-      title = (titleEl.innerText || titleEl.textContent).trim();
+      title = (titleEl.textContent).trim();
       if (!/(no-toc|notoc)/i.test(titleEl.className)) {
         this.tocService.genToc(this.hostElement, docId);
-        titleEl.insertAdjacentHTML('afterend', '<aio-toc class="embedded"></aio-toc>');
+        (originalTitleEl || translatedTitleEl).insertAdjacentHTML('afterend', '<aio-toc class="embedded"></aio-toc>');
       }
     }
     this.titleService.setTitle(title ? `Angular - ${title}` : 'Angular');
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 870af4fc4b..4015a4cb2a 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -8,7 +8,6 @@ body {
 }
 
 h1 {
-  display: inline-block;
   font-size: 24px;
   font-weight: 500;
   margin: 8px 0px;