socialnetworknews-web

commit 1a37bc5896302139406719ed714583ca2d0cf30c
parent f469d39c1e2204ff3c4b10169fb22dcb3e5acbfe
Author: MTRNord <mtrnord1@gmail.com>
Date:   Thu, 15 Mar 2018 17:14:12 +0100

Use pure CSS Lightbox instead of ng-module

Diffstat:
M
src/app/app.module.ts
 | 
15
---------------
M
src/app/paper/paper.component.html
 | 
2
+-
M
src/app/tweet-list/tweet-list.component.html
 | 
12
++++++++++--
M
src/app/tweet-list/tweet-list.component.scss
 | 
34
+++++++++++++++++++++++++++++++++-

4 files changed, 44 insertions(+), 19 deletions(-)
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -2,8 +2,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import {ErrorHandler, NgModule} from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-// import { MDBBootstrapModule } from 'angular-bootstrap-md';
-import {GalleryConfig, GalleryModule} from 'ng-gallery';
 import { AvatarModule } from 'ngx-avatar';
 
 import { AppComponent } from './app.component';
@@ -36,18 +34,6 @@ export class RavenErrorHandler implements ErrorHandler {
   }
 }
 
-export const config: GalleryConfig = {
-  'gestures': true,
-  'thumbnails': null,
-  'navigation': null,
-  'imageSize': 'contain',
-  'style': {
-    'width': '57rem',
-    'height': '32rem',
-    'padding-top': '2rem'
-  },
-};
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -62,7 +48,6 @@ export const config: GalleryConfig = {
     // MDBBootstrapModule.forRoot(),
     AppRoutingModule,
     BrowserAnimationsModule,
-    GalleryModule.forRoot(config),
     AvatarModule,
     HttpClientModule,
     ToastrModule.forRoot(), // ToastrModule added
diff --git a/src/app/paper/paper.component.html b/src/app/paper/paper.component.html
@@ -19,7 +19,7 @@
     </nav>
   </section>
 
-  <div class="container-fluid" *ngIf="isBrowser" gallerize>
+  <div class="container-fluid">
     <div class="row">
       <div class="col-xl-9">
         <app-tweet-list [uuid]="uuid"></app-tweet-list>
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,5 +1,5 @@
 <div class="grid">
-  <article *ngFor="let item of data">
+  <article *ngFor="let item of data; let i = index">
     <!--<a href="{{item.tweet_link}}">-->
       <!--Retweet Badge-->
       <div class="ribbon ribbon-top-left" *ngIf="item.retweet == true" style="max-width: 22rem">
@@ -8,7 +8,15 @@
         </span>
       </div>
       <div>
-        <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
+        <a [href]="'#img'+i">
+          <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
+        </a>
+
+        <!-- lightbox container hidden with CSS -->
+        <a href="#_" class="lightbox" [id]="'#img'+i">
+          <img src="http://insomnia.rest/images/screens/main.png">
+        </a>
+
         <div class="text">
           <h3>{{item.display_name}}</h3>
           <p *ngIf="item.text">{{item.text}}</p>
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 img {
+.grid > article > a  img {
   max-width: 100%;
   display: block;
 }
@@ -44,3 +44,35 @@
     display: inline;
   }
 }
+
+/* Made by https://codepen.io/gschier/pen/HCoqh */
+
+.lightbox {
+  /** Default lightbox to hidden */
+  display: none;
+
+  /** Position and style */
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0.8);
+}
+
+.lightbox img {
+  /** Pad the lightbox image */
+  max-width: 90%;
+  max-height: 80%;
+  margin-top: 2%;
+}
+
+.lightbox:target {
+  /** Remove default browser outline */
+  outline: none;
+
+  /** Unhide lightbox **/
+  display: block;
+}