@@ -26,98 +26,60 @@
- -
-
+
+
+
+
+ -
+ Downvote Answer
+
+ -
+ Downvote Question
+
+ -
+ Report
+
+
+
diff --git a/src/app/reusable-components/forum/forum.component.scss b/src/app/reusable-components/forum/forum.component.scss
index 51eee60..f191cc4 100644
--- a/src/app/reusable-components/forum/forum.component.scss
+++ b/src/app/reusable-components/forum/forum.component.scss
@@ -1,28 +1,33 @@
-.forum-details {
- .add-post {
- width: 90%;
- margin: 10px auto 20px;
- .post-input {
- border: 0px;
- height: 150px;
- display: block;
- width: 100%;
- font-size: 16px;
- color: white;
- padding: 10px;
- background-color: transparent;
- border: 2px solid var(--dark-grey);
- border-radius: 7px;
- resize: none;
- margin: 20px auto;
+.add-post {
+ width: 90%;
+ margin: 10px auto 20px;
+ .post-input {
+ border: 0px;
+ height: 150px;
+ display: block;
+ width: 100%;
+ font-size: 16px;
+ color: white;
+ padding: 10px;
+ background-color: transparent;
+ border: 2px solid var(--dark-grey);
+ border-radius: 7px;
+ resize: none;
+ margin: 20px auto;
- &::placeholder {
- opacity: 0.8;
- font-weight: 400;
- }
+ &::placeholder {
+ opacity: 0.8;
+ font-weight: 400;
}
}
+ .action-buttons {
+ display: flex;
+ width: 100%;
+ margin-top: 20px;
+ justify-content: space-between;
+ }
+
.input-holder {
display: flex;
align-items: center;
@@ -62,13 +67,6 @@
}
}
- .action-buttons {
- display: flex;
- width: 100%;
- margin-top: 20px;
- justify-content: space-between;
- }
-
.add-post-button {
display: block;
flex-grow: 1;
@@ -198,13 +196,6 @@
&.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;
@@ -215,6 +206,21 @@
}
}
+ .tags {
+ width: 100%;
+
+ button {
+ background-color: var(--black);
+ color: white;
+ border-radius: 20px;
+ height: 25px;
+ font-size: 12px;
+ padding: 0 15px;
+ border: 0px;
+ margin-right: 5px;
+ }
+ }
+
.book-mark-button {
position: absolute;
right: 10px;
@@ -222,9 +228,15 @@
border: 0px;
background-color: transparent;
+ &.active {
+ .icon {
+ fill: var(--teal);
+ }
+ }
+
.icon {
- width: 20px;
- height: 20px;
+ width: 15px;
+ height: 15px;
fill: var(--light-grey);
}
}
@@ -291,19 +303,28 @@
button {
background-color: transparent;
- color: var(--light-grey);
- border: 0px;
+ color: var(--light-grey);
padding: 0 10px;
height: 30px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
+ border: 1px solid var(--light-grey);
+ border-radius: 5px;
+
+ &.active {
+ color: var(--teal-green);
+
+ .icon {
+ fill: var(--teal-green);
+ }
+ }
.icon {
width: 15px;
height: 15px;
- margin-right: 2px;
+ margin-right: 5px;
fill: var(--light-grey);
}
@@ -383,5 +404,11 @@
display: block;
max-height: none;
}
+
+ &.reply-comment {
+ margin-top: 10px;
+ padding-left: 15px;
+ border-left: 3px solid var(--light-grey);
+ }
}
}
diff --git a/src/app/reusable-components/forum/forum.component.ts b/src/app/reusable-components/forum/forum.component.ts
index 5bfd49c..ec15373 100644
--- a/src/app/reusable-components/forum/forum.component.ts
+++ b/src/app/reusable-components/forum/forum.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit, Input } from '@angular/core';
+import * as moment from 'moment';
@Component({
selector: 'app-forum',
@@ -14,10 +15,93 @@ export class ForumComponent implements OnInit {
@Input() isSubSegment: boolean = false;
+ forumPostList = [{
+ question: 'Can anyone tell me how to find Planck\'s constant',
+ isBookmarked: false,
+ isLiked: true,
+ likeCount: 30,
+ hashTags: ['h', 'maxplank', 'quantum physics'],
+ friendTags: ['Rahul'],
+ helpLink: 'https://en.wikipedia.org/wiki/Planck_constant',
+ files: [],
+ author: {
+ name: 'Mr Miyagi',
+ imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+ },
+ date: new Date(),
+ answers: [{
+ answer: 'Here is a video you can take a look at if you would like to understand more...',
+ isBookmarked: true,
+ isLiked: false,
+ likeCount: 10,
+ friendTags: ['Mr Miyagi'],
+ helpLink: 'https://www.youtube.com/watch?v=tQSbms5MDvY',
+ files: [],
+ author: {
+ name: 'Rahul',
+ imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+ },
+ date: new Date(),
+ comments: [{
+ description: 'Are you Sure Rahul?',
+ isLiked: true,
+ likeCount: 1,
+ author: {
+ name: 'Mr Miyagi',
+ imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+ },
+ date: new Date(),
+ replyComment: [{
+ description: 'Yes Bro!',
+ isLiked: false,
+ likeCount: 0,
+ author: {
+ name: 'Rahul',
+ imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+ },
+ date: new Date(),
+ }]
+ }]
+ }]
+ }, {
+ question: 'How to define "What is a cricle?" question?',
+ isBookmarked: true,
+ isLiked: false,
+ likeCount: 30,
+ hashTags: ['maths', 'circle'],
+ friendTags: [],
+ helpLink: '',
+ files: [],
+ author: {
+ name: 'Mr Miyagi',
+ imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+ },
+ date: new Date(),
+ answers: [{
+ answer: 'Here is a video you can take a look at if you would like to understand more...',
+ isBookmarked: true,
+ isLiked: false,
+ likeCount: 10,
+ friendTags: ['Mr Miyagi'],
+ helpLink: 'https://www.youtube.com/watch?v=tQSbms5MDvY',
+ files: [],
+ author: {
+ name: 'Rahul',
+ imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+ },
+ date: new Date(),
+ comments: []
+ }]
+ }];
+
constructor() { }
ngOnInit(): void {
}
+ getFormattedDate(date: any) {
+ return moment(date).format('MMMM DD, YYYY');
+ }
+
}
diff --git a/src/app/reusable-components/forum/post-details/post-details.component.html b/src/app/reusable-components/forum/post-details/post-details.component.html
index bbd6ebc..5924b62 100644
--- a/src/app/reusable-components/forum/post-details/post-details.component.html
+++ b/src/app/reusable-components/forum/post-details/post-details.component.html
@@ -36,7 +36,7 @@
August 15, 2020