socialnetworknews-web

commit 3620851b11679521659fd70de644014951ef795a
parent 0effcc120afb3e74704243cb861d034516989a88
Author: MTRNord <mtrnord1@gmail.com>
Date:   Wed, 21 Mar 2018 21:40:44 +0100

Use cssgrid on paper component

Diffstat:
M
src/app/paper/paper.component.html
 | 
43
++++++++++++++-----------------------------
M
src/app/paper/paper.component.scss
 | 
88
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

2 files changed, 102 insertions(+), 29 deletions(-)
diff --git a/src/app/paper/paper.component.html b/src/app/paper/paper.component.html
@@ -9,46 +9,31 @@
 </div>-->
 
 <!--Main Layout-->
-<main class="text-center py-5">
+<main>
 
-  <section class="mb-5 mr-5 ml-5">
+  <!--<section class="mb-5 mr-5 ml-5">
     <nav class="menu">
       <a routerLinkActive="active">Titelthemen</a>
       <a>Fotos</a>
       <a>Videos</a>
     </nav>
-  </section>
+  </section>-->
 
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-xl-9">
-        <app-tweet-list [uuid]="uuid"></app-tweet-list>
-      </div>
-      <!--Card-->
-      <div class="col-xl-3">
-        <div class="card testimonial-card" style="max-width: 22rem">
-
-          <!--Background color-->
-          <div class="card-up tblue">
-          </div>
-
-          <!--Avatar-->
-          <div class="avatar">
-            <ngx-avatar twitterId="mtrnord" [round]="false" size="120"></ngx-avatar>
-          </div>
+  <div class="grid">
+    <app-tweet-list [uuid]="uuid"></app-tweet-list>
 
-          <div class="card-body">
-            <!--Name-->
-            <h4 class="card-title">MTRNord</h4>
-            <hr>
-            <!--Quotation-->
-            <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
-          </div>
+  <article>
+    <div style="z-index: 2;">
+      <a>
+        <ngx-avatar twitterId="mtrnord" [round]="true" size="120"></ngx-avatar>
+      </a>
 
-        </div>
-        <!--/.Card-->
+      <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>
   </div>
 
 </main>
diff --git a/src/app/paper/paper.component.scss b/src/app/paper/paper.component.scss
@@ -0,0 +1,88 @@
+.grid {
+  display: grid;
+  grid-template-columns: auto;
+  grid-gap: 10px;
+  //align-items: end;
+  @media (min-width: 30em) {
+    grid-template-columns: 1fr 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;
+}
+.text > ul {
+  padding: 10px;
+  text-align: center;
+  margin-bottom: 0;
+  font-size: .9rem;
+  width: 100%;
+  li {
+    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-wrapper {
+  width: 50%;
+  height: 50%;
+  overflow: auto;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.lightbox > .img-wrapper img {
+  /** Pad the lightbox image */
+  max-width: 90%;
+  max-height: 80%;
+  //margin-top: 2%;
+  position: relative;
+}
+
+.lightbox:target {
+  /** Remove default browser outline */
+  outline: none;
+
+  /** Unhide lightbox **/
+  display: block;
+}