socialnetworknews-web

commit 10697a791c894b11e9c02a747e796955d14bb901
parent 3a7ce4a4277b0fb455b905dee3445cae651495f7
Author: MTRNord <mtrnord1@gmail.com>
Date:   Wed, 14 Mar 2018 21:54:55 +0100

Try to fix weird image issues

Diffstat:
M
src/app/tweet-list/tweet-list.component.html
 | 
20
+++++++++++---------
M
src/app/tweet-list/tweet-list.component.scss
 | 
11
+++++++++++

2 files changed, 22 insertions(+), 9 deletions(-)
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -5,15 +5,17 @@
       <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>
-      <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>
+      <div>
+        <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>
+        </div>
       </div>
     <!--</a>-->
   </article>
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -19,10 +19,21 @@
 .grid > article {
   border: 1px solid #ccc;
   box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
+  text-align: center;
 }
 .grid > article img {
   max-width: 100%;
+  display: block;
+}
+
+.grid > article div {
+  position: relative;
+  display: inline-block;
+  /* if you need ie6/7 support */
+  *display: inline;
+  zoom: 1;
 }
+
 .text {
   padding: 0 20px 20px;
 }