socialnetworknews-web

commit a08561780666a657319017b99e04bdbd1b50c359
parent b16b1e2c42be73ada13d8905d6619ad011c4ef13
Author: MTRNord <mtrnord1@gmail.com>
Date:   Thu, 22 Mar 2018 21:58:22 +0100

Use card component also in tweet-list

Diffstat:
M
src/app/card/card.component.html
 | 
10
++++++++++
M
src/app/card/card.component.scss
 | 
66
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
src/app/card/card.component.ts
 | 
4
++++
M
src/app/tweet-list/tweet-list.component.html
 | 
33
+--------------------------------
M
src/styles.scss
 | 
55
-------------------------------------------------------

5 files changed, 81 insertions(+), 87 deletions(-)
diff --git a/src/app/card/card.component.html b/src/app/card/card.component.html
@@ -1,4 +1,9 @@
 <article>
+  <div class="ribbon ribbon-top-left" *ngIf="retweet == true" style="max-width: 22rem">
+        <span>
+          <i class="fa fa-retweet"></i>
+        </span>
+  </div>
   <!--<a href="{{item.tweet_link}}">-->
   <div style="z-index: 2;">
     <a (click)="goTo(lightboxItem)" >
@@ -20,6 +25,11 @@
         {{title}}
       </h3>
       <p *ngIf="text">{{text}}</p>
+      <ul *ngIf="created_at != null || favs != null || retweets != null">
+        <li><i class="fa fa-clock-o">&nbsp;</i>{{created_at.toLocaleString()}}</li>&nbsp;
+        <li><i class="fa fa-heart">&nbsp;</i>{{favs.toLocaleString()}}</li>&nbsp;
+        <li><i class="fa fa-retweet">&nbsp;</i>{{retweets.toLocaleString()}}</li>&nbsp;
+      </ul>
     </div>
   </div>
   <!--</a>-->
diff --git a/src/app/card/card.component.scss b/src/app/card/card.component.scss
@@ -20,6 +20,17 @@ article > div > not(.card-ribbon){
 .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 */
 
@@ -65,3 +76,58 @@ article > div > not(.card-ribbon){
   /** Unhide lightbox **/
   display: block;
 }
+
+/* The ribbons by https://codepen.io/nxworld/pen/oLdoWb*/
+/* common */
+.ribbon {
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+  position: absolute;
+  z-index: 1;
+}
+.ribbon::before,
+.ribbon::after {
+  position: absolute;
+  z-index: -1;
+  content: '';
+  display: block;
+  border: 5px solid #2980b9;
+}
+.ribbon span {
+  position: absolute;
+  display: block;
+  width: 225px;
+  padding: 15px 0;
+  background-color: #1da1f2;
+  box-shadow: 0 5px 10px rgba(0,0,0,.1);
+  color: #fff;
+  font: 700 18px/1 'Lato', sans-serif;
+  text-shadow: 0 1px 1px rgba(0,0,0,.2);
+  text-transform: uppercase;
+  text-align: center;
+}
+
+/* top left*/
+.ribbon-top-left {
+  top: -10px;
+  left: -10px;
+}
+.ribbon-top-left::before,
+.ribbon-top-left::after {
+  border-top-color: transparent;
+  border-left-color: transparent;
+}
+.ribbon-top-left::before {
+  top: 0;
+  right: 0;
+}
+.ribbon-top-left::after {
+  bottom: 0;
+  left: 0;
+}
+.ribbon-top-left span {
+  right: -25px;
+  top: 30px;
+  transform: rotate(-45deg);
+}
diff --git a/src/app/card/card.component.ts b/src/app/card/card.component.ts
@@ -11,6 +11,10 @@ export class CardComponent {
   @Input() image;
   @Input() link;
   @Input() text;
+  @Input() retweet?;
+  @Input() retweets?;
+  @Input() favs?;
+  @Input() created_at?;
 
   currentUrl: string;
 
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,34 +1,3 @@
 <div #container class="grid">
-  <article *ngFor="let item of data">
-    <!--<a href="{{item.tweet_link}}">-->
-      <!--Retweet Badge-->
-      <div class="ribbon ribbon-top-left" *ngIf="item.retweet == true" style="max-width: 22rem">
-        <span>
-          <i class="fa fa-retweet"></i>
-        </span>
-      </div>
-      <div style="z-index: 2;">
-        <a (click)="goTo(lightboxItem)" >
-          <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]" class="thumbnail">
-        </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>
-
-        <div class="text">
-          <h3>{{item.display_name}}</h3>
-          <p *ngIf="item.text">{{item.text}}</p>
-          <ul>
-            <li><i class="fa fa-clock-o">&nbsp;</i>{{item.created_at.toLocaleString()}}</li>&nbsp;
-            <li><i class="fa fa-heart">&nbsp;</i>{{item.favorites.toLocaleString()}}</li>&nbsp;
-            <li><i class="fa fa-retweet">&nbsp;</i>{{item.retweets.toLocaleString()}}</li>&nbsp;
-          </ul>
-        </div>
-      </div>
-    <!--</a>-->
-  </article>
+  <app-card *ngFor="let item of data" [title]="item.display_name" [link]="'/paper/'+item.uuid" [image]="item.image_urls[0]" [text]="item.text" [retweet]="item.retweet" [retweets]="item.retweets" [created_at]="item.created_at" [favs]="item.favorites"></app-card>
 </div>
diff --git a/src/styles.scss b/src/styles.scss
@@ -124,61 +124,6 @@ html { overflow:auto; }
 }
 */
 
-/* The ribbons by https://codepen.io/nxworld/pen/oLdoWb*/
-/* common */
-.ribbon {
-  width: 150px;
-  height: 150px;
-  overflow: hidden;
-  position: absolute;
-  z-index: 1;
-}
-.ribbon::before,
-.ribbon::after {
-  position: absolute;
-  z-index: -1;
-  content: '';
-  display: block;
-  border: 5px solid #2980b9;
-}
-.ribbon span {
-  position: absolute;
-  display: block;
-  width: 225px;
-  padding: 15px 0;
-  background-color: #1da1f2;
-  box-shadow: 0 5px 10px rgba(0,0,0,.1);
-  color: #fff;
-  font: 700 18px/1 'Lato', sans-serif;
-  text-shadow: 0 1px 1px rgba(0,0,0,.2);
-  text-transform: uppercase;
-  text-align: center;
-}
-
-/* top left*/
-.ribbon-top-left {
-  top: -10px;
-  left: -10px;
-}
-.ribbon-top-left::before,
-.ribbon-top-left::after {
-  border-top-color: transparent;
-  border-left-color: transparent;
-}
-.ribbon-top-left::before {
-  top: 0;
-  right: 0;
-}
-.ribbon-top-left::after {
-  bottom: 0;
-  left: 0;
-}
-.ribbon-top-left span {
-  right: -25px;
-  top: 30px;
-  transform: rotate(-45deg);
-}
-
 .tblue {
   background-color: #1da1f2;
 }