fix(layout-app): allow main content to shrink

stasson · Oct 23, 2017 · ba21537 · ba21537
1 parent 4964b91
commit ba21537
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 20 deletions.
diff --git a/components/layout-app/mdc-layout-app.scss b/components/layout-app/mdc-layout-app.scss
@@ -23,14 +23,15 @@
 
   .mdc-layout-app--drawer-wrapper {
     order: -1;
+    flex: 0 1 auto;
 
     .mdc-drawer {
       height:100%;
     }
   } 
 
   .mdc-layout-app--content-wrapper {
-    flex: 1;
+    flex: 1 1 auto;
   } 
 
 }
diff --git a/demo/index.html b/demo/index.html
@@ -2,7 +2,8 @@
 <html lang="en" class="mdc-typography">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
+
     <title>Vue Material Components</title>
     <link rel="icon" href="favicon.ico" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">

diff --git a/demo/index.vue b/demo/index.vue
@@ -13,16 +13,6 @@
 </template>
 
 
-<style>
-.content {
-  padding: 8px 16px;
-  margin:16px auto 16px auto;
-  max-width : 800px;
-  min-width : 600px;
-}
-
-</style>
-
 <script>
 import toolbar from './toolbar.vue'
 import drawer from './drawer.vue'

diff --git a/demo/styles.scss b/demo/styles.scss
@@ -5,14 +5,24 @@
   font-size:1rem;  
 }
 
+.content {
+  padding: 8px 16px;
+  margin:16px auto 16px auto;
+  max-width : 800px;
+  min-width : 250px;
+}
+
 .demo-article {
   display:flex;
   justify-content: flex-start;
   align-items: flex-start;
   align-content: stretch;
-  // background-color: #f7f7f7;
   min-height: 50px;
   padding: 8px;
+
+  .mdc-demo {
+    flex: 1 1 auto;
+  }
 }
 
 .doc-article {
@@ -37,39 +47,32 @@
   h1 {
     @include mdc-typography(display1) 
     margin-top: 32px;
-    // @include mdc-typography-adjust-margin(display1) 
   }
 
 
   h2 {
     margin-top: 24px;
     @include mdc-typography(headline) 
-    // @include mdc-typography-adjust-margin(headline) 
   }
 
   h3 {
     margin-top: 16px;
     @include mdc-typography(title) 
-    // @include mdc-typography-adjust-margin(title) 
   }
 
   h4 {
     @include mdc-typography(subheading2) 
-    // @include mdc-typography-adjust-margin(subheading2) 
   }
 
   h5, h6 {
     @include mdc-typography(subheading1) 
-    // @include mdc-typography-adjust-margin(subheading1) 
   }
 
   p {
     @include mdc-typography(body1) 
-    // @include mdc-typography-adjust-margin(body1) 
   }
 
   blockquote {
-    // @include mdc-typography-adjust-margin(body2) 
 
     margin: 24px 0px;
     padding: 0 1em;