Forum UI enchancements

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

@@ -1,23 +1,28 @@
 <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">
+    <section class="add-post" *ngIf="!isSubSegment">
+        <div *ngIf="showAddPostInputs">
+            <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>
         </div>
-        <div class="input-holder">
-            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
-            <input type="file">
+        <div class="action-buttons">
+            <button class="cancel-post-button" *ngIf="showAddPostInputs" (click)="showAddPostInputs = false"> Cancel </button>
+            <button class="add-post-button" (click)="showAddPostInputs = true"> Add Post </button>
         </div>
-        <button class="add-post-button"> Add Post </button>
     </section>
 
     <ul class="forum-post-list">

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

@@ -1,7 +1,7 @@
 .forum-details {
     .add-post {
         width: 90%;
-        margin: 10px auto;
+        margin: 10px auto 20px;
         textarea {
             border: 0px;
             height: 70px;
@@ -49,17 +49,34 @@
         }
     }
 
-    .add-post-button {
+    .action-buttons {
+        display: flex;
+        width: 100%;
         margin-top: 20px;
+        justify-content: space-between;
+    }
+
+    .add-post-button {
         display: block;
-        width: 100px;
-        margin-left: auto;
+        flex-grow: 1;
         height: 40px;
         font-size: 14px;
         background-color: var(--teal-green);
         color: white;
         border: 0px;
-        border-radius: 7px;
+        border-radius: 5px;
+    }
+
+    .cancel-post-button {
+        display: block;
+        width: 100px;
+        height: 40px;
+        font-size: 14px;
+        background-color: var(--dark-grey);
+        color: white;
+        border: 0px;
+        border-radius: 5px;
+        margin-right: 20px;
     }
 
     .more-options-slideup {
@@ -153,7 +170,7 @@
 .forum-post-list {
     list-style: none;
     width: 100%;
-    margin: 20px auto 0;
+    margin: 0 auto;
     overflow: hidden;
 
     .post {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
 	selector: 'app-forum',
@@ -10,9 +10,14 @@ export class ForumComponent implements OnInit {
     selectedPost: number;
     showAddCommentToPost: boolean = false;
 
+    showAddPostInputs: boolean = false;
+
+    @Input() isSubSegment: boolean = false;
+
 	constructor() { }
 
 	ngOnInit(): void {
+
 	}
 
 }

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

@@ -206,7 +206,7 @@
 
 
         <section *ngIf="selectedSegment === 'forum'">
-            <app-forum></app-forum>
+            <app-forum [isSubSegment]="isSubSegment"></app-forum>
         </section>
     </div>
 

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

@@ -14,6 +14,7 @@ export class DetailsComponent implements OnInit {
     routeSubscription: Subscription;
     selectedChapter: number = 1;
     showDeletePopup: boolean = false;
+    isSubSegment: boolean = true;
 
 	constructor(
         private route: ActivatedRoute,
@@ -36,7 +37,7 @@ export class DetailsComponent implements OnInit {
 
     getPopupDecision(e : boolean) {
         if (e) {
-            this.showDeletePopup = false;            
+            this.showDeletePopup = false;
         }
     }