posts display as infinite list

src/main/webapp/app/entities/post/list/post.component.html

@@ -28,57 +28,31 @@
     <span jhiTranslate="jhipsterBeltApp.post.home.notFound">No posts found</span>
   </div>
 
-  <div class="table-responsive" id="entities" *ngIf="posts && posts.length > 0">
-    <table class="table table-striped" aria-describedby="page-heading">
-      <thead>
-        <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="reset()">
-          <th scope="col" jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon icon="sort"></fa-icon></th>
-          <th scope="col" jhiSortBy="title">
-            <span jhiTranslate="jhipsterBeltApp.post.title">Title</span> <fa-icon icon="sort"></fa-icon>
-          </th>
-          <th scope="col" jhiSortBy="content">
-            <span jhiTranslate="jhipsterBeltApp.post.content">Content</span> <fa-icon icon="sort"></fa-icon>
-          </th>
-          <th scope="col" jhiSortBy="date"><span jhiTranslate="jhipsterBeltApp.post.date">Date</span> <fa-icon icon="sort"></fa-icon></th>
-          <th scope="col" jhiSortBy="blog.name">
-            <span jhiTranslate="jhipsterBeltApp.post.blog">Blog</span> <fa-icon icon="sort"></fa-icon>
-          </th>
-          <th scope="col"></th>
-        </tr>
-      </thead>
-      <tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
-        <tr *ngFor="let post of posts; trackBy: trackId" data-cy="entityTable">
-          <td>
-            <a [routerLink]="['/post', post.id, 'view']">{{ post.id }}</a>
-          </td>
-          <td>{{ post.title }}</td>
-          <td>{{ post.content }}</td>
-          <td>{{ post.date | formatMediumDatetime }}</td>
-          <td>
-            <div *ngIf="post.blog">
-              <a [routerLink]="['/blog', post.blog?.id, 'view']">{{ post.blog?.name }}</a>
-            </div>
-          </td>
-          <td class="text-right">
-            <div class="btn-group">
-              <button type="submit" [routerLink]="['/post', post.id, 'view']" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
-                <fa-icon icon="eye"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-              </button>
-
-              <button type="submit" [routerLink]="['/post', post.id, 'edit']" class="btn btn-primary btn-sm" data-cy="entityEditButton">
-                <fa-icon icon="pencil-alt"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
-              </button>
-
-              <button type="submit" (click)="delete(post)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
-                <fa-icon icon="times"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
-              </button>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="table-responsive" *ngIf="posts && posts.length > 0">
+    <div infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
+      <div *ngFor="let post of posts; trackBy: trackId">
+        <a [routerLink]="['/post', post.id, 'view']">
+          <h2>{{ post.title }}</h2>
+        </a>
+        <small>Posted on {{ post.date | formatMediumDatetime }} by {{ post.blog?.name }}</small>
+        <div [innerHTML]="post.content"></div>
+        <div class="btn-group mb-2 mt-1">
+          <button type="submit" [routerLink]="['/post', post.id, 'edit']" class="btn btn-primary btn-sm">
+            <fa-icon [icon]="'pencil-alt'"></fa-icon>
+            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
+          </button>
+          <button
+            type="submit"
+            (click)="delete(post)"
+            data-cy="entityDeleteButton"
+            queryParamsHandling="merge"
+            class="btn btn-danger btn-sm"
+          >
+            <fa-icon [icon]="'times'"></fa-icon>
+            <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>