From 710b4a3503ab12d74bfac6bf0df28bb96fe9e8bd Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Mon, 24 Apr 2017 22:03:05 -0700
Subject: [PATCH] feat(aio): layout max width and design cleanup

- Content container now has a max width and made the body background the same offwhite color so the cut-off is not visible
- Sidenav will always remain at the left of the page
- Added a max width to the api banner of filter search inputs
- Left aligned content container so it is flush with sidenav
- Changed API filter width to match size of filter results
---
 aio/src/app/embedded/api/api-list.component.html | 2 +-
 aio/src/styles/1-layouts/_layout-global.scss     | 4 ++++
 aio/src/styles/1-layouts/_sidenav.scss           | 4 +++-
 aio/src/styles/2-modules/_api-list.scss          | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/aio/src/app/embedded/api/api-list.component.html b/aio/src/app/embedded/api/api-list.component.html
index 9f67fa587a..2a8df1f239 100644
--- a/aio/src/app/embedded/api/api-list.component.html
+++ b/aio/src/app/embedded/api/api-list.component.html
@@ -1,4 +1,4 @@
-<div class="l-flex-wrap banner is-plain api-filter">
+<div class="l-flex-wrap banner is-plain l-content-small api-filter">
 
   <div class="form-select-menu">
     <button class="form-select-button has-symbol" (click)="toggleTypeMenu()">
diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss
index faee1cfde1..b74c42f2c7 100644
--- a/aio/src/styles/1-layouts/_layout-global.scss
+++ b/aio/src/styles/1-layouts/_layout-global.scss
@@ -2,6 +2,10 @@ html, body {
     height: 100%;
 }
 
+body {
+    background-color: $offwhite;
+}
+
 .clearfix {
     content: "";
     display: table;
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index a968d28ec9..2e0fec1cbb 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -17,6 +17,7 @@ aio-nav-menu.top-menu .vertical-menu-item  {
 md-sidenav.mat-sidenav.sidenav {
   position: fixed;
   bottom: 0;
+  left: 0;
   padding: 80px 0px 0px;
   min-width: 260px;
   background-color: $offwhite;
@@ -30,7 +31,8 @@ md-sidenav.mat-sidenav.sidenav.collapsed {
 md-sidenav-container.sidenav-container {
     min-height: 100%;
     height: auto !important;
-    margin: 0 auto;
+    max-width: 1400px;
+    margin: 0;
     transform: none;
     padding-top: 64px;
 }
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index f463ba9be6..13cc544d4d 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -18,7 +18,7 @@ aio-api-list {
         width: 182px;
     }
 
-    .banner {
+    .api-filter.banner {
         border: 1px solid rgba($lightgray, 0.5);
         border-radius: 4px;
     }