From 368cd94d7be5282c98ef7932742e3093440f18f9 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 12 Aug 2015 22:39:53 -0500
Subject: [PATCH] small aside width

---
 ionic/components/app/test/tap/index.ts        |  2 +-
 ionic/components/aside/aside.scss             | 33 ++++++++++---
 ionic/components/aside/test/basic/e2e.ts      |  4 +-
 .../aside/test/basic/home-page.html           | 24 ++++++++++
 ionic/components/aside/test/basic/index.ts    | 20 ++++++--
 ionic/components/aside/test/basic/main.html   | 47 ++++++++-----------
 ionic/components/button/test/basic/index.ts   |  2 +-
 ionic/components/button/test/block/index.ts   |  2 +-
 ionic/components/button/test/clear/index.ts   |  2 +-
 ionic/components/button/test/fab/index.ts     |  2 +-
 ionic/components/button/test/full/index.ts    |  2 +-
 ionic/components/button/test/icons/index.ts   |  2 +-
 ionic/components/button/test/outline/index.ts |  2 +-
 ionic/components/button/test/round/index.ts   |  2 +-
 ionic/components/button/test/sizes/index.ts   |  2 +-
 ionic/components/card/test/basic/index.ts     |  2 +-
 ionic/components/card/test/images/index.ts    |  2 +-
 ionic/components/card/test/links/index.ts     |  2 +-
 ionic/components/item/test/buttons/index.ts   |  2 +-
 ionic/components/item/test/icons/index.ts     |  2 +-
 ionic/components/item/test/media/index.ts     |  2 +-
 ionic/components/item/test/text/index.ts      |  2 +-
 .../list/test/headers-footers/index.ts        |  2 +-
 ionic/components/list/test/inset/index.ts     |  2 +-
 ionic/components/tabs/test/advanced/index.ts  |  2 +-
 ionic/components/tabs/test/basic/index.ts     |  2 +-
 .../tabs/test/tab-bar-bottom/index.ts         |  2 +-
 .../tabs/test/tab-bar-scenarios/index.ts      |  2 +-
 .../components/tabs/test/tab-bar-top/index.ts |  2 +-
 .../test/fixed-inline-labels/index.ts         |  2 +-
 .../text-input/test/inline-labels/index.ts    |  2 +-
 .../text-input/test/inset-inputs/index.ts     |  2 +-
 .../test/placeholder-labels/index.ts          |  2 +-
 .../text-input/test/stacked-labels/index.ts   |  2 +-
 .../toolbar/test/scenarios/index.ts           |  2 +-
 ionic/components/toolbar/toolbar.scss         |  2 +-
 36 files changed, 120 insertions(+), 70 deletions(-)
 create mode 100644 ionic/components/aside/test/basic/home-page.html

diff --git a/ionic/components/app/test/tap/index.ts b/ionic/components/app/test/tap/index.ts
index 312140ef6a..170ff78341 100644
--- a/ionic/components/app/test/tap/index.ts
+++ b/ionic/components/app/test/tap/index.ts
@@ -4,7 +4,7 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
 
 
 function onEvent(ev) {
diff --git a/ionic/components/aside/aside.scss b/ionic/components/aside/aside.scss
index 7c3e6a4576..64b682c6ec 100644
--- a/ionic/components/aside/aside.scss
+++ b/ionic/components/aside/aside.scss
@@ -3,10 +3,11 @@
 // --------------------------------------------------
 
 $aside-width: 304px !default;
-$aside-height: 304px !default;
+$aside-small-width: $aside-width - 40px !default;
+
 $aside-transition: 0.2s ease transform !default;
-$aside-background: #fff !default;
-$aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default;
+$aside-background: $background-color !default;
+$aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
 
 
 .aside {
@@ -14,12 +15,12 @@ $aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !def
   top: 0;
   bottom: 0;
 
+  left: -$aside-width;
+  width: $aside-width;
+
   display: flex;
   flex-direction: column;
 
-  width: $aside-width;
-  left: -$aside-width;
-
   background: $aside-background;
 
   transform: translate3d(0, 0, 0);
@@ -101,3 +102,23 @@ $aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !def
     transform: translate3d(-$aside-width,0,0);
   }
 }
+
+
+@media (max-width: 340px) {
+
+  .aside {
+    left: -$aside-small-width;
+    width: $aside-small-width;
+  }
+
+  .aside-content {
+    &.aside-open-left {
+      transform: translate3d($aside-small-width, 0, 0);
+    }
+
+    &.aside-open-right {
+      transform: translate3d(-$aside-small-width, 0, 0);
+    }
+  }
+
+}
diff --git a/ionic/components/aside/test/basic/e2e.ts b/ionic/components/aside/test/basic/e2e.ts
index 8473849441..abfeaa989e 100644
--- a/ionic/components/aside/test/basic/e2e.ts
+++ b/ionic/components/aside/test/basic/e2e.ts
@@ -1,9 +1,9 @@
 
 it('should toggle open aside', function() {
-  element(by.css('#e2eToggleAside')).click();
+  element(by.css('#e2eContentToggleAside')).click();
 });
 
 
 it('should toggle close aside', function() {
-  element(by.css('#e2eToggleAside')).click();
+  element(by.css('#e2eHeaderToggleAside')).click();
 });
diff --git a/ionic/components/aside/test/basic/home-page.html b/ionic/components/aside/test/basic/home-page.html
new file mode 100644
index 0000000000..efecb84d9f
--- /dev/null
+++ b/ionic/components/aside/test/basic/home-page.html
@@ -0,0 +1,24 @@
+
+<ion-navbar *navbar>
+
+  <ion-nav-items primary>
+    <button (^click)="toggleAside()" id="e2eHeaderToggleAside">
+      <icon name="ion-navicon"></icon>
+    </button>
+  </ion-nav-items>
+
+  <ion-title>
+    Aside
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content #content class="padding">
+
+  <h3>Content</h3>
+
+  <p>
+    <button id="e2eContentToggleAside" (click)="toggleAside()">Toggle Aside</button>
+  </p>
+
+</ion-content>
diff --git a/ionic/components/aside/test/basic/index.ts b/ionic/components/aside/test/basic/index.ts
index eb40efdc90..18c75f03ee 100644
--- a/ionic/components/aside/test/basic/index.ts
+++ b/ionic/components/aside/test/basic/index.ts
@@ -1,10 +1,10 @@
-import {App, IonicApp} from 'ionic/ionic';
+import {App, IonicApp, IonicView, NavController} from 'ionic/ionic';
 
 
-@App({
-  templateUrl: 'main.html'
+@IonicView({
+  templateUrl: 'home-page.html'
 })
-class E2EApp {
+class HomePage {
 
   constructor(app: IonicApp) {
     this.app = app;
@@ -16,3 +16,15 @@ class E2EApp {
   }
 
 }
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+
+  constructor() {
+    this.rootView = HomePage;
+  }
+
+}
diff --git a/ionic/components/aside/test/basic/main.html b/ionic/components/aside/test/basic/main.html
index 8716017aa7..b996641e25 100644
--- a/ionic/components/aside/test/basic/main.html
+++ b/ionic/components/aside/test/basic/main.html
@@ -1,30 +1,23 @@
-<ion-view>
 
-  <ion-aside #aside [content]="content" [register]="aside" register-id="mainMenu">
-    <ion-list>
-      <ion-item>
-        About
-      </ion-item>
-      <ion-item>
-        Specials
-      </ion-item>
-      <ion-item>
-        Beer
-      </ion-item>
-      <ion-item>
-        Potatoes
-      </ion-item>
-    </ion-list>
-  </ion-aside>
+<ion-aside #aside [content]="content" [register]="aside" register-id="mainMenu">
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+  <ion-list>
+    <ion-item>
+      About
+    </ion-item>
+    <ion-item>
+      Specials
+    </ion-item>
+    <ion-item>
+      Beer
+    </ion-item>
+    <ion-item>
+      Potatoes
+    </ion-item>
+  </ion-list>
+</ion-aside>
 
-  <ion-content #content class="padding">
 
-    <h2>Content</h2>
-
-    <p>
-      <button id="e2eToggleAside" (click)="toggleAside()">Toggle Aside</button>
-    </p>
-
-  </ion-content>
-
-</ion-view>
+<ion-nav [root]="rootView" #content [register]="content" register-id="myNav" swipe-back-enabled="false"></ion-nav>
diff --git a/ionic/components/button/test/basic/index.ts b/ionic/components/button/test/basic/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/button/test/basic/index.ts
+++ b/ionic/components/button/test/basic/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/button/test/block/index.ts b/ionic/components/button/test/block/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/button/test/block/index.ts
+++ b/ionic/components/button/test/block/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/button/test/clear/index.ts b/ionic/components/button/test/clear/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/button/test/clear/index.ts
+++ b/ionic/components/button/test/clear/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/button/test/fab/index.ts b/ionic/components/button/test/fab/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/button/test/fab/index.ts
+++ b/ionic/components/button/test/fab/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/button/test/full/index.ts b/ionic/components/button/test/full/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/button/test/full/index.ts
+++ b/ionic/components/button/test/full/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/button/test/icons/index.ts b/ionic/components/button/test/icons/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/button/test/icons/index.ts
+++ b/ionic/components/button/test/icons/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/button/test/outline/index.ts b/ionic/components/button/test/outline/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/button/test/outline/index.ts
+++ b/ionic/components/button/test/outline/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/button/test/round/index.ts b/ionic/components/button/test/round/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/button/test/round/index.ts
+++ b/ionic/components/button/test/round/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/button/test/sizes/index.ts b/ionic/components/button/test/sizes/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/button/test/sizes/index.ts
+++ b/ionic/components/button/test/sizes/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/card/test/basic/index.ts b/ionic/components/card/test/basic/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/card/test/basic/index.ts
+++ b/ionic/components/card/test/basic/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/card/test/images/index.ts b/ionic/components/card/test/images/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/card/test/images/index.ts
+++ b/ionic/components/card/test/images/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/card/test/links/index.ts b/ionic/components/card/test/links/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/card/test/links/index.ts
+++ b/ionic/components/card/test/links/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/item/test/buttons/index.ts b/ionic/components/item/test/buttons/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/item/test/buttons/index.ts
+++ b/ionic/components/item/test/buttons/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/item/test/icons/index.ts b/ionic/components/item/test/icons/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/item/test/icons/index.ts
+++ b/ionic/components/item/test/icons/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/item/test/media/index.ts b/ionic/components/item/test/media/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/item/test/media/index.ts
+++ b/ionic/components/item/test/media/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/item/test/text/index.ts b/ionic/components/item/test/text/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/item/test/text/index.ts
+++ b/ionic/components/item/test/text/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/list/test/headers-footers/index.ts b/ionic/components/list/test/headers-footers/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/list/test/headers-footers/index.ts
+++ b/ionic/components/list/test/headers-footers/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/list/test/inset/index.ts b/ionic/components/list/test/inset/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/list/test/inset/index.ts
+++ b/ionic/components/list/test/inset/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/tabs/test/advanced/index.ts b/ionic/components/tabs/test/advanced/index.ts
index 2ed5f66dc2..43062ac2d9 100644
--- a/ionic/components/tabs/test/advanced/index.ts
+++ b/ionic/components/tabs/test/advanced/index.ts
@@ -193,4 +193,4 @@ class Tab3Page1 {}
     }
   ]
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/tabs/test/basic/index.ts
+++ b/ionic/components/tabs/test/basic/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/tabs/test/tab-bar-bottom/index.ts b/ionic/components/tabs/test/tab-bar-bottom/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/tabs/test/tab-bar-bottom/index.ts
+++ b/ionic/components/tabs/test/tab-bar-bottom/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/tabs/test/tab-bar-scenarios/index.ts b/ionic/components/tabs/test/tab-bar-scenarios/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/tabs/test/tab-bar-scenarios/index.ts
+++ b/ionic/components/tabs/test/tab-bar-scenarios/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/tabs/test/tab-bar-top/index.ts b/ionic/components/tabs/test/tab-bar-top/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/tabs/test/tab-bar-top/index.ts
+++ b/ionic/components/tabs/test/tab-bar-top/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/text-input/test/fixed-inline-labels/index.ts b/ionic/components/text-input/test/fixed-inline-labels/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/text-input/test/fixed-inline-labels/index.ts
+++ b/ionic/components/text-input/test/fixed-inline-labels/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/text-input/test/inline-labels/index.ts b/ionic/components/text-input/test/inline-labels/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/text-input/test/inline-labels/index.ts
+++ b/ionic/components/text-input/test/inline-labels/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/text-input/test/inset-inputs/index.ts b/ionic/components/text-input/test/inset-inputs/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/text-input/test/inset-inputs/index.ts
+++ b/ionic/components/text-input/test/inset-inputs/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/text-input/test/placeholder-labels/index.ts b/ionic/components/text-input/test/placeholder-labels/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/text-input/test/placeholder-labels/index.ts
+++ b/ionic/components/text-input/test/placeholder-labels/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/text-input/test/stacked-labels/index.ts b/ionic/components/text-input/test/stacked-labels/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/text-input/test/stacked-labels/index.ts
+++ b/ionic/components/text-input/test/stacked-labels/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/toolbar/test/scenarios/index.ts b/ionic/components/toolbar/test/scenarios/index.ts
index 2dac2b7a35..43aed36502 100644
--- a/ionic/components/toolbar/test/scenarios/index.ts
+++ b/ionic/components/toolbar/test/scenarios/index.ts
@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 516d6eb4a9..d377e98e4e 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -95,7 +95,7 @@ ion-title {
 
   .toolbar[#{$color-name}] {
     background-color: $color-value;
-    border-color: darken($color-value, 15%);
+    border-color: darken($color-value, 10%);
 
     ion-title,
     button,