socialnetworknews-web

commit 1efb70ed040b2aacaaee49da2b732fdd898beff6
parent 8fad856414f95ac3a97cd4642d790d97ad058acc
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sun, 25 Mar 2018 13:12:10 +0200

Add missing css and move footer

Diffstat:
M
src/app/tweet-list/tweet-list.component.html
 | 
5
++---
M
src/app/tweet-list/tweet-list.component.scss
 | 
55
+++++++++++++++++++++++++++++++++++++++++++++++++++++++

2 files changed, 57 insertions(+), 3 deletions(-)
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -22,10 +22,9 @@
     </a>
     <mat-card-content>
       {{item.text}}
-    </mat-card-content>
-    <mat-card-footer>
+      <br>
       <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-content>
     <mat-card-actions>
       <a mat-button href="{{item.tweet_link}}">OPEN ON TWITTER</a>
     </mat-card-actions>
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -56,3 +56,58 @@
   /** 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: 8px 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: 17px;
+}
+.ribbon-top-left::after {
+  bottom: 17px;
+  left: 0;
+}
+.ribbon-top-left span {
+  right: -25px;
+  top: 30px;
+  transform: rotate(-45deg);
+}