From 4f40d287e5040778ad35a70d24ffc8d8ce4090b4 Mon Sep 17 00:00:00 2001
From: Abhishek <guywhodesigns@gmail.com>
Date: Jul 10 2018 08:15:47 +0000
Subject: add magazine template


---

diff --git a/src/pages/magazine/magazine.html b/src/pages/magazine/magazine.html
index 63c4d3f..7dc15ab 100644
--- a/src/pages/magazine/magazine.html
+++ b/src/pages/magazine/magazine.html
@@ -1,36 +1,37 @@
-<!--
-  Generated template for the MagazinePage page.
-
-  See http://ionicframework.com/docs/v2/components/#navigation for more info on
-  Ionic pages and navigation.
--->
-<ion-content class="magazine">
-<ion-navbar>
-  <button ion-button menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-</ion-navbar>
-
-<img id="maglogo" src="assets/img/mag_logo.svg">
-    <img id="mag-title" src="assets/img/mag_title.svg">
+<ion-header no-border>
+  <ion-navbar>
+    <ion-title>
+      <img src="./assets/img/Fedora.svg" height="24px" alt="Fedora">
+    </ion-title>
+    <ion-buttons end>
+      <button tappable (click)="openNotificationPage()">
+        <img src="./assets/img/notification.svg">
+      </button>
+    </ion-buttons>
+  </ion-navbar>
+</ion-header>
 
+<ion-content class="mag">
+  <ion-label>From the Fedora Magazine
+    <button (click)="presentActionSheet()">Sort
+      <img src='./assets/img/sort.svg'>
+    </button>
+  </ion-label>
   <ion-list>
-    <ion-card *ngFor="let post of posts">
-      <!--<ion-row id="featured-image">
-      <img src="https://fedoramagazine.org/wp-json/wp/v2/media/{{post.id}}" />
-    </ion-row>-->
+    <ion-card *ngFor="let post of posts let i = index">
       <ion-row>
-        <ion-col width-80 padding tappable (click)="openPost(post)">
-          <strong id="title" [innerHtml]="post.title"></strong>
+        <ion-col col-7>
+          <ion-card-header [innerHTML]="post.title" class="body-title" text-wrap tappable (click)="openPost(post)"></ion-card-header>
+          <ion-card-content>
+            <span [innerHTML]="post.publishedAt + ' — ' + post.comments + ' comments'" class="body-subtitle"></span>
+            <img [src]=bookmarkIcon[i] tappable (click)="addToBookmark(post,i)" class="bookmark">
+          </ion-card-content>
         </ion-col>
-        <ion-col width-20 center>
-          <button float-right ion-button small tappable clear color="light" (click)="sharePost(post)">
-            <ion-icon name="share"></ion-icon>
-          </button>
+        <ion-col col-5 tappable (click)="openPost(post)">
+          <img src="{{post.featuredImage}}" class="card-image">
         </ion-col>
       </ion-row>
-      <ion-card-content [innerHTML]="post.excerpt">
-      </ion-card-content>
     </ion-card>
   </ion-list>
+  <button (click)="loadMore()" class="load" ng-if="posts.length!==0">Load More Posts</button>
 </ion-content>