stylize page

package-lock.json

@@ -19,6 +19,7 @@
         "@capacitor/haptics": "1.1.3",
         "@capacitor/keyboard": "1.1.3",
         "@capacitor/status-bar": "1.0.6",
+        "@fortawesome/fontawesome-svg-core": "^1.2.36",
         "@ionic/angular": "^5.5.2",
         "chart.js": "^3.6.2",
         "ng2-charts": "^3.0.1",
@@ -3041,6 +3042,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -22387,6 +22409,19 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "@capacitor/haptics": "1.1.3",
     "@capacitor/keyboard": "1.1.3",
     "@capacitor/status-bar": "1.0.6",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@ionic/angular": "^5.5.2",
     "chart.js": "^3.6.2",
     "ng2-charts": "^3.0.1",

src/app/tab1/tab1.page.html

@@ -8,17 +8,26 @@
   <ion-toolbar>
     <ion-searchbar [(ngModel)]="searchbar" (search)="search($event)"></ion-searchbar>
   </ion-toolbar>
-  <ion-item *ngFor="let item of current">
+  <ion-card *ngFor="let item of current">
-    
+    <ion-card-header style="height: 10px">{{item.time}}</ion-card-header>
-    <h2><b>web: </b>{{item.web}}<br></h2>
+    <ion-card-title>
-    <h6><b>category: </b>{{item.category}}<br></h6>
+      <ion-item>
-    <h6><b>Type: </b>{{item.type}}<br></h6>
+      <ion-icon size="large" name="apps-outline"></ion-icon>
-    <h6><b>time: </b>{{item.time}}<br></h6>
+      <span class="text">
+        <center>
+          <h1>&nbsp;&nbsp;&nbsp;{{item.web}}</h1>
+        </center>
+      </span>
     </ion-item>
+    </ion-card-title>
+    <ion-card-content>
+      <h6><b><ion-icon name="ellipsis-vertical-outline"></ion-icon>&nbsp;Category: </b>{{capitalizeFirstLetter(item.category)}}<br></h6>
+      <h6><b><ion-icon name="list-outline"></ion-icon>&nbsp;Type: </b>{{capitalizeFirstLetter(item.type)}}<br></h6>
+    </ion-card-content>
+    
+  </ion-card>
   <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
-    <ion-infinite-scroll-content
+    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
-      loadingSpinner="bubbles"
-      loadingText="Loading more data...">
     </ion-infinite-scroll-content>
   </ion-infinite-scroll>
 </ion-content>

src/app/tab1/tab1.page.ts

@@ -18,7 +18,9 @@ export class Tab1Page implements OnInit {
   private itemperpage = 20
   ngOnInit() {
   }
-
+  capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
   search(event) {
     console.log(this.searchbar);
     var that=this