fix(examples): remove horizontal scroll on small phone screens

- and some other visual jank associated with layout changes
justindujardin · Jan 1, 2016 · 22c4521 · 22c4521
1 parent bcadb41
commit 22c4521
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/examples/app.html b/examples/app.html
@@ -44,7 +44,7 @@
        layout="row" layout-align="start center"
        [routerLink]="navigation.prevLink.routeLink">
       <i md-icon>arrow_back</i>
-      <span layout="column" hide-sm>
+      <span layout="column" show-gt-sm hide>
         <span class="label">Previous</span>
         <span class="name md-title">{{navigation.prevLink.brief}}</span>
       </span>
@@ -55,7 +55,7 @@
        [routerLink]="navigation.nextLink.routeLink">
       <span layout="column">
         <span class="label">Next</span>
-        <span class="name md-title">{{navigation.nextLink.brief}}</span>
+        <div class="name md-title">{{navigation.nextLink.brief}}</div>
       </span>
       <i md-icon>arrow_forward</i>
     </a>

diff --git a/examples/app.scss b/examples/app.scss
@@ -38,6 +38,7 @@ demos-app {
       }
       @media screen and (max-width: $layout-breakpoint-sm) {
         width: $app-content-sm;
+        margin: 0;
       }
 
       a.previous, a.next {
@@ -56,7 +57,11 @@ demos-app {
           white-space: nowrap;
         }
         i {
+          height:47px;
+          height: 47px;
           padding-top: 24px;
+          margin: 0 10px;
+          vertical-align:bottom;
         }
       }
       .previous {
@@ -118,14 +123,13 @@ demos-app {
       @include md-tall-toolbar();
       h1 {
         font-size: $title-font-size-base;
-        width: $app-content-sm;
+        width: $app-content-sm - 80px;
         margin-left: 0;
       }
     }
   }
 
   md-content {
-    max-width: 800px;
     > section {
       > h1 {
         margin-top: rem(6);

diff --git a/examples/example.scss b/examples/example.scss
@@ -6,9 +6,9 @@
 .demo-container {
   .demo-toolbar {
     button[md-button] {
-      color: rgba(255,255,255,0.6);
+      color: rgba(255, 255, 255, 0.6);
       &.active {
-        color: rgba(255,255,255,0.9);
+        color: rgba(255, 255, 255, 0.9);
       }
     }
 
@@ -17,10 +17,13 @@
 
 .layout-content,
 .doc-content {
-  max-width: 864px;
   min-width: 300px;
   margin: 16px;
   box-sizing: border-box;
+  @media screen and (max-width: $layout-breakpoint-sm) {
+    margin: 0;
+  }
+
 }
 
 docs-demo {
@@ -46,7 +49,7 @@ docs-demo {
   -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
   transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
   height: 448px;
-  max-height:0;
+  max-height: 0;
   background: #fff;
   overflow: hidden;
   &.shown {
@@ -55,15 +58,14 @@ docs-demo {
 }
 
 .demo-source-tabs md-tabs-wrapper {
-  background-color: md-color($md-primary,400) !important;
+  background-color: md-color($md-primary, 400) !important;
 }
 
 md-tabs.demo-source-tabs [md-tab],
 md-tabs.demo-source-tabs .md-header {
   background-color: #444444 !important;
 }
 
-
 .demo-source-tabs.ng-hide {
   min-height: 0;
   height: 0;