socialnetworknews-web

commit 644d4078ae84ed3001cfd6ff6685020338c24515
parent 9487c2f15da0bc2550c4f4117901e0e116385882
Author: MTRNord <mtrnord1@gmail.com>
Date:   Wed, 21 Mar 2018 18:49:45 +0100

Use cssgrid for papers-list

Diffstat:
M
src/app/papers-list/papers-list.component.html
 | 
35
++++++++++++++++++-----------------
M
src/app/papers-list/papers-list.component.scss
 | 
69
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

2 files changed, 87 insertions(+), 17 deletions(-)
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -1,20 +1,21 @@
-<div class="card-deck row" *ngFor="let rows of data">
-  <div class="card mx-auto" *ngFor="let item of rows" style="max-width: 22rem">
-    <!--Card image-->
-    <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.paper_image">
-      <img src="{{item.paper_image}}" class="img-fluid" style="z-index: 0">
-      <a>
-        <div class="mask"></div>
+<div #container class="grid">
+  <article *ngFor="let item of data">
+    <!--<a href="{{item.tweet_link}}">-->
+    <div style="z-index: 2;">
+      <a (click)="goTo(lightboxItem)" >
+        <img *ngIf="item.paper_image" [src]="item.paper_image" class="thumbnail">
       </a>
+
+      <!-- lightbox container hidden with CSS -->
+      <a (click)="hide(lightboxItem)" class="lightbox" #lightboxItem>
+        <img *ngIf="item.paper_image" [src]="item.paper_image">
+      </a>
+
+      <div class="text">
+        <h3>{{item.name}}</h3>
+        <p *ngIf="item.text">{{item.description}}</p>
+      </div>
     </div>
-    <!--Card content-->
-    <div class="card-body">
-      <!--Title when Text exists-->
-      <h4 class="card-title text-left" *ngIf="(item.description && item.paper_image) || (item.description && !item.paper_image)"><a routerLink="/paper/{{item.uuid}}">{{item.name}}</a></h4>
-      <!--Title when no Text exists-->
-      <h4 class="card-title align-middle" *ngIf="!item.description || !item.paper_image"><a routerLink="/paper/{{item.uuid}}">{{item.name}}</a></h4>
-      <!--Text-->
-      <p class="card-text text-justify" *ngIf="item.description">{{item.description}}</p>
-    </div>
-  </div>
+    <!--</a>-->
+  </article>
 </div>
diff --git a/src/app/papers-list/papers-list.component.scss b/src/app/papers-list/papers-list.component.scss
@@ -0,0 +1,69 @@
+.grid {
+  display: grid;
+  grid-template-columns: auto;
+  grid-gap: 20px;
+  align-items: end;
+  @media (min-width: 30em) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (min-width: 60em) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+
+.grid > article {
+  border: 1px solid #ccc;
+  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
+  text-align: center;
+  position: relative;
+}
+.thumbnail {
+  max-width: 100%;
+  display: block;
+}
+
+.grid > article > div > not(.card-ribbon){
+  position: relative;
+  display: inline-block;
+/* if you need ie6/7 support */
+  *display: inline;
+  zoom: 1;
+}
+
+.text {
+  padding: 0 20px 0 20px;
+}
+
+/* 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;
+}