From 0ae7ade9fa0850ff1f74ceb719f5b21fe805f996 Mon Sep 17 00:00:00 2001
From: Eric Jimenez <eric.jimenez@rangle.io>
Date: Mon, 16 May 2016 13:22:13 -0400
Subject: [PATCH] feat(shorter lines): encapsulate all doc guides within a 10
 sized column, including banners. Use showcase. Adjust for mobile

---
 public/docs/_layout.jade                   | 16 +++++++++++-----
 public/docs/dart/latest/cheatsheet.jade    |  4 ++--
 public/docs/js/latest/cheatsheet.jade      |  4 ++--
 public/resources/css/layout/_grids.scss    | 12 ++++++++++++
 public/resources/css/layout/_layout.scss   |  3 ++-
 public/resources/css/module/_showcase.scss |  1 +
 6 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/public/docs/_layout.jade b/public/docs/_layout.jade
index ba13f435a6..b5fbb2370a 100644
--- a/public/docs/_layout.jade
+++ b/public/docs/_layout.jade
@@ -19,11 +19,17 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
     else if current.path.indexOf('cheatsheet') > 0
       != yield
     else
-      article(class="l-content-small grid-fluid docs-content")
-        != yield
-
-        if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-          != partial("../_includes/_next-item")
+      if current.path[3] == 'index' || current.path[3] == 'styleguide'
+        article(class="l-content-small grid-fluid docs-content")
+          != yield
+      else
+        article(class="l-content-small grid-fluid docs-content")
+          div(class="c10")
+            .showcase.shadow-1
+              .showcase-content
+                != yield
+                  if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
+                    != partial("../_includes/_next-item")
 
     != partial("../_includes/_footer")
     != partial("../_includes/_scripts-include")
\ No newline at end of file
diff --git a/public/docs/dart/latest/cheatsheet.jade b/public/docs/dart/latest/cheatsheet.jade
index 4548cf52e0..694e02b0d2 100644
--- a/public/docs/dart/latest/cheatsheet.jade
+++ b/public/docs/dart/latest/cheatsheet.jade
@@ -1,6 +1,6 @@
 - var base = current.path[4] ? '.' : './guide';
-.banner
-  p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
+.banner.grid-fluid
+  p.text-body.c10 This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
 
 article(class="l-content-small grid-fluid docs-content")
   .cheatsheet
diff --git a/public/docs/js/latest/cheatsheet.jade b/public/docs/js/latest/cheatsheet.jade
index 4548cf52e0..694e02b0d2 100644
--- a/public/docs/js/latest/cheatsheet.jade
+++ b/public/docs/js/latest/cheatsheet.jade
@@ -1,6 +1,6 @@
 - var base = current.path[4] ? '.' : './guide';
-.banner
-  p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
+.banner.grid-fluid
+  p.text-body.c10 This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
 
 article(class="l-content-small grid-fluid docs-content")
   .cheatsheet
diff --git a/public/resources/css/layout/_grids.scss b/public/resources/css/layout/_grids.scss
index 8bf6930084..8e1ab159cd 100644
--- a/public/resources/css/layout/_grids.scss
+++ b/public/resources/css/layout/_grids.scss
@@ -389,6 +389,18 @@ limitations under the License.
     width: auto;
   }
 }
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 480px) {
+  /* line 22, ../scss/_responsive.scss */
+  .grid-fixed .c1, .grid-fixed .c2, .grid-fixed .c3, .grid-fixed .c4, .grid-fixed .c5, .grid-fixed .c6, .grid-fixed .c7, .grid-fixed .c8, .grid-fixed .c9, .grid-fixed .c10, .grid-fixed .c11, .grid-fixed .c12, .grid-fluid .c1, .grid-fluid .c2, .grid-fluid .c3, .grid-fluid .c4, .grid-fluid .c5, .grid-fluid .c6, .grid-fluid .c7, .grid-fluid .c8, .grid-fluid .c9, .grid-fluid .c10, .grid-fluid .c11, .grid-fluid .c12 {
+    margin-left: 0px;
+    margin-right: 0px;
+    float: none;
+    display: block;
+    width: auto;
+  }
+}
+
 @media handheld and (max-width: 900px), screen and (max-width: 900px) {
   /* line 6, ../scss/_responsive.scss */
   .grid-fixed, .grid-fluid {
diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 142259417b..f241808e39 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@@ -103,7 +103,8 @@
   @media handheld and (max-width: $phone-breakpoint),
   screen and (max-device-width: $phone-breakpoint),
   screen and (max-width: $tablet-breakpoint) {
-    padding: ($unit * 3) ($unit * 2);
+    padding: 0;
+    padding-top: ($unit * 3);
   }
 }
 
diff --git a/public/resources/css/module/_showcase.scss b/public/resources/css/module/_showcase.scss
index 26d087317c..5918074e43 100644
--- a/public/resources/css/module/_showcase.scss
+++ b/public/resources/css/module/_showcase.scss
@@ -1,5 +1,6 @@
 .showcase {
   margin-bottom: $unit * 6;
+  border-radius: 4px;
 
   .showcase-header {
     padding: $unit * 4;