drawer docs, refactoring and removing some unnecessary code

docs/assets/js/src/index.js

@@ -27,7 +27,7 @@ class Application {
     $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
 
     // Disable empty links in docs examples
-    $('.bd-example [href=#]').click((e) => {
+    $('.bd-example [href="#"]').click((e) => {
       e.preventDefault()
     })
 

docs/examples/dashboard/example.scss

@@ -39,10 +39,11 @@ a, a:hover {
 }
 
 .mdb-layout-drawer {
-  background-color: $blue-grey-900;
+  background-color: $blue-grey-800;
   color: $blue-grey-50;
 
   > header {
+    background-color: $blue-grey-900;
     height: 151px;
 
     .avatar {
@@ -73,8 +74,7 @@ a, a:hover {
   }
 
   > .list-group {
-    background-color: $blue-grey-800;
+    //z-index: -2;
-    z-index: -2;
 
     .list-group-item {
       color: rgba(255, 255, 255, 0.56);

docs/examples/dashboard/index.html

@@ -91,7 +91,7 @@ js: example.js
         </div>
       </div>
     </header>
-    <ul class="mdb-nav-x list-group">
+    <ul class="list-group">
       <a class="list-group-item">
         <i class="material-icons" role="presentation">home</i>Home
       </a>

docs/examples/drawer/index.html

@@ -45,7 +45,7 @@ group: material-design
     <header>
       <a class="navbar-brand">Title</a>
     </header>
-    <ul class="mdb-nav-x list-group">
+    <ul class="list-group">
       <a class="list-group-item">
         <i class="material-icons" role="presentation">home</i>Home
       </a>
@@ -67,7 +67,7 @@ group: material-design
     <div class="container">
       <!-- main content -->
       <h2>Responsive drawer template</h2>
-      <p class="lead">This template provides a push style drawer for large screens, but an overlay style drawer for smaller screens.</p>
+      <p class="lead">This template provides a push style drawer for large screens, but an overlay style drawer for smaller screens.  For example, try viewing on an iPad in portrait vs. landscape.</p>
     </div>
   </main>
 </div>

docs/material-design/drawers.md

@@ -20,6 +20,10 @@ The following examples provide a good starting point:
 - [Drawer template]({{ site.baseurl }}/examples/dashboard/) is a basic fully responsive template.
 - [Dashboard example]({{ site.baseurl }}/examples/dashboard/) is a comprehensive fully responsive demonstration.
 
+### Behavior
+
+The default behavior for any drawer is to be _out_ of the frame of view.  It can be set _in_ the frame of view either by using using one or the gridpoint responsive classes such as `mdb-drawer-in-lg-up`, or by using `mdb-drawer-in`.   Any drawer, be it responsive or statically set to _in_ can be _forced_ out by using `mdb-drawer-out`.
+
 ### Markup
 
 In order to use the drawer component, MDB has created the following flex based layout structure:
@@ -32,6 +36,74 @@ In order to use the drawer component, MDB has created the following flex based l
 </div>
 {% endhighlight %}
 
+## Styles
+
+### Push
+
+The default behavior is for content to be pushed.
+{% example html id=drawer-s1 %}
+<div class="mdb-layout-container mdb-drawer-f-l">
+  <header class="mdb-layout-header">
+    <div class="navbar navbar-light bg-faded">
+      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1">
+        <span class="sr-only">Toggle drawer</span>
+        <i class="material-icons">menu</i>
+      </button>
+      <ul class="nav navbar-nav">
+        <li class="nav-item">Title</li>
+      </ul>
+    </div>
+  </header>
+  <div id="dw-s1" class="mdb-layout-drawer">
+    <header>
+      <a class="navbar-brand">Title</a>
+    </header>
+    <ul class="list-group">
+      <a class="list-group-item">Link 1</a>
+      <a class="list-group-item">Link 2</a>
+      <a class="list-group-item">Link 3</a>
+    </ul>
+  </div>
+  <main class="mdb-layout-content">
+    <div class="container">
+      <p>Main content</p>
+    </div>
+  </main>
+</div>
+{% endexample %}
+
+### Overlay
+Optional behavior will overlay the drawer and provide a backdrop:
+{% example html id=drawer-s2 %}
+<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
+  <header class="mdb-layout-header">
+    <div class="navbar navbar-light bg-faded">
+      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
+        <span class="sr-only">Toggle drawer</span>
+        <i class="material-icons">menu</i>
+      </button>
+      <ul class="nav navbar-nav">
+        <li class="nav-item">Title</li>
+      </ul>
+    </div>
+  </header>
+  <div id="dw-s2" class="mdb-layout-drawer">
+    <header>
+      <a class="navbar-brand">Title</a>
+    </header>
+    <ul class="list-group">
+      <a class="list-group-item">Link 1</a>
+      <a class="list-group-item">Link 2</a>
+      <a class="list-group-item">Link 3</a>
+    </ul>
+  </div>
+  <main class="mdb-layout-content">
+    <div class="container">
+      <p>Main content</p>
+    </div>
+  </main>
+</div>
+{% endexample %}
 
 ## Positions
 
@@ -101,7 +173,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
     <header>
       <a class="navbar-brand">Title</a>
     </header>
-    <ul class="mdb-nav-x list-group">
+    <ul class="list-group">
       <a class="list-group-item">Link 1</a>
       <a class="list-group-item">Link 2</a>
       <a class="list-group-item">Link 3</a>
@@ -134,7 +206,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
     <header>
       <a class="navbar-brand">Title</a>
     </header>
-    <ul class="mdb-nav-x list-group">
+    <ul class="list-group">
       <a class="list-group-item">Link 1</a>
       <a class="list-group-item">Link 2</a>
       <a class="list-group-item">Link 3</a>
@@ -167,7 +239,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
     <header>
       <a class="navbar-brand">Title</a>
     </header>
-    <ul class="mdb-nav-x list-group">
+    <ul class="list-group">
       <a class="list-group-item">Link 1</a>
       <a class="list-group-item">Link 2</a>
       <a class="list-group-item">Link 3</a>
@@ -200,7 +272,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
     <header>
       <a class="navbar-brand">Title</a>
     </header>
-    <ul class="mdb-nav-x list-group">
+    <ul class="list-group">
       <a class="list-group-item">Link 1</a>
       <a class="list-group-item">Link 2</a>
       <a class="list-group-item">Link 3</a>
@@ -214,76 +286,6 @@ The following positioning marker classes should be placed on the `mdb-layout-con
 </div>
 {% endexample %}
 
-## Styles
-
-### Push
-
-The default behavior is for content to be pushed.
-{% example html id=drawer-s1 %}
-<div class="mdb-layout-container mdb-drawer-f-l">
-  <header class="mdb-layout-header">
-    <div class="navbar navbar-light bg-faded">
-      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1">
-        <span class="sr-only">Toggle drawer</span>
-        <i class="material-icons">menu</i>
-      </button>
-      <ul class="nav navbar-nav">
-        <li class="nav-item">Title</li>
-      </ul>
-    </div>
-  </header>
-  <div id="dw-s1" class="mdb-layout-drawer">
-    <header>
-      <a class="navbar-brand">Title</a>
-    </header>
-    <ul class="mdb-nav-x list-group">
-      <a class="list-group-item">Link 1</a>
-      <a class="list-group-item">Link 2</a>
-      <a class="list-group-item">Link 3</a>
-    </ul>
-  </div>
-  <main class="mdb-layout-content">
-    <div class="container">
-      <p>Main content</p>
-    </div>
-  </main>
-</div>
-{% endexample %}
-
-### Overlay
-Optional behavior will overlay the drawer and provide a backdrop:
-{% example html id=drawer-s2 %}
-<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
-  <header class="mdb-layout-header">
-    <div class="navbar navbar-light bg-faded">
-      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
-        <span class="sr-only">Toggle drawer</span>
-        <i class="material-icons">menu</i>
-      </button>
-      <ul class="nav navbar-nav">
-        <li class="nav-item">Title</li>
-      </ul>
-    </div>
-  </header>
-  <div id="dw-s2" class="mdb-layout-drawer">
-    <header>
-      <a class="navbar-brand">Title</a>
-    </header>
-    <ul class="mdb-nav-x list-group">
-      <a class="list-group-item">Link 1</a>
-      <a class="list-group-item">Link 2</a>
-      <a class="list-group-item">Link 3</a>
-    </ul>
-  </div>
-  <main class="mdb-layout-content">
-    <div class="container">
-      <p>Main content</p>
-    </div>
-  </main>
-</div>
-{% endexample %}
-
-
 ## Responsiveness vs Static
 
 ### Static

scss/.scss-lint.yml

@@ -122,6 +122,7 @@ linters:
       "flex-pack",
       "flex-align",
       "flex-shrink",
+      "flex-grow",
       "align-items",
       "align-self",
       "justify-content",

scss/_drawer.scss

@@ -30,7 +30,6 @@
   // Placement of common components within the drawer
   //  You might say this is opinionated - feedback welcome.
   > header {
-    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
@@ -43,11 +42,7 @@
   }
 
   > .list-group {
-    flex-direction: column;
-    align-items: stretch;
     padding-top: 1rem;
-    flex-grow: 1;
-    //z-index: -2;
 
     .list-group-item {
       padding-right: 2.5rem;

scss/_layout.scss

@@ -43,9 +43,9 @@
   z-index: 1; // under a header
   display: inline-block;
   //-ms-flex: 0 1 auto; // Fix IE10 bug.
+  flex-grow: 1;
   overflow-x: hidden;
   overflow-y: auto; // mobile webkit smooth scrolling may need scroll, but auto seems to be working and omits the scroll border
-  flex-grow: 1;
   -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
   @include material-animation-default();
 }

scss/_list-group.scss

@@ -6,6 +6,8 @@
 // - triple line 88dp
 
 .list-group {
+  flex-grow: 1;
+
   // Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.
   padding: .5rem 0;