Hacker news

ionic/components/app/test/hn/main.html

@@ -1,2 +1,11 @@
 <ion-nav [initial]="splashPage">
 </ion-nav>
+
+<style>
+.toolbar-container {
+  background-color: #ff6600 !important;
+}
+.toolbar-ios ion-title {
+  color: #fff !important;
+}
+</style>

ionic/components/app/test/hn/pages/single.html

@@ -1,5 +1,5 @@
-<ion-view [view-title]="post.title">
-  <ion-content>
-    <h2>SINGLE</h2>
-  </ion-content>
-</ion-view>
+<ion-toolbar *header><ion-title>{{post.title}}</ion-title></ion-toolbar>
+<ion-content>
+  <iframe style="width: 100%; height: 100%" src="{{post.url}}">
+  </iframe>
+</ion-content>

ionic/components/app/test/hn/pages/single.js

@@ -1,15 +1,26 @@
-import {For, Ancestor, Descendent, Parent, NgElement, Component, View, bootstrap} from 'angular2/angular2';
-import {Content, Nav, NavPane, List, Item} from 'ionic/ionic';
+import {NgFor, bootstrap} from 'angular2/angular2';
 
-import {HackerNews} from 'hn'
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {NavController, NavParams, HeaderTemplate, Toolbar, Content, Nav, NavPane, List, Item} from 'ionic/ionic';
+
+import {HackerNews} from '../hn'
 
 @Component({ selector: 'top-stories' })
 @View({
-  templateUrl: 'pages/top.html',
-  directives: [Content, For, List, Item]
+  templateUrl: 'pages/single.html',
+  directives: [HeaderTemplate, Toolbar, Content, NgFor, List, Item]
 })
 export class HNSinglePost {
-  constructor(@Parent() viewport: Nav) {//, @Ancestor() app: HNApp) {
-    console.log('SINGLE');
+  constructor(
+    nav: NavController,
+    params: NavParams
+  ) {
+    this.nav = nav;
+    this.post = params;
+    console.log('SINGLE', params);
   }
 }

ionic/components/app/test/hn/pages/top.html

@@ -2,6 +2,8 @@
 
 <ion-content class="padding">
 
-  <ion-list><ion-item *ng-for="#story of stories">{{story.title}}</ion-item></ion-list>
+  <ion-list inset>
+    <ion-item *ng-for="#story of stories" (^click)="openStory(story)">{{story.title}}</ion-item>
+  </ion-list>
 
 </ion-content>

ionic/components/app/test/hn/pages/top.js

@@ -7,21 +7,39 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {NavController, HeaderTemplate, Toolbar, Content, List, Item} from 'ionic/ionic';
 
-import {HackerNews} from '../hn'
+import {HackerNews} from '../hn';
+import {HNSinglePost} from './single';
 
 console.log('Angular directives', NgFor, Content, List, Item);
 
+@Component({
+  selector: 'story'
+})
+@View({
+  template: '<div class="hn-story"><content></content></div>'
+})
+export class Story {
+  constructor() {
+
+  }
+}
+
 @Component({
   selector: 'top-stories'
 })
 @View({
   templateUrl: 'pages/top.html',
-  directives: [HeaderTemplate, Toolbar, Content, NgFor, List, Item]
+  directives: [HeaderTemplate, Toolbar, Content, NgFor, List, Story, Item]
 })
 export class HNTopStories {
-  constructor() {
+  constructor(
+    nav: NavController
+  ) {
+    this.nav = nav;
 
-    this.stories = [{
+    this.stories = [
+      /*
+    {
       by: "FatalLogic",
       descendants: 77,
       id: 9444675,
@@ -32,7 +50,8 @@ export class HNTopStories {
       title: "Under Pressure",
       type: "story",
       url: "http://minusbat.livejournal.com/180556.html"
-    }];
+    }*/
+    ];
 
     var APIUrl = 'https://hacker-news.firebaseio.com/v0';
 
@@ -57,6 +76,12 @@ export class HNTopStories {
     //doStuffEnd
   }
 
+  openStory(story) {
+    console.log('Opening story', story);
+
+    this.nav.push(HNSinglePost, story);
+  }
+
   /*
   HackerNews.getTopStories((val) => {
     new Promise((resolve, reject) => {

ionic/components/item/item.js

@@ -18,20 +18,24 @@ import {
 })
 @View({
   template: `
+    <!--
     <content select="ion-primary-options"></content>
     <content select="ion-primary-swipe-buttons"></content>
+    -->
     <div class="item-content">
       <div class="item-media">
       </div>
       <div class="item-accessory">
-        <content select="ion-item-accessory"></content>
+        <!--<content select="ion-item-accessory"></content>-->
       </div>
       <div class="item-label">
         <content></content>
       </div>
     </div>
+    <!--
     <content select="ion-secondary-options"></content>
     <content select="ion-secondary-swipe-buttons"></content>
+    -->
   `,
   directives: [
     ItemPrimarySwipeButtons,

ionic/components/list/list.scss

@@ -28,6 +28,7 @@ $list-margin-bottom:          10px !default;
   list-style-type: none;
 
   &.list-inset {
+    margin-top: 0;
     margin-left: -$content-padding;
     margin-right: -$content-padding;
   }