Converted forum UI into a reusable component

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { CalendarComponent } from './calendar/calendar.component';
 import { AttendanceComponent } from './tabs/more/attendance/attendance.component';
+import { ForumComponent } from './reusable-components/forum/forum.component';
 
 @NgModule({
 	declarations: [
@@ -35,6 +36,7 @@ import { AttendanceComponent } from './tabs/more/attendance/attendance.component
 		NotesDetailsComponent,
 		CalendarComponent,
 		AttendanceComponent,
+		ForumComponent,
 	],
 	imports: [
 		BrowserModule,

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

@@ -0,0 +1,195 @@
+<section class="forum-details">
+    <section class="add-post">
+        <textarea placeholder="Start a discussion"></textarea>
+        <div class="input-holder">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/hashtag.svg"></svg-icon>
+            <input type="text" placeholder="Hashtag">
+        </div>
+        <div class="input-holder">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add-person.svg"></svg-icon>
+            <input type="text" placeholder="Tag person">
+        </div>
+        <div class="input-holder">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/link.svg"></svg-icon>
+            <input type="text" placeholder="URL">
+        </div>
+        <div class="input-holder">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
+            <input type="file">
+        </div>
+        <button class="add-post-button"> Add Post </button>
+    </section>
+
+    <ul class="forum-post-list">
+        <li class="post" [ngClass]="{'active': selectedPost === 1 }">
+            <button class="book-mark-button">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
+            </button>
+            <div (click)="selectedPost = 1">
+                <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>
+                <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': 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

@@ -0,0 +1,321 @@
+.forum-details {
+    .add-post {
+        width: 90%;
+        margin: 10px auto;
+        textarea {
+            border: 0px;
+            height: 70px;
+            display: block;
+            width: 100%;
+            font-size: 16px;
+            color: var(--light-grey);
+            padding: 10px;
+            background-color: transparent;
+            border-bottom: 2px solid var(--dark-grey);
+            resize: none;
+            margin-bottom: 20px;
+        }
+    }
+
+    .input-holder {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        justify-content: flex-start;
+        margin-bottom: 10px;
+        background-color: var(--ash-black);
+        border-radius: 5px;
+        padding: 10px;
+        height: 50px;
+
+        .icon {
+            width: 20px;
+            height: 20px;
+            fill: var(--light-grey);
+        }
+
+        input {
+            font-size: 14px;
+            border: 0px;
+            background-color: transparent;
+            padding: 0 10px;
+            color: var(--light-grey);
+            display: block;
+            flex-grow: 1;
+
+            &[type="file"] {
+                height: auto;
+            }
+        }
+    }
+
+    .add-post-button {
+        margin-top: 20px;
+        display: block;
+        width: 100px;
+        margin-left: auto;
+        height: 40px;
+        font-size: 14px;
+        background-color: var(--teal-green);
+        color: white;
+        border: 0px;
+        border-radius: 7px;
+    }
+
+    .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);
+            filter: brightness(85%);
+            display: flex;
+            align-items: center;
+            height: 45px;
+            padding: 0 5%;
+            position: relative;
+        }
+
+        .close-button {
+            border: 0px;
+            background-color: transparent;
+            margin-left: auto;
+
+            .icon {
+                width: 13px;
+                height: 13px;
+                fill: var(--light-grey);
+            }
+        }
+
+        h4 {
+            color: var(--light-grey);
+            font-size: 14px;
+            font-weight: 400;
+        }
+
+        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;
+        }
+
+        .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;
+        }
+
+        ul {
+            position: relative;
+            list-style: none;
+            padding: 0 5%;
+
+            li {
+                text-align: center;
+                color: white;
+                margin: 20px auto;
+                font-size: 14px;
+            }
+        }
+    }
+}
+
+
+.forum-post-list {
+    list-style: none;
+    width: 100%;
+    margin: 20px auto 0;
+    overflow: hidden;
+
+    .post {
+        background-color: var(--ash-black);
+        padding: 20px 5%;
+        border-bottom: 1px solid var(--dark-grey);
+        position: relative;
+
+        &.active {
+            p {
+                display: block;
+                max-height: none;
+            }
+            .comment-list {
+                display: block;
+            }
+        }
+    }
+
+    .book-mark-button {
+        position: absolute;
+        right: 10px;
+        top: 0;
+        border: 0px;
+        background-color: transparent;
+
+        .icon {
+            width: 20px;
+            height: 20px;
+            fill: var(--light-grey);
+        }
+    }
+
+    h5 {
+        font-size: 16px;
+        color: white;
+        font-weight: 400;
+        margin: 0px auto 15px;
+    }
+
+    p {
+        font-size: 14px;
+        color: var(--light-grey);
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        max-height: 50px;
+        margin: 15px auto;
+        line-height: 1.7;
+    }
+
+    .author {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin: 15px auto;
+
+        img {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            margin-right: 7px;
+        }
+
+        label {
+            font-size: 12px;
+            color: white;
+        }
+
+        .time-stamp {
+            margin-left: 20px;
+            color: var(--light-grey);
+            font-size: 12px;
+
+            &::before {
+                content: '';
+                width: 5px;
+                height: 5px;
+                background-color: var(--light-grey);
+                border-radius: 50%;
+                display: inline-block;
+                margin-right: 7px;
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .action-buttons {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        button {
+            background-color: transparent;
+            color: var(--light-grey);
+            border: 0px;
+            padding: 0 10px;
+
+            .icon {
+                width: 15px;
+                height: 15px;
+                margin-right: 2px;
+                fill: var(--light-grey);
+            }
+
+            span {
+                vertical-align: top;
+                font-size: 12px;
+            }
+
+            &.more-button {
+                margin-left: auto;
+                border: 1px solid var(--light-grey);
+                border-radius: 5px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .icon {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    .comment-list {
+        list-style: none;
+        margin: 20px auto;
+        width: 95%;
+        display: none;
+
+        .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;
+
+            .icon {
+                width: 15px;
+                height: 15px;
+                margin-right: 5px;
+                fill: var(--light-grey);
+            }
+        }
+
+        .comment {
+            margin-bottom: 40px;
+
+            p {
+                display: block;
+                max-height: none;
+            }
+        }
+    }
+
+}

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

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

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

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-forum',
+	templateUrl: './forum.component.html',
+	styleUrls: ['./forum.component.scss']
+})
+export class ForumComponent implements OnInit {
+    showMorePostOptions: boolean = false;
+    selectedPost: number;
+    showAddCommentToPost: boolean = false;
+
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+
+}

src/app/tabs/courses/details/details.component.html

@@ -185,200 +185,8 @@
         </ul>
 
 
-        <section class="forum-details" *ngIf="selectedSegment === 'forum'">
-            <section class="add-post">
-                <textarea placeholder="Start a discussion"></textarea>
-                <div class="input-holder">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/hashtag.svg"></svg-icon>
-                    <input type="text" placeholder="Hashtag">
-                </div>
-                <div class="input-holder">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add-person.svg"></svg-icon>
-                    <input type="text" placeholder="Tag person">
-                </div>
-                <div class="input-holder">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/link.svg"></svg-icon>
-                    <input type="text" placeholder="URL">
-                </div>
-                <div class="input-holder">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
-                    <input type="file">
-                </div>
-                <button class="add-post-button"> Add Post </button>
-            </section>
-
-            <ul class="forum-post-list">
-                <li class="post" [ngClass]="{'active': selectedPost === 1 }">
-                    <button class="book-mark-button">
-                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
-                    </button>
-                    <div (click)="selectedPost = 1">
-                        <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>
-                        <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': 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 *ngIf="selectedSegment === 'forum'">
+            <app-forum></app-forum>
         </section>
     </div>
 

src/app/tabs/courses/details/details.component.scss

@@ -328,325 +328,3 @@
         }
     }
 }
-
-.forum-details {
-    .add-post {
-        width: 90%;
-        margin: 10px auto;
-        textarea {
-            border: 0px;
-            height: 70px;
-            display: block;
-            width: 100%;
-            font-size: 16px;
-            color: var(--light-grey);
-            padding: 10px;
-            background-color: transparent;
-            border-bottom: 2px solid var(--dark-grey);
-            resize: none;
-            margin-bottom: 20px;
-        }
-    }
-
-    .input-holder {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        justify-content: flex-start;
-        margin-bottom: 10px;
-        background-color: var(--ash-black);
-        border-radius: 5px;
-        padding: 10px;
-        height: 50px;
-
-        .icon {
-            width: 20px;
-            height: 20px;
-            fill: var(--light-grey);
-        }
-
-        input {
-            font-size: 14px;
-            border: 0px;
-            background-color: transparent;
-            padding: 0 10px;
-            color: var(--light-grey);
-            display: block;
-            flex-grow: 1;
-
-            &[type="file"] {
-                height: auto;
-            }
-        }
-    }
-
-    .add-post-button {
-        margin-top: 20px;
-        display: block;
-        width: 100px;
-        margin-left: auto;
-        height: 40px;
-        font-size: 14px;
-        background-color: var(--teal-green);
-        color: white;
-        border: 0px;
-        border-radius: 7px;
-    }
-
-    .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);
-            filter: brightness(85%);
-            display: flex;
-            align-items: center;
-            height: 45px;
-            padding: 0 5%;
-            position: relative;
-        }
-
-        .close-button {
-            border: 0px;
-            background-color: transparent;
-            margin-left: auto;
-
-            .icon {
-                width: 13px;
-                height: 13px;
-                fill: var(--light-grey);
-            }
-        }
-
-        h4 {
-            color: var(--light-grey);
-            font-size: 14px;
-            font-weight: 400;
-        }
-
-        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;
-        }
-
-        .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;
-        }
-
-        ul {
-            position: relative;
-            list-style: none;
-            padding: 0 5%;
-
-            li {
-                text-align: center;
-                color: white;
-                margin: 20px auto;
-                font-size: 14px;
-            }
-        }
-    }
-}
-
-
-.forum-post-list {
-    list-style: none;
-    width: 100%;
-    margin: 20px auto 0;
-    overflow: hidden;
-
-    .post {
-        background-color: var(--ash-black);
-        padding: 20px 5%;
-        border-bottom: 1px solid var(--dark-grey);
-        position: relative;
-
-        &.active {
-            p {
-                display: block;
-                max-height: none;
-            }
-            .comment-list {
-                display: block;
-            }
-        }
-    }
-
-    .book-mark-button {
-        position: absolute;
-        right: 10px;
-        top: 0;
-        border: 0px;
-        background-color: transparent;
-
-        .icon {
-            width: 20px;
-            height: 20px;
-            fill: var(--light-grey);
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin: 0px auto 15px;
-    }
-
-    p {
-        font-size: 14px;
-        color: var(--light-grey);
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        max-height: 50px;
-        margin: 15px auto;
-        line-height: 1.7;
-    }
-
-    .author {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        margin: 15px auto;
-
-        img {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            margin-right: 7px;
-        }
-
-        label {
-            font-size: 12px;
-            color: white;
-        }
-
-        .time-stamp {
-            margin-left: 20px;
-            color: var(--light-grey);
-            font-size: 12px;
-
-            &::before {
-                content: '';
-                width: 5px;
-                height: 5px;
-                background-color: var(--light-grey);
-                border-radius: 50%;
-                display: inline-block;
-                margin-right: 7px;
-                vertical-align: middle;
-            }
-        }
-    }
-
-    .action-buttons {
-        display: flex;
-        align-items: center;
-        width: 100%;
-
-        button {
-            background-color: transparent;
-            color: var(--light-grey);
-            border: 0px;
-            padding: 0 10px;
-
-            .icon {
-                width: 15px;
-                height: 15px;
-                margin-right: 2px;
-                fill: var(--light-grey);
-            }
-
-            span {
-                vertical-align: top;
-                font-size: 12px;
-            }
-
-            &.more-button {
-                margin-left: auto;
-                border: 1px solid var(--light-grey);
-                border-radius: 5px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                .icon {
-                    margin-right: 0;
-                }
-            }
-        }
-    }
-
-    .comment-list {
-        list-style: none;
-        margin: 20px auto;
-        width: 95%;
-        display: none;
-
-        .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;
-
-            .icon {
-                width: 15px;
-                height: 15px;
-                margin-right: 5px;
-                fill: var(--light-grey);
-            }
-        }
-
-        .comment {
-            margin-bottom: 40px;
-
-            p {
-                display: block;
-                max-height: none;
-            }
-        }
-    }
-
-}

src/app/tabs/courses/details/details.component.ts

@@ -13,9 +13,6 @@ export class DetailsComponent implements OnInit {
     heading: string;
     routeSubscription: Subscription;
     selectedChapter: number = 1;
-    showMorePostOptions: boolean = false;
-    selectedPost: number;
-    showAddCommentToPost: boolean = false;
 
 	constructor(
         private route: ActivatedRoute,