socialnetworknews-web

commit a80fc9c19a0550f3bf06eec282a77905b5f61b8d
parent 2b4c1a272468fe2cecfca074f92e730b572e6677
Author: MTRNord <mtrnord1@gmail.com>
Date:   Mon, 26 Mar 2018 18:33:10 +0200

Use real flex

Diffstat:
M
src/app/paper/paper.component.html
 | 
2
+-
M
src/app/paper/paper.component.scss
 | 
13
++++++++++---
M
src/app/papers-list/papers-list.component.scss
 | 
19
++++++++-----------
M
src/app/tweet-list/tweet-list.component.html
 | 
2
+-
M
src/app/tweet-list/tweet-list.component.scss
 | 
12
+++++++++---

5 files changed, 29 insertions(+), 19 deletions(-)
diff --git a/src/app/paper/paper.component.html b/src/app/paper/paper.component.html
@@ -19,7 +19,7 @@
     </nav>
   </section>-->
 
-  <div fxLayout fxLayout.xs="column" fxLayoutGap="10px" fxLayoutGap.xs="0" fxLayoutAlign="start" class="gridHack">
+  <div class="grid">
     <app-tweet-list [uuid]="uuid"></app-tweet-list>
 
     <mat-card>
diff --git a/src/app/paper/paper.component.scss b/src/app/paper/paper.component.scss
@@ -1,8 +1,15 @@
-.gridHack {
-  align-items: flex-start !important;
-  margin-bottom: 10px;
+.grid {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.grid>* {
+  flex: 1 1 74%;
+  margin: 10px;
 }
 
+
 .avatarCenter {
   display: flex;
   justify-content: center; /* align horizontal */
diff --git a/src/app/papers-list/papers-list.component.scss b/src/app/papers-list/papers-list.component.scss
@@ -1,15 +1,12 @@
 .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);
-  }
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.grid>* {
+  flex: 1 1 74%;
+  margin: 10px;
 }
 
 /* Made by https://codepen.io/gschier/pen/HCoqh */
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,5 +1,5 @@
 <spinner spinner="spinner"></spinner>
-<div fxLayout fxLayout.xs="column" fxLayoutGap="10px" fxLayoutGap.xs="0" fxLayoutAlign="start" *ngFor="let row of data" class="gridHack">
+<div *ngFor="let row of data" class="grid">
   <mat-card *ngFor="let item of row" style="max-width: 350px;">
     <div class="ribbon ribbon-top-right" *ngIf="item.retweet" style="max-width: 22rem">
       <span>
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -1,6 +1,12 @@
-.gridHack {
-  align-items: flex-start !important;
-  margin-bottom: 10px;
+.grid {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.grid>* {
+  flex: 1 1 74%;
+  margin: 10px;
 }
 
 /* Made by https://codepen.io/gschier/pen/HCoqh */