socialnetworknews-web

commit 8fad856414f95ac3a97cd4642d790d97ad058acc
parent 440d59d9b98eba311c669bfdbad0c1be6d3eb294
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sun, 25 Mar 2018 12:58:52 +0200

Use angular-material cards on tweets

Diffstat:
M
src/app/papers-list/papers-list.component.html
 | 
1
-
M
src/app/tweet-list/tweet-list.component.html
 | 
34
++++++++++++++++++++++++++++++++--
M
src/app/tweet-list/tweet-list.component.scss
 | 
34
----------------------------------
M
src/app/tweet-list/tweet-list.component.ts
 | 
8
++++++++

4 files changed, 40 insertions(+), 37 deletions(-)
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -22,5 +22,4 @@
       <a mat-button routerLink="/paper/{{item.uuid}}">OPEN</a>
     </mat-card-actions>
   </mat-card>
-  <!--<app-card  [title]="item.name" [link]="'/paper/'+item.uuid" [image]="item.paper_image" [text]="item.description"></app-card>-->
 </div>
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,7 +1,37 @@
 <spinner  spinner="spinner"></spinner>
 <div class="grid">
-  <ng-container *ngFor="let item of data">
+  <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>
+      <mat-card-title>{{item.display_name}}</mat-card-title>
+      <mat-card-subtitle><i class="fa fa-clock-o">&nbsp;</i>{{item.created_at.toLocaleString()}}</mat-card-subtitle>
+    </mat-card-header>
+    <a (click)="show(lightboxItem)" >
+      <img mat-card-image *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
+    </a>
+
+    <!-- lightbox container hidden with CSS -->
+    <a (click)="hide(lightboxItem)" class="lightbox" #lightboxItem>
+      <div class="img-wrapper">
+        <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
+      </div>
+    </a>
+    <mat-card-content>
+      {{item.text}}
+    </mat-card-content>
+    <mat-card-footer>
+      <i class="fa fa-heart">&nbsp;</i>{{item.favorites.toLocaleString()}}&nbsp;<i class="fa fa-retweet">&nbsp;</i>{{item.retweets.toLocaleString()}}
+    </mat-card-footer>
+    <mat-card-actions>
+      <a mat-button href="{{item.tweet_link}}">OPEN ON TWITTER</a>
+    </mat-card-actions>
+  </mat-card>
+  <!--<ng-container *ngFor="let item of data">
     <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>
+  </ng-container>-->
 </div>
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -12,40 +12,6 @@
   }
 }
 
-
-.grid > article {
-  border: 1px solid #ccc;
-  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
-  text-align: center;
-  position: relative;
-}
-.thumbnail {
-  max-width: 100%;
-  display: block;
-}
-
-.grid > article > div > not(.card-ribbon){
-  position: relative;
-  display: inline-block;
-  /* if you need ie6/7 support */
-  *display: inline;
-  zoom: 1;
-}
-
-.text {
-  padding: 0 20px 0 20px;
-}
-.text > ul {
-  padding: 10px;
-  text-align: center;
-  margin-bottom: 0;
-  font-size: .9rem;
-  width: 100%;
-  li {
-    display: inline;
-  }
-}
-
 /* Made by https://codepen.io/gschier/pen/HCoqh */
 
 .lightbox {
diff --git a/src/app/tweet-list/tweet-list.component.ts b/src/app/tweet-list/tweet-list.component.ts
@@ -30,6 +30,14 @@ export class TweetListComponent implements OnInit {
     });
   }
 
+  hide(el) {
+    el.style.display = '';
+  }
+
+  show(el): void {
+    el.style.display = 'block';
+  }
+
   ngOnInit() {
     this.getYesterday();
   }