socialnetworknews-web

commit 48437f56570a8331c9387709bdff3b3e14e03bfe
parent 04e3d04d14e894ae1ab8a437853a0509dcf95950
Author: MTRNord <mtrnord1@gmail.com>
Date:   Mon,  2 Apr 2018 21:16:27 +0200

optimize the grids ( See: https://codepen.io/MTRNord/pen/ZxRJxr )

Diffstat:
M
src/app/papers-list/papers-list.component.scss
 | 
10
+++++++---
M
src/app/tweet-list/tweet-list.component.scss
 | 
10
+++++++---

2 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/src/app/papers-list/papers-list.component.scss b/src/app/papers-list/papers-list.component.scss
@@ -1,12 +1,16 @@
 .grid {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
   flex-wrap: wrap;
+  padding: 2.500em;
+
+  // Without a set height, the effect can't be achieved.
+  height: 250%; // Percent
 }
 
 .grid>* {
-  flex: 1 1 74%;
-  margin: 10px;
+  margin: .5em;
+  position: relative;
 }
 
 /* Made by https://codepen.io/gschier/pen/HCoqh */
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -1,12 +1,16 @@
 .gridTweetList {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
   flex-wrap: wrap;
+  padding: 2.500em;
+
+  // Without a set height, the effect can't be achieved.
+  height: 250%; // Percent
 }
 
 .gridTweetList>* {
-  flex: 1 1 74%;
-  margin: 10px;
+  margin: .5em;
+  position: relative;
 }
 
 /* Made by https://codepen.io/gschier/pen/HCoqh */