socialnetworknews-web

commit b8653ef11a02a7d85d790e20871a2e510d916582
parent 26b26f5fb6dd9dba27818abbe795e297f121dea1
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sun, 25 Mar 2018 16:15:35 +0200

Make it a grid (hopefully)

Diffstat:
M
src/app/tweet-list/tweet-list.component.html
 | 
4
++--
M
src/app/tweet-list/tweet-list.component.ts
 | 
11
+++++++++--

2 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,6 +1,6 @@
 <spinner spinner="spinner"></spinner>
-<div fxLayout="column wrap" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center">
-  <mat-card *ngFor="let item of data" fxFlex="calc(50% - 10px)">
+<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutGap.xs="0" fxLayoutAlign="center" *ngFor="let row of data">
+  <mat-card *ngFor="let item of row">
     <div class="ribbon ribbon-top-left" *ngIf="item.retweet" style="max-width: 22rem">
       <span>
         <i class="fa fa-retweet"></i>
diff --git a/src/app/tweet-list/tweet-list.component.ts b/src/app/tweet-list/tweet-list.component.ts
@@ -19,7 +19,7 @@ import {Lightbox} from '../utils/lightbox';
 })
 export class TweetListComponent implements OnInit {
   @Input() uuid;
-  data: (TweetsEntity)[];
+  data: (TweetsEntity)[][];
   paperData: Paper;
 
   constructor(private apiService: ApiService, private toastr: ToastrService, private lightbox: Lightbox) {
@@ -84,7 +84,7 @@ export class TweetListComponent implements OnInit {
           .concat(Observable.throw({error: 'Sorry, there was an error (after 5 retries). This probably means we can\'t reach our API Server :('}));
       })
       .subscribe(
-        data => { this.data = data.tweets; },
+        data => { this.data = this.chunk(data.tweets, 3); },
         err => {
           this.toastr.error(err['error'], 'Error connecting API', {
             positionClass: 'toast-top-center',
@@ -96,4 +96,11 @@ export class TweetListComponent implements OnInit {
       );
   }
 
+  private chunk(arr: (TweetsEntity)[], size: number): (TweetsEntity)[][] {
+    const newArr = [];
+    for (let i = 0; i < arr.length; i += size) {
+      newArr.push(arr.slice(i, i + size));
+    }
+    return newArr;
+  }
 }