Forum post details UI

src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { AttendanceComponent } from './tabs/more/attendance/attendance.component
 import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component';
 import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-notes.component';
 import { QuizComponent } from './tabs/courses/quiz/quiz.component';
+import { PostDetailsComponent } from './reusable-components/forum/post-details/post-details.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'welcome' },
@@ -24,6 +25,7 @@ const routes: Routes = [
     { component: CalendarComponent, path: 'calendar' },
     { component: AttendanceComponent, path: 'attendance'},
     { component: ForumPageComponent, path: 'forum'},
+    { component: PostDetailsComponent, path: 'forum-post-details'},
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -25,6 +25,7 @@ import { VideoNotesComponent } from './tabs/courses/video-chapter/video-notes/vi
 import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-notes.component';
 import { CourseDetailsComponent } from './tabs/courses/course-details/course-details.component';
 import { QuizComponent } from './tabs/courses/quiz/quiz.component';
+import { PostDetailsComponent } from './reusable-components/forum/post-details/post-details.component';
 
 @NgModule({
 	declarations: [
@@ -45,6 +46,7 @@ import { QuizComponent } from './tabs/courses/quiz/quiz.component';
 		ChapterNotesComponent,
 		CourseDetailsComponent,
 		QuizComponent,
+		PostDetailsComponent,
 	],
 	imports: [
 		BrowserModule,

src/app/reusable-components/forum/forum.component.html

@@ -26,17 +26,17 @@
     </section>
 
     <ul class="forum-post-list">
-        <li class="post" [ngClass]="{'active': selectedPost === 1 }">
+        <li class="post">
             <button class="book-mark-button">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
             </button>
-            <div (click)="selectedPost = 1">
+            <div [routerLink]="['/forum-post-details']">
                 <h5>
                     Can anyone explain dark matter radiation theory in a most simplest
                     way possible?
                 </h5>
                 <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente earum at alias aliquam voluptates, cupiditate nobis. Beatae iure mollitia sunt similique omnis blanditiis rerum impedit. Soluta unde amet officia molestiae!
+                    It's easy to explain actually
                 </p>
             </div>
             <div class="author">
@@ -119,82 +119,5 @@
                 </li>
             </ul>
         </li>
-
-        <li class="post" [ngClass]="{'active': selectedPost === 2 }">
-            <button class="book-mark-button">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
-            </button>
-            <div (click)="selectedPost = 2">
-                <h5>
-                    Can anyone explain dark matter radiation theory in a most simplest
-                    way possible?
-                </h5>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente earum at alias aliquam voluptates, cupiditate nobis. Beatae iure mollitia sunt similique omnis blanditiis rerum impedit. Soluta unde amet officia molestiae!
-                </p>
-            </div>
-            <div class="author">
-                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                <label> Dwayne the Rock </label>
-                <span class="time-stamp"> August 15, 2020 </span>
-            </div>
-            <div class="action-buttons">
-                <button>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                    <span> 56 </span>
-                </button>
-                <button>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-                    <span> 56 </span>
-                </button>
-                <button>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
-                    <span> 56 </span>
-                </button>
-
-                <button class="more-button" (click)="showMorePostOptions = true">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                </button>
-            </div>
-
-            <ul class="comment-list">
-                <button class="add-comment-button" (click)="showAddCommentToPost = true">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-                    ADD A COMMENT
-                </button>
-            </ul>
-        </li>
     </ul>
-
-    <section class="more-options-slideup" [ngClass]="{'active' : showMorePostOptions }">
-        <header>
-            <h4> More Options </h4>
-            <button class="close-button" (click)="showMorePostOptions = false">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
-            </button>
-        </header>
-        <ul>
-            <li>
-                Downvote Answer
-            </li>
-            <li>
-                Downvote Question
-            </li>
-            <li>
-                Report
-            </li>
-        </ul>
-    </section>
-
-
-    <section class="more-options-slideup" [ngClass]="{'active' : showAddCommentToPost }">
-        <header>
-            <h4> Add Comment </h4>
-            <button class="close-button" (click)="showAddCommentToPost = false">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
-            </button>
-        </header>
-        <textarea placeholder="Type your comment..."></textarea>
-        <button class="post-comment-button"> Submit </button>
-    </section>
 </section>

src/app/reusable-components/forum/forum.component.scss

@@ -78,90 +78,90 @@
         border-radius: 5px;
         margin-right: 20px;
     }
+}
 
-    .more-options-slideup {
-        position: fixed;
-        width: 100%;
+.more-options-slideup {
+    position: fixed;
+    width: 100%;
+    background-color: var(--ash-black);
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    transform: translateY(100vh);
+    transition: box-shadow 0.5s, transform 0.5s;
+
+    &.active {
+        box-shadow: 0 0 100vw 100vh rgba(black, 0.8);
+        transform: translateY(0);
+    }
+
+    header {
         background-color: var(--ash-black);
-        left: 0;
-        bottom: 0;
-        z-index: 1;
-        transform: translateY(100vh);
-        transition: box-shadow 0.5s, transform 0.5s;
+        filter: brightness(85%);
+        display: flex;
+        align-items: center;
+        height: 45px;
+        padding: 0 5%;
+        position: relative;
+    }
 
-        &.active {
-            box-shadow: 0 0 100vw 100vh rgba(black, 0.8);
-            transform: translateY(0);
-        }
+    .close-button {
+        border: 0px;
+        background-color: transparent;
+        margin-left: auto;
 
-        header {
-            background-color: var(--ash-black);
-            filter: brightness(85%);
-            display: flex;
-            align-items: center;
-            height: 45px;
-            padding: 0 5%;
-            position: relative;
+        .icon {
+            width: 13px;
+            height: 13px;
+            fill: var(--light-grey);
         }
+    }
 
-        .close-button {
-            border: 0px;
-            background-color: transparent;
-            margin-left: auto;
+    h4 {
+        color: var(--light-grey);
+        font-size: 14px;
+        font-weight: 400;
+    }
 
-            .icon {
-                width: 13px;
-                height: 13px;
-                fill: var(--light-grey);
-            }
-        }
+    textarea {
+        display: block;
+        height: 150px;
+        resize: none;
+        background-color: var(--black);
+        font-size: 14px;
+        color: var(--light-grey);
+        padding: 15px;
+        border-radius: 7px;
+        width: 90%;
+        margin: 20px auto;
+        border: 0px;
+    }
 
-        h4 {
-            color: var(--light-grey);
-            font-size: 14px;
-            font-weight: 400;
-        }
+    .post-comment-button {
+        width: 90%;
+        margin: 20px auto;
+        height: 40px;
+        background-color: var(--dark-grey);
+        box-shadow: 1px 1px 5px var(--black);
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--light-grey);
+        font-size: 14px;
+        border: 0px;
+    }
 
-        textarea {
-            display: block;
-            height: 150px;
-            resize: none;
-            background-color: var(--black);
-            font-size: 14px;
-            color: var(--light-grey);
-            padding: 15px;
-            border-radius: 7px;
-            width: 90%;
-            margin: 20px auto;
-            border: 0px;
-        }
+    ul {
+        position: relative;
+        list-style: none;
+        padding: 0 5%;
 
-        .post-comment-button {
-            width: 90%;
+        li {
+            text-align: center;
+            color: white;
             margin: 20px auto;
-            height: 40px;
-            background-color: var(--dark-grey);
-            box-shadow: 1px 1px 5px var(--black);
-            border-radius: 5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--light-grey);
             font-size: 14px;
-            border: 0px;
-        }
-
-        ul {
-            position: relative;
-            list-style: none;
-            padding: 0 5%;
-
-            li {
-                text-align: center;
-                color: white;
-                margin: 20px auto;
-                font-size: 14px;
-            }
         }
     }
 }
@@ -172,14 +172,26 @@
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
+    padding: 0 2%;
 
     .post {
         background-color: var(--ash-black);
         padding: 20px 5%;
-        border-bottom: 1px solid var(--dark-grey);
         position: relative;
+        border-radius: 10px;
+        overflow: hidden;
+        margin: 20px auto;
 
         &.active {
+            box-shadow: 0px 0px 5px var(--teal-green);
+
+            .action-buttons {
+                button {
+                    border: 1px solid var(--light-grey);
+                    border-radius: 5px;
+                }
+            }
+
             p {
                 display: block;
                 max-height: none;
@@ -269,6 +281,11 @@
             color: var(--light-grey);
             border: 0px;
             padding: 0 10px;
+            height: 30px;
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
             .icon {
                 width: 15px;
@@ -278,7 +295,6 @@
             }
 
             span {
-                vertical-align: top;
                 font-size: 12px;
             }
 
@@ -289,6 +305,7 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
+                height: 20px;
 
                 .icon {
                     margin-right: 0;
@@ -296,43 +313,62 @@
             }
         }
     }
+}
 
-    .comment-list {
-        list-style: none;
-        margin: 20px auto;
-        width: 95%;
-        display: none;
+.question {
+    font-weight: 400;
+    font-size: 20px;
+    padding: 0 5%;
+    color: var(--light-grey);
+    margin: 20px auto;
+}
 
-        .add-comment-button {
-            width: 100%;
-            margin: 40px auto;
-            height: 40px;
-            background-color: var(--dark-grey);
-            box-shadow: 1px 1px 5px var(--black);
-            border-radius: 5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--light-grey);
-            font-size: 14px;
-            border: 0px;
+.post-header {
+    margin: 20px auto;
+    padding: 0 5%;
+    font-size: 16px;
+    color: var(--light-grey);
+    text-align: center;
+}
 
-            .icon {
-                width: 15px;
-                height: 15px;
-                margin-right: 5px;
-                fill: var(--light-grey);
-            }
-        }
 
-        .comment {
-            margin-bottom: 40px;
+.add-comment-button {
+    width: 100%;
+    margin: 30px auto;
+    height: 40px;
+    background-color: var(--dark-grey);
+    box-shadow: 1px 1px 5px var(--black);
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--light-grey);
+    font-size: 14px;
+    border: 0px;
+
+    .icon {
+        width: 15px;
+        height: 15px;
+        margin-right: 5px;
+        fill: var(--light-grey);
+    }
+}
 
-            p {
-                display: block;
-                max-height: none;
-            }
+.comment-list {
+    list-style: none;
+    margin: 20px auto;
+    padding: 20px 5%;
+    display: none;
+    background-color: var(--black);
+    border-radius: 10px;
+    box-shadow: 0px 0px 5px var(--black);
+
+    .comment {
+        margin-bottom: 40px;
+
+        p {
+            display: block;
+            max-height: none;
         }
     }
-
 }

src/app/reusable-components/forum/post-details/post-details.component.html

@@ -0,0 +1,339 @@
+<div class="page">
+    <header class="nav-header">
+        <button class="close-button" (click)="back()">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+        </button>
+        <h5>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+            <span> Can anyone explain dark matter radiation theory in a most simplest
+            way possible? </span>
+        </h5>
+    </header>
+
+    <h2 class="question">
+        Can anyone explain dark matter radiation theory in a most simplest
+        way possible?
+    </h2>
+
+    <ul class="forum-post-list">
+        <header class="post-header"> Top Answer </header>
+
+        <li class="post" [ngClass]="{'active' : selectedAnswer === 1}">
+            <button class="book-mark-button">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
+            </button>
+            <div (click)="selectedAnswer = 1">
+                <h5>
+                    It's easy to explain actually
+                </h5>
+                <p>
+                    You just need to refer to the article updated by IEEE Labs.
+                </p>
+            </div>
+            <div class="author">
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <label> Dwayne the Rock </label>
+                <span class="time-stamp"> August 15, 2020 </span>
+            </div>
+            <div class="action-buttons">
+                <button>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
+                    <span> 56 </span>
+                </button>
+                <button>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                    <span> 56 </span>
+                </button>
+                <button>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                    <span> 56 </span>
+                </button>
+
+                <button class="more-button" (click)="showMorePostOptions = true">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                </button>
+            </div>
+
+            <button class="add-comment-button" (click)="showAddCommentToPost = true">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                ADD A COMMENT
+            </button>
+
+            <ul class="comment-list">
+                <li class="comment">
+                    <div class="author">
+                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                        <label> Dwayne the Rock </label>
+                        <span class="time-stamp"> August 15, 2020 </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
+                    </p>
+                    <div class="action-buttons">
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
+                            <span> Reply </span>
+                        </button>
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
+                            <span> 56 </span>
+                        </button>
+
+                        <button class="more-button">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                        </button>
+                    </div>
+                </li>
+
+                <li class="comment">
+                    <div class="author">
+                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                        <label> Dwayne the Rock </label>
+                        <span class="time-stamp"> August 15, 2020 </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
+                    </p>
+                    <div class="action-buttons">
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
+                            <span> Reply </span>
+                        </button>
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                            <span> 56 </span>
+                        </button>
+
+                        <button class="more-button">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                        </button>
+                    </div>
+                </li>
+            </ul>
+        </li>
+
+        <header class="post-header"> Other Answers </header>
+
+        <li class="post" [ngClass]="{'active' : selectedAnswer === 2}">
+            <button class="book-mark-button">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
+            </button>
+            <div (click)="selectedAnswer = 2">
+                <h5>
+                    Have you watched the Xenon experiment?
+                </h5>
+                <p>
+                    A spark was created in the lab where there were 56 unknown interactions!!!
+                </p>
+            </div>
+            <div class="author">
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <label> Dwayne the Rock </label>
+                <span class="time-stamp"> August 15, 2020 </span>
+            </div>
+            <div class="action-buttons">
+                <button>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
+                    <span> 56 </span>
+                </button>
+                <button>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                    <span> 56 </span>
+                </button>
+                <button>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                    <span> 56 </span>
+                </button>
+
+                <button class="more-button" (click)="showMorePostOptions = true">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                </button>
+            </div>
+
+            <button class="add-comment-button" (click)="showAddCommentToPost = true">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                ADD A COMMENT
+            </button>
+
+            <ul class="comment-list">
+                <li class="comment">
+                    <div class="author">
+                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                        <label> Dwayne the Rock </label>
+                        <span class="time-stamp"> August 15, 2020 </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
+                    </p>
+                    <div class="action-buttons">
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
+                            <span> Reply </span>
+                        </button>
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
+                            <span> 56 </span>
+                        </button>
+
+                        <button class="more-button">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                        </button>
+                    </div>
+                </li>
+
+                <li class="comment">
+                    <div class="author">
+                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                        <label> Dwayne the Rock </label>
+                        <span class="time-stamp"> August 15, 2020 </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
+                    </p>
+                    <div class="action-buttons">
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
+                            <span> Reply </span>
+                        </button>
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                            <span> 56 </span>
+                        </button>
+
+                        <button class="more-button">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                        </button>
+                    </div>
+                </li>
+            </ul>
+        </li>
+
+
+        <li class="post" [ngClass]="{'active' : selectedAnswer === 3}">
+            <button class="book-mark-button">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
+            </button>
+            <div (click)="selectedAnswer = 3">
+                <h5>
+                    Have you watched the Xenon experiment?
+                </h5>
+                <p>
+                    A spark was created in the lab where there were 56 unknown interactions!!!
+                </p>
+            </div>
+            <div class="author">
+                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                <label> Dwayne the Rock </label>
+                <span class="time-stamp"> August 15, 2020 </span>
+            </div>
+            <div class="action-buttons">
+                <button>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
+                    <span> 56 </span>
+                </button>
+                <button>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                    <span> 56 </span>
+                </button>
+                <button>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                    <span> 56 </span>
+                </button>
+
+                <button class="more-button" (click)="showMorePostOptions = true">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                </button>
+            </div>
+
+            <button class="add-comment-button" (click)="showAddCommentToPost = true">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                ADD A COMMENT
+            </button>
+
+            <ul class="comment-list">
+                <li class="comment">
+                    <div class="author">
+                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                        <label> Dwayne the Rock </label>
+                        <span class="time-stamp"> August 15, 2020 </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
+                    </p>
+                    <div class="action-buttons">
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
+                            <span> Reply </span>
+                        </button>
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
+                            <span> 56 </span>
+                        </button>
+
+                        <button class="more-button">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                        </button>
+                    </div>
+                </li>
+
+                <li class="comment">
+                    <div class="author">
+                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                        <label> Dwayne the Rock </label>
+                        <span class="time-stamp"> August 15, 2020 </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
+                    </p>
+                    <div class="action-buttons">
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
+                            <span> Reply </span>
+                        </button>
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                            <span> 56 </span>
+                        </button>
+
+                        <button class="more-button">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                        </button>
+                    </div>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <section class="more-options-slideup" [ngClass]="{'active' : showMorePostOptions }">
+        <header>
+            <h4> More Options </h4>
+            <button class="close-button" (click)="showMorePostOptions = false">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+            </button>
+        </header>
+        <ul>
+            <li>
+                Downvote Answer
+            </li>
+            <li>
+                Downvote Question
+            </li>
+            <li>
+                Report
+            </li>
+        </ul>
+    </section>
+
+
+    <section class="more-options-slideup" [ngClass]="{'active' : showAddCommentToPost }">
+        <header>
+            <h4> Add Comment </h4>
+            <button class="close-button" (click)="showAddCommentToPost = false">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+            </button>
+        </header>
+        <textarea placeholder="Type your comment..."></textarea>
+        <button class="post-comment-button"> Submit </button>
+    </section>
+
+</div>

src/app/reusable-components/forum/post-details/post-details.component.scss

@@ -0,0 +1,51 @@
+@import '../forum.component.scss';
+
+.page {
+    background-color: var(--black);
+    height: 100vh;
+    overflow: auto;
+}
+
+.nav-header {
+    background-color: var(--ash-black);
+    display: flex;
+    align-items: center;
+    padding: 0 5%;
+    height: 60px;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
+    box-shadow: 0px 0px 5px var(--black);
+
+    .close-button {
+        border: 0px;
+        background-color: transparent;
+        .icon {
+            width: 15px;
+            height: 15px;
+            fill: var(--light-grey);
+        }
+    }
+
+    h5 {
+        font-size: 16px;
+        color: white;
+        font-weight: 400;
+        margin-left: 20px;
+        letter-spacing: 1px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        .icon {
+            width: 15px;
+            height: 15px;
+            fill: white;
+            margin-right: 3px;
+            vertical-align: middle;
+            position: relative;
+            top: -1px;
+        }
+    }
+}

src/app/reusable-components/forum/post-details/post-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostDetailsComponent } from './post-details.component';
+
+describe('PostDetailsComponent', () => {
+  let component: PostDetailsComponent;
+  let fixture: ComponentFixture<PostDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PostDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/reusable-components/forum/post-details/post-details.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+	selector: 'app-post-details',
+	templateUrl: './post-details.component.html',
+	styleUrls: ['./post-details.component.scss']
+})
+export class PostDetailsComponent implements OnInit {
+    showMorePostOptions: boolean = false;
+    selectedAnswer: number = 1;
+    showAddCommentToPost: boolean = false;
+
+	constructor(
+        private location: Location
+    ) { }
+
+	ngOnInit(): void {
+	}
+
+    back() {
+        this.location.back();
+    }
+
+}

src/app/tabs/more/forum-page/forum-page.component.scss

@@ -14,6 +14,7 @@
     position: -webkit-sticky;
     top: 0;
     z-index: 1;
+    box-shadow: 0px 0px 5px var(--black);
 
     .close-button {
         border: 0px;