socialnetworknews-web

commit 0effcc120afb3e74704243cb861d034516989a88
parent b14076b42fb7344173476516ca3d9a249245a866
Author: MTRNord <mtrnord1@gmail.com>
Date:   Wed, 21 Mar 2018 21:09:04 +0100

Try centering the image in the Lightbox

Diffstat:
M
src/app/papers-list/papers-list.component.html
 | 
4
+++-
M
src/app/papers-list/papers-list.component.scss
 | 
17
+++++++++++++++--
M
src/app/tweet-list/tweet-list.component.html
 | 
4
+++-
M
src/app/tweet-list/tweet-list.component.scss
 | 
17
+++++++++++++++--

4 files changed, 36 insertions(+), 6 deletions(-)
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -8,7 +8,9 @@
 
       <!-- lightbox container hidden with CSS -->
       <a (click)="hide(lightboxItem)" class="lightbox" #lightboxItem>
-        <img *ngIf="item.paper_image" [src]="item.paper_image">
+        <div class="img-wrapper">
+          <img *ngIf="item.paper_image" [src]="item.paper_image">#
+        </div>
       </a>
 
       <div class="text">
diff --git a/src/app/papers-list/papers-list.component.scss b/src/app/papers-list/papers-list.component.scss
@@ -53,11 +53,24 @@
   background: rgba(0,0,0,0.8);
 }
 
-.lightbox img {
+.lightbox > .img-wrapper {
+  width: 50%;
+  height: 50%;
+  overflow: auto;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.lightbox > .img-wrapper img {
   /** Pad the lightbox image */
   max-width: 90%;
   max-height: 80%;
-  margin-top: 2%;
+  //margin-top: 2%;
+  position: relative;
 }
 
 .lightbox:target {
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -14,7 +14,9 @@
 
         <!-- lightbox container hidden with CSS -->
         <a (click)="hide(lightboxItem)" class="lightbox" #lightboxItem>
-          <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
+          <div class="img-wrapper">
+            <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
+          </div>
         </a>
 
         <div class="text">
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -63,11 +63,24 @@
   background: rgba(0,0,0,0.8);
 }
 
-.lightbox img {
+.lightbox > .img-wrapper {
+  width: 50%;
+  height: 50%;
+  overflow: auto;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.lightbox > .img-wrapper img {
   /** Pad the lightbox image */
   max-width: 90%;
   max-height: 80%;
-  margin-top: 2%;
+  //margin-top: 2%;
+  position: relative;
 }
 
 .lightbox:target {