socialnetworknews-web

commit 7cf75ca262ef8776bf3f67e4cea23585a2bd2982
parent 203c89326444aae7d4556cec258ec19db403efa6
Author: MTRNord <mtrnord1@gmail.com>
Date:   Wed, 14 Mar 2018 21:21:13 +0100

Try to fix these Cards

Diffstat:
M
src/app/tweet-list/tweet-list.component.html
 | 
10
+++++-----
M
src/app/tweet-list/tweet-list.component.scss
 | 
94
++++++++++++++++---------------------------------------------------------------

2 files changed, 24 insertions(+), 80 deletions(-)
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,20 +1,20 @@
 <div class="grid">
-  <div [class]="'item-' + i" *ngFor="let item of data; let i = index">
+  <div *ngFor="let item of data">
     <a href="{{item.tweet_link}}" class="card">
       <!--Retweet Badge-->
       <div class="card-ribbon card-ribbon-top card-ribbon-left tblue" *ngIf="item.retweet == true" style="max-width: 22rem">
         <i class="fa fa-retweet"></i>
       </div>
-      <div *ngIf="item.image_urls && item.image_urls[0]" class="thumb" [style.background-image]="'url('+ item.image_urls[0] +')'"></div>
-      <article>
-        <h1>{{item.display_name}}</h1>
+      <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
+      <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>
-      </article>
+      </div>
     </a>
   </div>
 </div>
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -1,8 +1,8 @@
 .grid {
   display: grid;
-  width: 100%;
   grid-template-columns: auto;
   grid-gap: 20px;
+  align-items: end;
   @media (min-width: 30em) {
     grid-template-columns: 1fr 1fr;
   }
@@ -12,81 +12,25 @@
   }
 }
 
-.card {
-  background: white;
-  text-decoration: none;
-  color: #444;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-
-  // sets up hover state
-  position: relative;
-  top: 0;
-  transition: all .1s ease-in;
-
-  &:hover {
-    top: -2px;
-    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
-  }
-
-  article {
-    padding: 20px;
-    flex: 1;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
 
-    position: absolute;
-    bottom: 0;
-  }
-
-  h1 {
-    font-size: 20px;
-    margin: 0;
-    color: #333;
-  }
 
-  p {
-    flex: 1;
-    line-height: 1.4;
-  }
-
-  span {
-    font-size: 12px;
-    font-weight: bold;
-    color: #999;
-    text-transform: uppercase;
-    letter-spacing: .05em;
-    margin: 2em 0 0 0;
-  }
-
-  ul {
-    padding: 10px;
-    text-align: center;
-    margin-bottom: 0;
-    font-size: .9rem;
-    li {
-      display: inline;
-    }
-  }
-
-  .thumb {
-    padding-bottom: 60%;
-    background-size: cover;
-    background-position: center center;
-    height: 250px;
-  }
+.grid > article {
+  border: 1px solid #ccc;
+  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
 }
-
-/*.item-1 {
-  @media (min-width: 60em) {
-    grid-column: 1 / span 2;
-
-    h1 {
-      font-size: 24px;
-    }
+.grid > article img {
+  max-width: 100%;
+}
+.text {
+  padding: 0 20px 20px;
+}
+.text > ul {
+  padding: 10px;
+  text-align: center;
+  margin-bottom: 0;
+  font-size: .9rem;
+  width: 100%;
+  li {
+    display: inline;
   }
-}*/
+}