socialnetworknews-web

commit 10de212de75bab0907f47548e9c06620959c54c9
parent c84eec450f060c72e516592c49bcf10b42ffa8e8
Author: MTRNord <mtrnord1@gmail.com>
Date:   Mon, 26 Mar 2018 15:03:32 +0200

Rework rest of Paper Page

Diffstat:
M
src/app/paper/paper.component.html
 | 
21
++++++++++-----------
M
src/app/paper/paper.component.scss
 | 
22
+++++++++++++---------

2 files changed, 23 insertions(+), 20 deletions(-)
diff --git a/src/app/paper/paper.component.html b/src/app/paper/paper.component.html
@@ -19,19 +19,18 @@
     </nav>
   </section>-->
 
-  <div class="grid">
+  <div fxLayout fxLayout.xs="column" fxLayoutGap="10px" fxLayoutGap.xs="0" fxLayoutAlign="start" class="gridHack">
     <app-tweet-list [uuid]="uuid"></app-tweet-list>
 
-  <article class="author">
-    <div style="z-index: 2;">
-      <ngx-avatar twitterId="mtrnord" [round]="true" size="120"></ngx-avatar>
-
-      <div class="text">
-        <h3>MTRNord</h3>
-        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
-      </div>
-    </div>
-  </article>
+    <mat-card>
+      <mat-card-header class="avatarCenter">
+        <img src="https://twitter.com/mtrnord/profile_image" class="avatar"><br/><br/>
+        <mat-card-title><b>MTRNord</b></mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
+      </mat-card-content>
+    </mat-card>
   </div>
 
 </main>
diff --git a/src/app/paper/paper.component.scss b/src/app/paper/paper.component.scss
@@ -1,14 +1,18 @@
-.grid {
-  display: grid;
-  grid-template-columns: auto;
-  grid-gap: 10px;
-  margin-left: 1%;
-  //align-items: end;
-  @media (min-width: 30em) {
-    grid-template-columns: 74% 24%;
-  }
+.gridHack {
+  align-items: flex-start !important;
+  margin-bottom: 10px;
+}
+
+.avatarCenter {
+  display: flex;
+  justify-content: center; /* align horizontal */
 }
 
+.avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+}
 
 .grid > .author {
   border: 1px solid #ccc;