From bf0ce0278269842a72f6fa9e717475f51d22bd8b Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Thu, 14 Jan 2016 17:05:16 -0600
Subject: [PATCH] Refactored drawer and layout classes.  #822 changed
 responsive nature to be declarative based on mdb-drawer-open-* classes, and
 allow plain mdb-drawer-open to signal the drawer should render open.

---
 docs/examples/dashboard/example.scss | 27 +++++++---
 docs/examples/dashboard/index.html   |  4 +-
 scss/_drawer.scss                    | 74 ++++++++++++++++++----------
 scss/_layout.scss                    | 70 ++++++++++----------------
 scss/_mixins.scss                    |  1 +
 scss/mixins/_drawer.scss             |  6 +--
 scss/variables/_drawer.scss          |  2 +-
 scss/variables/_layout.scss          |  5 +-
 8 files changed, 99 insertions(+), 90 deletions(-)

diff --git a/docs/examples/dashboard/example.scss b/docs/examples/dashboard/example.scss
index 56a16f54..fe35ee60 100644
--- a/docs/examples/dashboard/example.scss
+++ b/docs/examples/dashboard/example.scss
@@ -19,19 +19,30 @@ a, a:hover {
   color: rgba(255, 255, 255, 0.56);
 }
 
-.mdb-layout {
+.mdb-layout-header {
+  background-color: $grey-100;
+  color: $grey-600;
 
-  .mdb-layout-header {
-    background-color: $grey-100;
-    color: $grey-600;
-  }
+  > .navbar {
+    // .navbar is not flex based by default, so have to vertical align with padding.
+    //  If this were my own app, I would flex position items in my navbar and stick .mdb-layout-header on my existing .navbar
+    //  instead of wrapping it.  But nonetheless, this example shows how this can work with minimal markup to match an MDL design.
+    $header-height: 3.5rem !default; // 56px
+    $line-height: 1.5;
 
-  .mdb-layout-content {
-    padding-top: .5rem;
-    background-color: $grey-100;
+    min-height: $header-height;
+
+    $padding: ($header-height - (1rem * $line-height)) / 2;
+    padding-top: $padding;
+    padding-bottom: $padding;
   }
 }
 
+.mdb-layout-content {
+  padding-top: .5rem;
+  background-color: $grey-100;
+}
+
 .mdb-layout-drawer {
   background-color: $blue-grey-900;
   color: $blue-grey-50;
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index 19bcfc0f..4dde2ee5 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -7,8 +7,8 @@ group: material-design
 <!-- Custom styles for this template -->
 <link href="example.css" rel="stylesheet">
 
-<div class="mdb-layout-container">
-  <div class="mdb-layout mdb-drawer-fixed-left">
+<div class="mdb-layout-canvas">
+  <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open-md">
     <header class="mdb-layout-header">
       <!--
       <div class="collapse" id="navbar-header">
diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index 718bba22..9678f562 100644
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -7,7 +7,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 5;
+  z-index: 5; // over a header and content
   box-sizing: border-box;
   display: flex;
   height: 100%;
@@ -39,41 +39,65 @@
   }
 }
 
-// FIXME: the below needs to happen if it is the right size OR if the drawer is visible.  Need to look at collapse or collapseInline to see if it can help us here.
+//----------------
+// Sizing and positioning below here
+//
+// TODO create a mixin for the below that can generate a named set of styles so that you can use multiple drawer sizes i.e. something like mdb-layout-drawer-100, mdb-drawer-fixed-right-100, etc.
 
+.mdb-layout-drawer {
+  width: $mdb-layout-drawer-width;
+}
+
+// initial position of drawer (closed)
 .mdb-drawer-fixed-left {
 
-  // Responsive Header
-  > .mdb-layout-header {
-    @include media-breakpoint-up(lg) {
-      width: calc(100% - #{$mdb-layout-drawer-sm});
-      margin-left: $mdb-layout-drawer-sm;
-    }
-  }
-
   // Responsive Drawer Width
   > .mdb-layout-drawer {
-    width: $mdb-layout-drawer-sm;
-    transform: translateX(-$mdb-layout-drawer-sm - 10px); // initially way off screen
-
-    //&.is-visible {
-    //  transform: translateX(0);
-    //  ~ .mdb-layout-content.mdb-layout-content {
-    //    overflow: hidden;
-    //  }
-    //}
-
-    @include media-breakpoint-up(lg) {
-      transform: translateX(0);
-    }
+    transform: translateX(-$mdb-layout-drawer-width - 10px); // initially way off screen
   }
 
   // Responsive Content with fixed drawer
   > .mdb-layout-content {
     margin-left: 0;
+  }
+}
 
-    @include media-breakpoint-up(lg) {
-      margin-left: $mdb-layout-drawer-sm;
+// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-open')), as well
+//  as responsive sizes (i.e. mdb-drawer-open-md will open once the browser is wider than 768px).
+//
+// To create these, we need iterate over the standard grid breakpoints, but we also need styles for the simpler
+//  `mdb-drawer-open` without a size (for triggered openings).  Since the xs size is 0,
+//  instead of using `mdb-drawer-open-xs` (which is mostly meaningless), we can just use `mdb-drawer-open` a.k.a always open.
+//  Therefore, this will generate: mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
+.mdb-drawer-open {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+
+    $name: "&-#{$breakpoint}";
+    @if $breakpoint == xs {
+      $name: "&";
+    }
+
+    #{unquote($name)} {
+      @include media-breakpoint-up($breakpoint) {
+        //
+        &.mdb-drawer-fixed-left {
+          // Responsive Header
+          > .mdb-layout-header {
+            width: calc(100% - #{$mdb-layout-drawer-width});
+            margin-left: $mdb-layout-drawer-width;
+          }
+
+          // Responsive Drawer Width
+          > .mdb-layout-drawer {
+            transform: translateX(0);
+          }
+
+          // Responsive Content with fixed drawer
+          > .mdb-layout-content {
+            margin-left: $mdb-layout-drawer-width;
+          }
+        }
+      }
     }
   }
 }
diff --git a/scss/_layout.scss b/scss/_layout.scss
index 55f53f7e..3e0c4110 100644
--- a/scss/_layout.scss
+++ b/scss/_layout.scss
@@ -1,30 +1,32 @@
-// this is a set of flex-based layout containers necessary for components such as the drawer.
+// This is a set of flex-based layout containers necessary for components such as the drawer.
+//  It allows for flex based positioning such as sticky header and footer inside an mdb-layout, with a
+//  mdb-layout-content that scrolls.
 
-//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
-
-.mdb-layout-container {
+// First element
+.mdb-layout-canvas {
   position: absolute;
   width: 100%;
   height: 100%;
 
-  // Main layout class.
-  .mdb-layout {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column; // allows for sticky header and footer
-    overflow-x: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
 }
 
-// Header
-.mdb-layout-header { // navbar
-  // FIXME: it would be nice to stick this directly on the navbar, but navbars are not flex ready, so this is relegated to be a container at this time.
-  z-index: 3;
-  box-sizing: border-box;
+// Primary layout container, belongs inside a mdb-layout-canvas.
+.mdb-layout-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column; // allows for sticky header and footer
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+}
+
+// Header layout (fixed top), belongs in a mdb-layout-container
+.mdb-layout-header {
+  // FIXME: it would be nice to stick this directly on a .navbar, but .navbars are not flex ready, so this is relegated to be a container at this time.
+  z-index: 2; // above content
   display: flex;
   width: 100%;
   max-height: 1000px;
@@ -32,35 +34,12 @@
   flex-wrap: nowrap;
   flex-shrink: 0;
   justify-content: flex-start;
-  transition-property: max-height;
-
-  > .navbar { // heights for common scenarios such as a header with a navbar
-
-    // Current navbar is not flex enabled https://github.com/twbs/bootstrap/issues/18875
-    //  - with flex a vertical align is a breeze
-    //  - with standard layout, we need to use padding instead of height to layout.
-    min-height: $mdb-layout-mobile-header-height;
-
-    // FIXME: hack remove padding once the flex layout works properly
-    $padding: ($mdb-layout-mobile-header-height - (1rem * $line-height)) / 2;
-    padding-top: $padding;
-    padding-bottom: $padding;
-
-    @include media-breakpoint-up(lg) {
-      min-height: $mdb-layout-desktop-header-height;
-
-      // FIXME: hack remove padding once the flex layout works properly
-      $padding: ($mdb-layout-desktop-header-height - (1rem * $line-height)) / 2;
-      padding-top: $padding;
-      padding-bottom: $padding;
-    }
-  }
 }
 
-// Content.
+// Content layout, belongs in a mdb-layout-container
 .mdb-layout-content {
   position: relative;
-  z-index: 1;
+  z-index: 1; // under a header
   display: inline-block;
   //-ms-flex: 0 1 auto; // Fix IE10 bug.
   overflow-x: hidden;
@@ -68,3 +47,4 @@
   flex-grow: 1;
   -webkit-overflow-scrolling: touch; // TODO: why?
 }
+
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index b1b7ff9e..04ae9e60 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -1,6 +1,7 @@
 @import "mixins/utilities";
 @import "mixins/animations";
 @import "mixins/type";
+@import "mixins/drawer";
 @import "mixins/shadows";
 @import "mixins/variations";
 @import "mixins/forms";
diff --git a/scss/mixins/_drawer.scss b/scss/mixins/_drawer.scss
index 3237d438..3222df05 100644
--- a/scss/mixins/_drawer.scss
+++ b/scss/mixins/_drawer.scss
@@ -1,5 +1 @@
-@mixin collapse-open-or-breakpoint-up() {
-  h1, h2, h3, h4, h5, h6 {
-    @content;
-  }
-}
+// nothing yet, there was something, but it wasn't any good, but we expect to put something here soon!
diff --git a/scss/variables/_drawer.scss b/scss/variables/_drawer.scss
index 02470fbd..bbae63af 100644
--- a/scss/variables/_drawer.scss
+++ b/scss/variables/_drawer.scss
@@ -3,4 +3,4 @@ $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
 $mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
 
 // Sizing
-$mdb-layout-drawer-sm: 240px !default;
+$mdb-layout-drawer-width: 240px !default;
diff --git a/scss/variables/_layout.scss b/scss/variables/_layout.scss
index cbedcda8..7cbf784a 100644
--- a/scss/variables/_layout.scss
+++ b/scss/variables/_layout.scss
@@ -1,4 +1 @@
-// General layout header height.
-// FIXME: is this really necessary or something to be considered custom?
-$mdb-layout-mobile-header-height: 3.5rem !default; // 56px
-$mdb-layout-desktop-header-height: 4rem !default; // 64px
+// Layout variables - evidently nothing to see here...remove now?