changed some styles for show-post and home-component

client/src/app/home/home.component.css

@@ -8,6 +8,7 @@
   padding-left: 1rem;
 }
 
+
 /* Custom page header */
 .header {
   padding-bottom: 1rem;
@@ -34,6 +35,11 @@
   .container {
     max-width: 46rem;
   }
+
+  [role="main"]{
+  
+    height: 700px;
+  }
 }
 .container-narrow > hr {
   margin: 2rem 0;
@@ -67,6 +73,11 @@
     padding-left: 0;
   }
 
+  [role="main"]{
+  
+    height: 700px;
+  }
+
   /* Space out the masthead */
   .header {
     margin-bottom: 2rem;
@@ -81,4 +92,6 @@
 .btn{
   text-decoration:none;
   cursor: pointer;
+  color: #850505;
+  border: #777;
 }

client/src/app/show-post/show-post.component.css

@@ -2,32 +2,54 @@
     #your-matches{
         width: 45%;
         float: left;
+        max-height: 380px;
+        overflow: auto;
     }
     
     #all-matches{
         width: 45%;
         float: right;
+        max-height: 680px;
+        overflow: auto;
     }
 }
 
 .list-group{
-    margin-top: 2rem;
+    overflow: hidden;
+    margin-bottom: 2rem;
 }
 
+
 .list-group-item{
-    max-width: 90%;
     padding: 0.5rem;
-    border-top: 1px solid !important;
     border-left: 0px;
     border-right: 0px;
 }
 
+
 .your-list{
     max-width: 90%;
     padding: 0rem;
 }
 
-.post-item{
-    max-width: 90%;
-    border-top: 1px solid;
+.all-list{
+    padding: 0rem;
+}
+
+.inner-div{
+    border-bottom: 1px solid;
+    border-bottom-color: lightgrey;
+    margin-right: 0.5rem;
+    padding: 0.5rem;
+}
+
+.title{
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 0;
+    background-color: white;
+    border-bottom: 1px solid;
+    border-bottom-color: #850505 ;
+    margin-bottom: 1rem;
+    z-index: 100;
 }

client/src/app/show-post/show-post.component.html

@@ -2,12 +2,13 @@
 
     <div class="list-group" id="your-matches">
 
-        <h5> {{getCurrUser()}}'s matches </h5>
+        <h5 class="title"> {{getCurrUser()}}'s matches </h5>
 
         <div *ngIf="!hasPosts()">Are you sure you have been throwing discs? We can't find any matches! :(</div>
+
         <ng-container *ngFor="let post of posts; let i=index" class="your-list flex-column align-items-start">   
-            <div *ngIf="posts[i].name == getCurrUser()">
-                <div class="d-flex w-100 justify-content-between post-item">
+            <div class="inner-div" *ngIf="posts[i].name == getCurrUser()">
+                <div class="d-flex w-100 justify-content-between">
                         <h6 class="mb-1">Course: <span style="color:#850505">{{post.title}}</span></h6>
                         <small>{{post.date}}</small>
                 </div>
@@ -20,15 +21,17 @@
 
     <div class="list-group" id="all-matches">
 
-            <h5>All matches</h5>
+            <h5 class="title">All matches</h5>
 
-            <a *ngFor="let post of posts" class="list-group-item flex-column align-items-start">
-                <h6>Player: <span style="color:#850505">{{post.name}}</span></h6>
-                <div class="d-flex w-100 justify-content-between">
-                    <h6 class="mb-1">Course: <span style="color:#850505">{{post.title}}</span></h6>
-                    <small>{{post.date}}</small>
+            <a *ngFor="let post of posts" class="all-list flex-column align-items-start">
+                <div class="inner-div">
+                    <h6>Player: <span style="color:#850505">{{post.name}}</span></h6>
+                    <div class="d-flex w-100 justify-content-between">
+                        <h6 class="mb-1">Course: <span style="color:#850505">{{post.title}}</span></h6>
+                        <small>{{post.date}}</small>
+                    </div>
+                    <p class="mb-1">Number of throws: <span style="color:#850505">{{post.description}}</span></p>
                 </div>
-                <p class="mb-1">Number of throws: <span style="color:#850505">{{post.description}}</span></p>
             </a>
         
     </div>