socialnetworknews-web

commit 92e5fa9a765970d184788dd790e47c90a33ce7ce
parent 49b0e80ebf83a1cd8df2b47acbf7239d3a3c9273
Author: MTRNord <mtrnord1@gmail.com>
Date:   Thu, 15 Mar 2018 17:31:10 +0100

Fix thumbnail size and layout gaps

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

3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -67,7 +67,7 @@ nav {
 
 .wrapper {
   display: grid;
-  grid-gap: 20px;
+  grid-gap: 5px;
   grid-template-areas:
     "header"
     "main"
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -9,7 +9,7 @@
       </div>
       <div>
         <a [href]="'#img'+i">
-          <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
+          <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]" class="thumbnail">
         </a>
 
         <!-- lightbox container hidden with CSS -->
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -18,7 +18,7 @@
   box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
   text-align: center;
 }
-.grid > article > a  img {
+.thumbnail {
   max-width: 100%;
   display: block;
 }