small aside width

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) {

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-background: $background-color !default;
-$aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !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);
+    }
+  }
+
+}

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();
 });

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>

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({
+@IonicView({
-  templateUrl: 'main.html'
+  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;
+  }
+
+}

ionic/components/aside/test/basic/main.html

@@ -1,30 +1,23 @@
-<ion-view>
 
-  <ion-aside #aside [content]="content" [register]="aside" register-id="mainMenu">
+<ion-aside #aside [content]="content" [register]="aside" register-id="mainMenu">
-    <ion-list>
+  <ion-toolbar secondary>
-      <ion-item>
+    <ion-title>Left Menu</ion-title>
-        About
+  </ion-toolbar>
-      </ion-item>
+  <ion-list>
-      <ion-item>
+    <ion-item>
-        Specials
+      About
-      </ion-item>
+    </ion-item>
-      <ion-item>
+    <ion-item>
-        Beer
+      Specials
-      </ion-item>
+    </ion-item>
-      <ion-item>
+    <ion-item>
-        Potatoes
+      Beer
-      </ion-item>
+    </ion-item>
-    </ion-list>
+    <ion-item>
-  </ion-aside>
+      Potatoes
+    </ion-item>
+  </ion-list>
+</ion-aside>
 
-  <ion-content #content class="padding">
 
-    <h2>Content</h2>
+<ion-nav [root]="rootView" #content [register]="content" register-id="myNav" swipe-back-enabled="false"></ion-nav>
-
-    <p>
-      <button id="e2eToggleAside" (click)="toggleAside()">Toggle Aside</button>
-    </p>
-
-  </ion-content>
-
-</ion-view>

ionic/components/button/test/basic/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/button/test/block/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/button/test/clear/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/button/test/fab/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/button/test/full/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/button/test/icons/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/button/test/outline/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/button/test/round/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/button/test/sizes/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/card/test/basic/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/card/test/images/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/card/test/links/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/item/test/buttons/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/item/test/icons/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/item/test/media/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/item/test/text/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

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 {}

ionic/components/list/test/inset/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/tabs/test/advanced/index.ts

@@ -193,4 +193,4 @@ class Tab3Page1 {}
     }
   ]
 })
-class IonicApp {}
+class E2EApp {}

ionic/components/tabs/test/basic/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

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 {}

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 {}

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 {}

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 {}

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 {}

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 {}

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 {}

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 {}

ionic/components/toolbar/test/scenarios/index.ts

@@ -4,4 +4,4 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {}
+class E2EApp {}

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,