fix(layout-docs): manage-list tutorial (#79)

* fix(layout-docs): manage-list tutorial * update(hotfix): layout-nav
Teradata · Sep 14, 2016 · b63bf5f · b63bf5f
1 parent 23007cd
commit b63bf5f
Showing 1 changed file with 36 additions and 24 deletions.
diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -76,16 +76,11 @@ <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
                   <md-divider></md-divider>
                 </md-list>
               </td-step>
-              <td-step [active]="true" label="Step 3: td-layout-manage-list" sublabel="the main content area of the layout">
+              <td-step [active]="true" label="Step 3: td-layout-nav" sublabel="the main content wrapper">
                 <md-list>
                   <md-list-item>
-                    <h3 md-line><code><![CDATA[<td-layout-manage-list>]]></code></h3>
-                    <p md-line>Builds the top toolbar, left nav and content area</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>#list</code></h3>
-                    <p md-line>The ID and local reference of your list</p>
+                    <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
+                    <p md-line>Builds the top toolbar</p>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
@@ -98,6 +93,15 @@ <h3 md-line><code>logo?: string</code></h3>
                     <p md-line>The path to your toolbar logo</p>
                   </md-list-item>
                   <md-divider></md-divider>
+                </md-list>
+              </td-step>
+              <td-step [active]="true" label="Step 4: td-layout-manage-list" sublabel="the inner content area">
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout-manage-list>]]></code></h3>
+                    <p md-line>Builds the left nav and content area</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
                   <md-list-item>
                     <h3 md-line><code><![CDATA[<md-nav-list list-items>]]></code></h3>
                     <p md-line>The list items wrapper with optional <code>dense</code> attribute </p>
@@ -110,13 +114,18 @@ <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
                   <md-divider></md-divider>
                 </md-list>
               </td-step>
-              <td-step [active]="true" label="Step 3: div[toolbar-buttons]" sublabel="the management toolbar above content">
+              <td-step [active]="true" label="Step 5: div[toolbar-buttons]" sublabel="the management toolbar above content">
                 <md-list>
                   <md-list-item>
                     <h3 md-line><code><![CDATA[<div toolbar-buttons>]]></code></h3>
                     <p md-line>The toolbar wrapper</p>
                   </md-list-item>
                   <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<span>Title</span>]]></code></h3>
+                    <p md-line>Optional toolbar title</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
                   <md-list-item>
                     <h3 md-line><code><![CDATA[<span flex>]]></code></h3>
                     <p md-line>Used as a spacer between buttons</p>
@@ -142,21 +151,24 @@ <h3 class="md-title">HTML</h3>
                       { {item.title} }
                     </a>
                   </md-nav-list>
-                  <td-layout-manage-list #list title="Toolbar Title" logo="path/to/toolbar-logo.svg">
-                    <md-nav-list list-items>
-                      <template let-item let-last="last" ngFor [ngForOf]="items">
-                          <a md-list-item [routerLink]="[item.route]">
-                            <md-icon md-list-avatar>{ {item.icon} }</md-icon>
-                            { {item.title} }
-                          </a>
-                      </template>
-                    </md-nav-list>
-                    <div toolbar-buttons layout="row" layout-align="start center" flex>
-                      <span flex></span>
-                      <button md-button class="md-icon-button"><md-icon class="md-24">more_vert</md-icon></button>
-                    </div>
-                    <router-outlet></router-outlet>
-                  </td-layout-manage-list>
+                  <td-layout-nav title="Toolbar Title" logo="path/to/toolbar-logo.svg">
+                    <td-layout-manage-list #list>
+                      <md-nav-list list-items>
+                        <template let-item let-last="last" ngFor [ngForOf]="items">
+                            <a md-list-item [routerLink]="[item.route]">
+                              <md-icon md-list-avatar>{ {item.icon} }</md-icon>
+                              { {item.title} }
+                            </a>
+                        </template>
+                      </md-nav-list>
+                      <div toolbar-buttons layout="row" layout-align="start center" flex>
+                        <span>Optional Toolbar Title</span>
+                        <span flex></span>
+                        <button md-button class="md-icon-button"><md-icon class="md-24">more_vert</md-icon></button>
+                      </div>
+                      <router-outlet></router-outlet>
+                    </td-layout-manage-list>
+                  </td-layout-nav>
                 </td-layout>
                 ]]>
             </td-highlight>