bugfix(layouts): nav-list and manage-list remove non-spec box-shadow (#…

…203) * update(nav-list): remove non-spec box-shadow - for left sidenav greater than 600px * update(docs): manage-list sidenav title example * update(manage-list): proper list box shadow * update(nav-list): hide shadow in all states
Teradata · Dec 23, 2016 · a61ff1d · a61ff1d
1 parent 81901b2
commit a61ff1d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 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
@@ -1,5 +1,8 @@
 <td-layout-nav logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
   <td-layout-manage-list #list>
+    <md-toolbar list-items>
+      <span>Section Title</span>
+    </md-toolbar>
     <md-nav-list list-items>
       <a md-list-item (click)="list.toggle()">
         <md-icon>folder</md-icon>
@@ -19,6 +22,7 @@
       </a>
     </md-nav-list>
     <div toolbar-buttons layout="row" layout-align="start center" flex>
+      <span>Page Title</span>
       <span flex></span>
       <button md-button class="md-icon-button"><md-icon class="md-24">view_module</md-icon></button>
       <button md-button class="md-icon-button"><md-icon class="md-24">sort</md-icon></button>
@@ -102,6 +106,12 @@ <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-toolbar list-items>]]></code></h3>
+                    <h3 md-line><code><![CDATA[<span>Optional Title</span>]]></code></h3>
+                    <p md-line>Optional list toolbar w/ title</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>
@@ -122,8 +132,8 @@ <h3 md-line><code><![CDATA[<div toolbar-buttons>]]></code></h3>
                   </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>
+                    <h3 md-line><code><![CDATA[<span>Optional Subtitle</span>]]></code></h3>
+                    <p md-line>Optional subtitle</p>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
@@ -153,6 +163,9 @@ <h3 class="md-title">HTML</h3>
                   </md-nav-list>
                   <td-layout-nav toolbarTitle="Toolbar Title" logo="path/to/toolbar-logo.svg">
                     <td-layout-manage-list #list>
+                      <md-toolbar list-items>
+                        <span>Optional Title</span>
+                      </md-toolbar>
                       <md-nav-list list-items>
                         <template let-item let-last="last" ngFor [ngForOf]="items">
                             <a md-list-item [routerLink]="[item.route]">
@@ -162,7 +175,7 @@ <h3 class="md-title">HTML</h3>
                         </template>
                       </md-nav-list>
                       <div toolbar-buttons layout="row" layout-align="start center" flex>
-                        <span>Optional Toolbar Title</span>
+                        <span>Optional Subtitle</span>
                         <span flex></span>
                         <button md-button class="md-icon-button"><md-icon class="md-24">more_vert</md-icon></button>
                       </div>

diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss
@@ -43,6 +43,9 @@
           visibility: visible;
           transform: translate3d(0, 0, 0);
         }
+        &.md-sidenav-opened {
+          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
+        }
       }
       & > .md-sidenav-content {
         display: flex;

diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
@@ -12,6 +12,22 @@
       margin-left: 0 !important;
       flex-grow: 1;
     }
+    /* Ensure the left sidenav is a flex column & 100% height */
+    & > md-sidenav {
+        & > focus-trap {
+        &, & > div {
+          min-height: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          display: -webkit-box;
+          display: -webkit-flex;
+          display: -moz-box;
+          display: -ms-flexbox;
+          display: flex;
+          flex-direction: column;
+        }
+      }
+    }
   }
   @media (min-width: 600px) {
     md-sidenav-layout.td-layout-nav-list {
@@ -29,6 +45,12 @@
           visibility: visible;
           transform: translate3d(0, 0, 0);
         }
+        &.md-sidenav-opened,
+        &.md-sidenav-opening,
+        &.md-sidenav-closed,
+        &.md-sidenav-closing {
+          box-shadow: none;
+        }
       }
       & > .md-sidenav-content {
         margin-left: 0 !important;