🎨 Refact: refactor post title

Sye0w · Oct 4, 2024 · 6ce2bc1 · 6ce2bc1
1 parent 3f64335
commit 6ce2bc1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/app/components/post-card/post-card.component.html b/src/app/components/post-card/post-card.component.html
@@ -4,14 +4,20 @@
     <div class="content-head">
       <div class="title">
         <img [src]="blogPost.user.image || randomAvatarUrl" [alt]="blogPost.user.username">
-        <h3>{{ blogPost.user.username || 'Username missing' }}</h3>
+        @if(isCurrentUserPost()){
+          <h3> You</h3>
+      } @else{
+        <h3>{{ (blogPost.user.username || 'Username missing') | prependAt }}</h3>
+      }
         <p>{{ getTimeSince(blogPost.createdAt) }}</p>
       </div>
-      <div class="comments">
+      <div class="comments" >
         <svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 24 24" fill="#5357B6">
           <path fill-rule="evenodd" d="M12 2.25c-2.429 0-4.817.178-7.152.521C2.87 3.061 1.5 4.795 1.5 6.741v6.018c0 1.946 1.37 3.68 3.348 3.97.877.129 1.761.234 2.652.316V21a.75.75 0 0 0 1.28.53l4.184-4.183a.39.39 0 0 1 .266-.112c2.006-.05 3.982-.22 5.922-.506 1.978-.29 3.348-2.023 3.348-3.97V6.741c0-1.947-1.37-3.68-3.348-3.97A49.145 49.145 0 0 0 12 2.25ZM8.25 8.625a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Zm2.625 1.125a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z" clip-rule="evenodd" />
         </svg>
-        <p>{{ blogPost.comments.length }} comments</p>
+        <button class="view-comment-btn" title="view comments" (click)="toggleComments()">
+          comments {{ blogPost.comments.length }}
+        </button>
       </div>
     </div>
     <ng-container *ngIf="!isEditing; else editMode">
@@ -44,4 +50,6 @@ <h3>{{ blogPost.user.username || 'Username missing' }}</h3>
       </div>
     </ng-template>
   </section>
+
+
 </li>
diff --git a/src/app/components/post-card/post-card.component.scss b/src/app/components/post-card/post-card.component.scss
@@ -28,7 +28,7 @@
       width: 100%;
       justify-content: space-between !important;
       gap: 0.75rem;
-      font-size: 0.75rem;
+      font-size: 0.75rem !important;
 
       .title {
         display: flex;
@@ -50,7 +50,15 @@
       .comments {
         display: flex;
         justify-self: end !important;
-        cursor: pointer;
+
+        .view-comment-btn{
+          font-weight: 600;
+          cursor: pointer;
+          color: $blueviolet;
+          outline: none;
+          border: none;
+          background: transparent
+        }
 
         p {
           font-weight: 500;