From b83236d6288fb766d7eed5bfb0f83427b830bce0 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 14 Dec 2016 02:35:10 -0200
Subject: [PATCH] create responsive grid

---
 docs/src/pages/ui-elements/Layout.vue        | 155 +++++++++++++++----
 src/components/mdLayout/mdLayout.scss        |  39 +++--
 src/components/mdLayout/mdLayout.vue         |  27 ++--
 src/components/mdTable/mdTablePagination.vue |   2 +-
 src/core/stylesheets/variables.scss          |   7 +-
 5 files changed, 168 insertions(+), 62 deletions(-)

diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue
index cfabb05..aa1bb62 100644
--- a/docs/src/pages/ui-elements/Layout.vue
+++ b/docs/src/pages/ui-elements/Layout.vue
@@ -6,6 +6,64 @@
       </div>
 
       <div slot="example">
+        <example-box card-title="Responsive">
+          <div class="layout-demo grid" slot="demo">
+            <md-layout class="color" md-gutter>
+              <md-layout class="color-red" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                <div class="grid-content">
+                  md-flex-xsmall <br>
+                  md-flex-small="50" <br>
+                  md-flex-medium="33"
+                </div>
+              </md-layout>
+
+              <md-layout class="color-blue" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                <div class="grid-content">
+                  md-flex-xsmall <br>
+                  md-flex-small="50" <br>
+                  md-flex-medium="33"
+                </div>
+              </md-layout>
+
+              <md-layout class="color-pink" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                <div class="grid-content">
+                  md-flex-xsmall <br>
+                  md-flex-small="50" <br>
+                  md-flex-medium="33"
+                </div>
+              </md-layout>
+
+              <md-layout class="color-teal" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                <div class="grid-content">
+                  md-flex-xsmall <br>
+                  md-flex-small="50" <br>
+                  md-flex-medium="33"
+                </div>
+              </md-layout>
+
+              <md-layout class="color-green" md-flex-small="100" md-flex-medium="33" md-hide-xsmall>
+                <div class="grid-content">
+                  md-flex-medium="33" <br>
+                  md-hide-xsmall
+                </div>
+              </md-layout>
+
+              <md-layout class="color-yellow" md-flex md-flex-medium="33" md-hide-small>
+                <div class="grid-content">
+                  md-flex-medium="33" <br>
+                  md-hide-small
+                </div>
+              </md-layout>
+            </md-layout>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+
         <example-box card-title="Gutters">
           <div class="layout-demo grid" slot="demo">
             <md-layout class="no-gutter color">
@@ -21,7 +79,7 @@
               <md-layout></md-layout>
             </md-layout>
 
-            <md-layout :md-gutter="16" class="color">
+            <md-layout md-gutter="16" class="color">
               <md-layout></md-layout>
               <md-layout></md-layout>
               <md-layout></md-layout>
@@ -49,30 +107,30 @@
 
         <example-box card-title="Sizes">
           <div class="layout-demo grid" slot="demo">
-            <md-layout :md-gutter="16" class="color">
-              <md-layout :md-flex="50"></md-layout>
+            <md-layout md-gutter class="color">
+              <md-layout md-flex="50"></md-layout>
               <md-layout></md-layout>
               <md-layout></md-layout>
               <md-layout></md-layout>
             </md-layout>
 
-            <md-layout :md-gutter="16" class="color">
-              <md-layout :md-flex="33"></md-layout>
+            <md-layout md-gutter class="color">
+              <md-layout md-flex="33"></md-layout>
               <md-layout></md-layout>
             </md-layout>
 
-            <md-layout :md-gutter="16" class="color">
+            <md-layout md-gutter class="color">
               <md-layout></md-layout>
-              <md-layout :md-flex="66"></md-layout>
+              <md-layout md-flex="66"></md-layout>
             </md-layout>
 
-            <md-layout :md-gutter="16" class="color">
-              <md-layout :md-flex="75"></md-layout>
+            <md-layout md-gutter class="color">
+              <md-layout md-flex="75"></md-layout>
               <md-layout></md-layout>
             </md-layout>
 
-            <md-layout :md-gutter="16" class="color">
-              <md-layout :md-flex="50"></md-layout>
+            <md-layout md-gutter class="color">
+              <md-layout md-flex="50"></md-layout>
               <md-layout></md-layout>
               <md-layout></md-layout>
             </md-layout>
@@ -87,14 +145,14 @@
 
         <example-box card-title="Direction">
           <div class="layout-demo grid" slot="demo">
-            <md-layout class="column-size" :md-gutter="16">
-              <md-layout md-column :md-gutter="16" class="color">
-                <md-layout :md-flex="20"></md-layout>
+            <md-layout class="column-size" md-gutter>
+              <md-layout md-column md-gutter class="color">
+                <md-layout md-flex="20"></md-layout>
                 <md-layout></md-layout>
               </md-layout>
 
-              <md-layout md-column :md-gutter="16" class="color">
-                <md-layout :md-flex="50"></md-layout>
+              <md-layout md-column md-gutter class="color">
+                <md-layout md-flex="50"></md-layout>
                 <md-layout></md-layout>
                 <md-layout></md-layout>
               </md-layout>
@@ -114,21 +172,22 @@
 
 <style lang="scss" scoped>
   .layout-demo {
-    min-height: 200px;
+    min-height: 100px;
   }
 
-  .no-gutter > .md-layout:last-child:after {
+  .no-gutter > .md-layout:last-child:before {
     background-color: rgba(#000, .2) !important;
   }
 
-  .grid {
-    .md-layout:not(.md-column) {
-      height: 40px;
+  .grid > .md-layout {
+    > .md-layout:not(.md-column) {
+      min-height: 40px;
+      margin-bottom: 16px;
     }
+  }
 
-    > .md-layout:not(.md-column) + .md-layout {
-      margin-top: 16px;
-    }
+  .grid-content {
+    padding: 16px;
   }
 
   .color {
@@ -137,12 +196,12 @@
     @each $item in $sizes {
       $size: $item / 2 + px;
 
-      &:not(.md-column).md-gutter-#{$item} > .md-layout:after {
+      &:not(.md-column).md-gutter-#{$item} > .md-layout:before {
         right: $size;
         left: $size;
       }
 
-      &.md-column.md-gutter-#{$item} > .md-layout:after {
+      &.md-column.md-gutter-#{$item} > .md-layout:before {
         top: $size;
         bottom: $size;
       }
@@ -151,12 +210,12 @@
     > .md-layout {
       position: relative;
 
-      &:after {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+      &:before {
+        width: 100%;
+        height: 100%;
+        margin-bottom: -200%;
+        display: block;
+        pointer-events: none;
         background-color: rgba(#000, .12);
         content: " ";
       }
@@ -170,4 +229,36 @@
       margin-top: 48px !important;
     }
   }
+
+  .color-red:before {
+    background-color: #F44336 !important;
+  }
+
+  .color-blue:before {
+    background-color: #2196F3 !important;
+  }
+
+  .color-yellow:before {
+    background-color: #FFEB3B !important;
+  }
+
+  .color-green:before {
+    background-color: #4CAF50 !important;
+  }
+
+  .color-purple:before {
+    background-color: #9C27B0 !important;
+  }
+
+  .color-pink:before {
+    background-color: #E91E63 !important;
+  }
+
+  .color-teal:before {
+    background-color: #009688 !important;
+  }
+
+  .color-orange:before {
+    background-color: #FF9800 !important;
+  }
 </style>
diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss
index 0582056..102cd73 100644
--- a/src/components/mdLayout/mdLayout.scss
+++ b/src/components/mdLayout/mdLayout.scss
@@ -7,6 +7,7 @@
 .md-layout {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   flex: 1;
 }
 
@@ -33,13 +34,8 @@
 
 /* Gutter Size */
 
-$sizes: (8, 16, 24, 40);
-
-@each $item in $sizes {
-  $padding: $item / 2 + px;
-  $margin: -$item / 2 + px;
-
-  .md-gutter-#{$item}:not(.md-column) {
+@mixin layout-gutter($margin: -12px, $padding: 12px) {
+  &:not(.md-column) {
     margin-right: $margin;
     margin-left: $margin;
 
@@ -49,7 +45,7 @@ $sizes: (8, 16, 24, 40);
     }
   }
 
-  .md-column.md-gutter-#{$item} {
+  .md-column {
     margin-top: $margin;
     margin-bottom: $margin;
 
@@ -60,6 +56,25 @@ $sizes: (8, 16, 24, 40);
   }
 }
 
+.md-gutter {
+  @include layout-gutter();
+
+  @include layout-small {
+    @include layout-gutter(-8px, 8px);
+  }
+}
+
+$sizes: (8, 16, 24, 40);
+
+@each $item in $sizes {
+  $margin: -$item / 2 + px;
+  $padding: $item / 2 + px;
+
+  .md-gutter-#{$item} {
+    @include layout-gutter($margin, $padding);
+  }
+}
+
 
 /* Flex Size */
 
@@ -73,14 +88,18 @@ $sizes: (8, 16, 24, 40);
   }
 
   .md-flex#{$size} {
-    flex: 1;
+    flex: 1 1;
   }
 
   .md-flex#{$size}-33 {
+    min-width: 33.33333%;
+    max-width: 33.33333%;
     flex: 0 1 33.33333%;
   }
 
   .md-flex#{$size}-66 {
+    min-width: 33.33333%;
+    max-width: 33.33333%;
     flex: 0 1 66.66666%;
   }
 
@@ -88,6 +107,8 @@ $sizes: (8, 16, 24, 40);
     $counter: $i * 5;
 
     .md-flex#{$size}-#{$counter} {
+      min-width: #{$counter + '%'};
+      max-width: #{$counter + '%'};
       flex: 0 1 #{$counter + '%'};
     }
   }
diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue
index b85ef43..9376f59 100644
--- a/src/components/mdLayout/mdLayout.vue
+++ b/src/components/mdLayout/mdLayout.vue
@@ -24,13 +24,13 @@
       mdHideMedium: Boolean,
       mdHideLarge: Boolean,
       mdHideXlarge: Boolean,
-      mdGutter: [Number, Boolean],
-      mdFlex: [Number, Boolean],
-      mdFlexXsmall: Number,
-      mdFlexSmall: Number,
-      mdFlexMedium: Number,
-      mdFlexLarge: Number,
-      mdFlexXlarge: Number
+      mdGutter: [String, Number, Boolean],
+      mdFlex: [String, Number, Boolean],
+      mdFlexXsmall: [String, Number, Boolean],
+      mdFlexSmall: [String, Number, Boolean],
+      mdFlexMedium: [String, Number, Boolean],
+      mdFlexLarge: [String, Number, Boolean],
+      mdFlexXlarge: [String, Number, Boolean]
     },
     computed: {
       classes() {
@@ -51,18 +51,13 @@
           'md-hide-small': this.mdHideSmall,
           'md-hide-medium': this.mdHideMedium,
           'md-hide-large': this.mdHideLarge,
-          'md-hide-xlarge': this.mdHideXlarge,
-          'md-flex-xsmall': this.mdFlexXsmall,
-          'md-flex-small': this.mdFlexSmall,
-          'md-flex-medium': this.mdFlexMedium,
-          'md-flex-large': this.mdFlexLarge,
-          'md-flex-xlarge': this.mdFlexXlarge
+          'md-hide-xlarge': this.mdHideXlarge
         };
 
         if (this.mdGutter) {
           if (typeof this.mdGutter === 'boolean') {
-            classes['md-gutter-8'] = true;
-          } else {
+            classes['md-gutter'] = true;
+          } else if (this.mdGutter) {
             classes['md-gutter-' + this.mdGutter] = true;
           }
         }
@@ -87,7 +82,7 @@
           if (typeof this[name] === 'boolean') {
             object['md-flex' + size] = true;
           } else {
-            object['md-flex-' + size + this[name]] = true;
+            object['md-flex' + size + '-' + this[name]] = true;
           }
         }
       }
diff --git a/src/components/mdTable/mdTablePagination.vue b/src/components/mdTable/mdTablePagination.vue
index 9f0ee3b..ffe8433 100644
--- a/src/components/mdTable/mdTablePagination.vue
+++ b/src/components/mdTable/mdTablePagination.vue
@@ -48,7 +48,7 @@
         subTotal: 0,
         currentSize: parseInt(this.mdSize, 10),
         currentPage: parseInt(this.mdPage, 10),
-        totalItems: isNaN(this.mdTotal)?Number.MAX_SAFE_INTEGER:parseInt(this.mdTotal, 10)
+        totalItems: isNaN(this.mdTotal) ? Number.MAX_SAFE_INTEGER : parseInt(this.mdTotal, 10)
       };
     },
     computed: {
diff --git a/src/core/stylesheets/variables.scss b/src/core/stylesheets/variables.scss
index 0001180..1086d8b 100644
--- a/src/core/stylesheets/variables.scss
+++ b/src/core/stylesheets/variables.scss
@@ -6,10 +6,9 @@ $font-roboto: Roboto, Lato, sans-serif;
 /* Responsive Breakpoints */
 
 $breakpoint-xsmall: 600px !default;
-$breakpoint-small: 1024px !default;
-$breakpoint-medium: 1440px !default;
-$breakpoint-large: 1600px !default;
-$breakpoint-xlarge: 1920px !default;
+$breakpoint-small: 960px !default;
+$breakpoint-medium: 1280px !default;
+$breakpoint-large: 1920px !default;
 
 
 /* Transitions - Based on Angular Material */