style: update fireblog page ui

Author: Sye0w

src/app/app.routes.ts

@@ -33,11 +33,7 @@ export const routes: Routes = [
         loadComponent: () => import('../app/components/fireblog-page/fireblog-page.component')
         .then(mod => mod.FireblogPageComponent)
       },
-      {
-        path:'blog-detail',
-        loadComponent: () => import('../app/components/fireblog-detail/fireblog-detail.component')
-        .then(mod => mod.FireblogDetailComponent)
-      }
+      
     ]
   }
 ];

src/app/components/create-post/create-post.component.html

@@ -8,9 +8,9 @@
     </div>
   </div>
   <div class="content-grp">
-    <textarea name="content" id="post" [(ngModel)]="content"></textarea>
+    <textarea name="content" id="post" placeholder="Share your thoughts or start writing your story here..." [(ngModel)]="content"></textarea>
     <button mat-raised-button color="primary" (click)="createPost()" title="create post">
-      Create Post
+      create post
     </button>
   </div>
 </section>

src/app/components/create-post/create-post.component.scss

@@ -1,15 +1,14 @@
 @use '../../../partials/variables' as *;
 
-
-
 section {
   display: flex;
-  gap: 2.75rem;
+  flex-direction: column;
+  gap: 1rem;
   position: fixed !important;
   padding: 1.25rem;
   bottom: 0;
   background-color: #fff;
-  width: 100%;
+  width: 100% !important;
   left: 0;
   right: 0;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
@@ -23,7 +22,7 @@ section {
       display: flex;
       gap: .25rem;
 
-      img{
+      img {
         width: 12px;
         height: 12px;
       }
@@ -39,28 +38,34 @@ section {
   .content-grp {
     display: flex;
     flex-direction: column;
-    gap: .5rem;
+    align-items: stretch;
+    gap: 1rem;
     width: 100%;
 
     textarea {
-      resize: none;
+      resize: vertical;
       border: none;
       outline: none;
       padding: 1rem;
       font-size: 1.25rem;
       width: 100%;
-      max-width: 40rem;
-      min-width: 20rem;
+      min-height: 100px;
+      max-height: 300px;
       border-radius: 0.375rem;
       background-color: #f4f4f4;
       color: $palesky;
+
+      &:focus{
+        border: 1px solid $oxfordblue;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+        transition: box-shadow 0.3s ease-in-out;
+      }
     }
 
     button {
       cursor: pointer;
-      align-self: end;
-      margin-right: 7rem;
-      width: 8rem;
+      align-self: flex-end;
+      width: 10rem;
       height: 2.125rem;
       border: none;
       border-radius: 0.375rem;
@@ -71,3 +76,24 @@ section {
     }
   }
 }
+
+@media (min-width: 768px) {
+  section {
+    flex-direction: row;
+    align-items: flex-start;
+
+    .content-grp {
+      flex-direction: row;
+      align-items: flex-start;
+
+      textarea {
+        flex-grow: 1;
+        min-width: 0;
+      }
+
+      button {
+        align-self: flex-start;
+      }
+    }
+  }
+}

src/app/components/fireblog-detail/fireblog-detail.component.html

@@ -7,10 +7,17 @@
   <mat-sidenav-content>
     <div class="fireblog-content">
       <section class="posts-section">
-        <h2><span>Fire</span>blog Posts</h2>
-        <ul>
-          <app-post-card *ngFor="let post of blogPosts" [blogPost]="post"></app-post-card>
-        </ul>
+        <div>
+          <h2><span>Fire</span>blog Posts</h2>
+          <p>({{ blogPosts.length }})</p>
+        </div>
+        @if(blogPosts.length > 0){
+          <ul>
+            <app-post-card *ngFor="let post of blogPosts" [blogPost]="post"></app-post-card>
+          </ul>
+        } @else {
+          
+        }
       </section>
       <app-create-post class="create-post-section" (toggleSidebar)="toggleSidebar($event)"></app-create-post>
     </div>

src/app/components/fireblog-detail/fireblog-detail.component.scss

@@ -2,7 +2,7 @@
 @use '../../../partials/mixins' as *;
 
 .fireblog-container {
-  padding-top: 2rem;
+  // padding-top: 2rem;
   height: 100vh;
   width: 100vw;
   display: flex;
@@ -25,7 +25,6 @@
   mat-sidenav-content {
     display: flex;
     justify-content: center !important;
-
     overflow: hidden;
 
     .fireblog-content {
@@ -37,18 +36,28 @@
       .posts-section {
         display: flex;
         flex-direction: column;
+        justify-items: center;
+        align-items: center;
+        border: 2px solid;
         padding: 1.25rem;
-        padding-bottom: 7rem;
+
+        div{
+          display: flex;
+          color: $oxfordblue;
+          font-weight: 500;
+        }
 
         ul {
-          padding: 1.25rem 1.25rem 0 3rem;
+          width: 80%;
+          padding: 1.25rem 1.25rem 10rem  3rem;
+          margin-bottom: 6rem !important;
           display: flex;
           flex-direction: column;
           gap: 1.25rem;
-
-          max-height: 45rem;
+          max-height: 38rem;
           overflow-y: auto;
 
+
           &::-webkit-scrollbar {
             width: 8px;
           }
@@ -59,12 +68,12 @@
           }
 
           &::-webkit-scrollbar-thumb {
-            background: #fff;
+            background: darken($blueviolet, 5%);
             border-radius: 4px;
           }
 
           &::-webkit-scrollbar-thumb:hover {
-            background: darken(#fff, 10%);
+            background: darken($oxfordblue, 10%);
           }
         }
 

src/app/components/fireblog-detail/fireblog-detail.component.spec.ts

@@ -1,7 +1,10 @@
 @use '../../../partials/variables' as *;
 
 .post-card {
-  width: 100%;
+  width: 80%;
+  position: relative;
+  left: 9.875%;
+  right: 15%;
   border-radius: 0.5rem;
   background-color: #fff;
   padding: 1.5rem;

src/app/components/fireblog-detail/fireblog-detail.component.ts

@@ -2,7 +2,7 @@
 
 main{
   height: 100%;
-  width: 100%;
+  // width: 100%;
   display: flex;
   justify-content: center;
   // align-items: center;