socialnetworknews-web

commit 3fdcfd4b98ffac0efb9484f105353c316a2f9b2e
parent fa1ccad37e9934ba6d3756b16805398a75092e16
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sun, 25 Mar 2018 15:05:23 +0200

Try angular/flex-layout instead

Diffstat:
M
package.json
 | 
1
+
M
src/app/app.module.ts
 | 
4
++--
M
src/app/tweet-list/tweet-list.component.html
 | 
23
++++++++++-------------
M
yarn.lock
 | 
6
++++++

4 files changed, 19 insertions(+), 15 deletions(-)
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@angular/common": "^5.0.0",
     "@angular/compiler": "^5.0.0",
     "@angular/core": "^5.0.0",
+    "@angular/flex-layout": "^5.0.0-beta.13",
     "@angular/forms": "^5.0.0",
     "@angular/http": "^5.0.0",
     "@angular/material": "^5.2.4",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -15,7 +15,7 @@ import { SpinnerComponent } from './spinner/spinner.component';
 
 import {MatCardModule} from '@angular/material/card';
 import {MatButtonModule} from '@angular/material/button';
-import {MatGridListModule} from '@angular/material/grid-list';
+import {FlexLayoutModule} from '@angular/flex-layout';
 
 import { ApiService } from './api.service';
 
@@ -63,7 +63,7 @@ export class RavenErrorHandler implements ErrorHandler {
     ToastrModule.forRoot(),
     MatCardModule,
     MatButtonModule,
-    MatGridListModule,
+    FlexLayoutModule,
   ],
   providers: [
     ApiService,
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,15 +1,12 @@
-<spinner  spinner="spinner"></spinner>
-<mat-grid-list cols="3" rowHeight="1:2">
-  <mat-grid-tile-header>
-    {{paperData.name}}
-  </mat-grid-tile-header>
-  <mat-grid-tile *ngFor="let item of data">
-    <div class="ribbon ribbon-top-left" *ngIf="item.retweet" style="max-width: 22rem">
-      <span>
-        <i class="fa fa-retweet"></i>
-      </span>
-    </div>
-    <mat-card>
+<spinner spinner="spinner"></spinner>
+<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
+  <mat-grid-tile>
+    <mat-card *ngFor="let item of data">
+      <div class="ribbon ribbon-top-left" *ngIf="item.retweet" style="max-width: 22rem">
+        <span>
+          <i class="fa fa-retweet"></i>
+        </span>
+      </div>
       <mat-card-header>
         <img src="https://twitter.com/{{item.username}}/profile_image" mat-card-avatar>
         <mat-card-title>{{item.display_name}}</mat-card-title>
@@ -39,4 +36,4 @@
     <app-card *ngIf="item.image_urls" [title]="item.display_name" [image]="item.image_urls[0]" [text]="item.text" [retweet]="item.retweet" [retweets]="item.retweets" [created_at]="item.created_at" [favs]="item.favorites"></app-card>
     <app-card *ngIf="!item.image_urls"  [title]="item.display_name" [text]="item.text" [retweet]="item.retweet" [retweets]="item.retweets" [created_at]="item.created_at" [favs]="item.favorites"></app-card>
   </ng-container>-->
-</mat-grid-list>
+</div>
diff --git a/yarn.lock b/yarn.lock
@@ -140,6 +140,12 @@
   dependencies:
     tslib "^1.7.1"
 
+"@angular/flex-layout@^5.0.0-beta.13":
+  version "5.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@angular/flex-layout/-/flex-layout-5.0.0-beta.13.tgz#81ad6ad461003946e7c522920821a56ba7292a85"
+  dependencies:
+    tslib "^1.7.1"
+
 "@angular/forms@^5.0.0":
   version "5.2.9"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-5.2.9.tgz#12c45b3a02c398b354f09cc740d914cd904c0c9c"