reformatted stream

package.json

@@ -36,6 +36,7 @@
     "ionic-angular": "3.3.0",
     "ionic-plugin-keyboard": "^2.2.1",
     "ionicons": "3.0.0",
+    "moment": "^2.18.1",
     "ng2-cordova-oauth": "0.0.8",
     "pnut-butter": "^0.8.1",
     "rxjs": "5.1.1",

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { PostDetailsPage } from '../pages/post-details/post-details';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 import { IonicStorageModule } from '@ionic/storage';
+import { TimeagoPipe } from '../pipes/timeago/timeago';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { IonicStorageModule } from '@ionic/storage';
     ListPage,
     LoginPage,
     StreamPage,
-    PostDetailsPage
+    PostDetailsPage,
+    TimeagoPipe
   ],
   imports: [
     BrowserModule,

src/pages/stream/stream.html

@@ -19,22 +19,46 @@
 <ion-content>
 
   <ion-list>
-    <ion-item *ngFor="let post of posts" (click)="showPostDetails(post)" text-wrap>
+    <ion-card *ngFor="let post of posts">
+      <ion-item>
         <ion-avatar item-start>
           <img src="{{ post.user.content.avatar_image.link }}">
         </ion-avatar>
-      <h1>{{ post.user.username }}</h1>
+        <h2>{{ post.user.name }}</h2>
+        <p>@{{ post.user.username }}</p>
+        <ion-note item-end>{{ post.created_at | timeago }}</ion-note>
+      </ion-item>
+      <ion-card-content>
         <p>{{ post.is_deleted ? '{post deleted}' : post.content.text }}</p>
+      </ion-card-content>
       <div *ngIf="post.raw">
         <div *ngFor="let r of post.raw">
           <div *ngIf="r.type == 'io.pnut.core.oembed'">
-            <ion-thumbnail>
             <img src="{{ r.value.url }}">
-            </ion-thumbnail>
           </div>
         </div>
       </div>
-    </ion-item>
+      <ion-row>
+        <ion-col>
+          <button ion-button icon-left clear small block>
+            <ion-icon name="star"></ion-icon>
+            <div *ngIf="post.counts.bookmarks > 0">{{ post.counts.bookmarks }}</div>
+          </button>
+        </ion-col>
+        <ion-col>
+          <button ion-button icon-left clear small block>
+            <ion-icon name="repeat"></ion-icon>
+            <div *ngIf="post.counts.reposts > 0">{{ post.counts.reposts }}</div>
+          </button>
+        </ion-col>
+        <ion-col>
+          <button ion-button icon-left clear small block>
+            <ion-icon name="text"></ion-icon>
+            <div *ngIf="post.counts.replies > 0">{{ post.counts.replies }}</div>
+          </button>
+        </ion-col>
+      </ion-row>
+    </ion-card>
   </ion-list>
 
 </ion-content>

src/pipes/timeago/timeago.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as moment from 'moment';
+
+/**
+ * Generated class for the TimeagoPipe pipe.
+ *
+ * See https://angular.io/docs/ts/latest/guide/pipes.html for more info on
+ * Angular Pipes.
+ */
+@Pipe({
+  name: 'timeago',
+})
+export class TimeagoPipe implements PipeTransform {
+  now: any;
+  /**
+   * Takes a value and makes it lowercase.
+   */
+  transform(value: string, ...args) {
+    this.now = moment(value).fromNow(true);
+    return this.now;
+  }
+}