From 3ee72eaf5d609bf703da20a3b597bfb920d14e16 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 23 Jun 2020 18:46:51 +0530 Subject: [PATCH] Softcoded forum + When an answer is opened, make sure the question and answer is properly seen from top. --- .../forum/forum.component.html | 12 +- .../forum/forum.component.scss | 25 +- .../forum/forum.component.ts | 90 ++++- .../post-details/post-details.component.html | 307 +++--------------- .../post-details/post-details.component.ts | 33 +- 5 files changed, 195 insertions(+), 272 deletions(-) diff --git a/src/app/reusable-components/forum/forum.component.html b/src/app/reusable-components/forum/forum.component.html index bc6f71f..212b68f 100644 --- a/src/app/reusable-components/forum/forum.component.html +++ b/src/app/reusable-components/forum/forum.component.html @@ -30,12 +30,18 @@ -
+
{{ post.question }}
- + +
+

+ Link Related to this Topic +

+
+
@@ -44,7 +50,7 @@ {{ getFormattedDate(post.date) }}
- diff --git a/src/app/reusable-components/forum/forum.component.scss b/src/app/reusable-components/forum/forum.component.scss index f191cc4..48592ad 100644 --- a/src/app/reusable-components/forum/forum.component.scss +++ b/src/app/reusable-components/forum/forum.component.scss @@ -258,6 +258,10 @@ max-height: 50px; margin: 15px auto; line-height: 1.7; + + a { + color: var(--teal); + } } .author { @@ -303,7 +307,7 @@ button { background-color: transparent; - color: var(--light-grey); + color: var(--light-grey); padding: 0 10px; height: 30px; margin-right: 10px; @@ -391,7 +395,7 @@ .comment-list { list-style: none; margin: 20px auto; - padding: 20px 5%; + padding: 5px 5% 20px; display: none; background-color: var(--black); border-radius: 10px; @@ -400,15 +404,30 @@ .comment { margin-bottom: 40px; + &:last-child { + margin-bottom: 0; + } + p { display: block; max-height: none; + margin: 10px auto; + } + + .author { + margin: 10px auto; } &.reply-comment { margin-top: 10px; - padding-left: 15px; + margin-bottom: 0px; + padding: 10px; + margin-left: auto; + width: 99%; + background-color: var(--ash-black); border-left: 3px solid var(--light-grey); + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; } } } diff --git a/src/app/reusable-components/forum/forum.component.ts b/src/app/reusable-components/forum/forum.component.ts index ec15373..eb49f1e 100644 --- a/src/app/reusable-components/forum/forum.component.ts +++ b/src/app/reusable-components/forum/forum.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, Input } from '@angular/core'; import * as moment from 'moment'; +import { Router } from '@angular/router'; @Component({ selector: 'app-forum', @@ -21,7 +22,7 @@ export class ForumComponent implements OnInit { isLiked: true, likeCount: 30, hashTags: ['h', 'maxplank', 'quantum physics'], - friendTags: ['Rahul'], + friendTags: ['Rahul', 'Ballack'], helpLink: 'https://en.wikipedia.org/wiki/Planck_constant', files: [], author: { @@ -51,7 +52,7 @@ export class ForumComponent implements OnInit { imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg' }, date: new Date(), - replyComment: [{ + replyComments: [{ description: 'Yes Bro!', isLiked: false, likeCount: 0, @@ -60,14 +61,87 @@ export class ForumComponent implements OnInit { imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg' }, date: new Date(), + }, { + description: 'Just take a look once and ping me in DM', + isLiked: true, + likeCount: 1, + author: { + name: 'Rahul', + imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg' + }, + date: new Date(), }] + }, { + 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(), + replyComments: [] + }] + }, { + 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: 'Awesome?', + isLiked: true, + likeCount: 1, + author: { + name: 'Mr Miyagi', + imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg' + }, + date: new Date(), + replyComments: [] + }, { + description: 'Awesome?', + isLiked: true, + likeCount: 1, + author: { + name: 'Mr Miyagi', + imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg' + }, + date: new Date(), + replyComments: [] + }, { + description: 'Awesome?', + isLiked: true, + likeCount: 1, + author: { + name: 'Mr Miyagi', + imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg' + }, + date: new Date(), + replyComments: [] + }, { + description: 'Awesome?', + isLiked: true, + likeCount: 1, + author: { + name: 'Mr Miyagi', + imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg' + }, + date: new Date(), + replyComments: [] }] }] }, { question: 'How to define "What is a cricle?" question?', isBookmarked: true, isLiked: false, - likeCount: 30, + likeCount: 15, hashTags: ['maths', 'circle'], friendTags: [], helpLink: '', @@ -79,7 +153,7 @@ export class ForumComponent implements OnInit { date: new Date(), answers: [{ answer: 'Here is a video you can take a look at if you would like to understand more...', - isBookmarked: true, + isBookmarked: false, isLiked: false, likeCount: 10, friendTags: ['Mr Miyagi'], @@ -94,7 +168,9 @@ export class ForumComponent implements OnInit { }] }]; - constructor() { } + constructor( + private router: Router + ) { } ngOnInit(): void { @@ -104,4 +180,8 @@ export class ForumComponent implements OnInit { return moment(date).format('MMMM DD, YYYY'); } + openPostDetails(post: any) { + this.router.navigate(['/forum-post-details', { data: JSON.stringify(post) }]); + } + } 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 5924b62..f15b7ba 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 @@ -1,52 +1,53 @@ -
+
- Can anyone explain dark matter radiation theory in a most simplest - way possible? + {{ postDetails.question }}

- Can anyone explain dark matter radiation theory in a most simplest - way possible? + {{ postDetails.question }}

    Top Answer
    -
  • - -
    +
    - It's easy to explain actually + {{ answerPost.answer }}
    -

    - You just need to refer to the article updated by IEEE Labs. +

    + +
    +

    + Link Related to this Topic

    - - - August 15, 2020 + + + {{ getFormattedDate(answerPost.date) }}
    - -
      -
    • +
        +
      • - - - August 15, 2020 + + + {{ getFormattedDate(comment.date) }}

        - 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! + {{ comment.description }}

        - - - - -
        - -
        -
        - - - August 15, 2020 -
        -

        - 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! -

        -
        - - - -
        -
        -
        • - -
      • -
        - - - August 15, 2020 -
        -

        - 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! -

        -
        - - - - -
        -
        • -
      -
      • - -
      Other Answers
      - -
    • - -
      -
      - Have you watched the Xenon experiment? -
      -

      - A spark was created in the lab where there were 56 unknown interactions!!! -

      -
      -
      - - - August 15, 2020 -
      -
      - - - - - -
      - - - -
        -
      • -
        - - - August 15, 2020 -
        -

        - 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! -

        -
        - - - - -
        -
        • - -
      • -
        - - - August 15, 2020 -
        -

        - 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! -

        -
        - - - - -
        -
        • -
      -
      • - - -
    • - -
      -
      - Have you watched the Xenon experiment? -
      -

      - A spark was created in the lab where there were 56 unknown interactions!!! -

      -
      -
      - - - August 15, 2020 -
      -
      - - - - -
      - - - -
        -
      • -
        - - - August 15, 2020 -
        -

        - 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! -

        -
        -
        -
        • -
      • -
        - - - August 15, 2020 +
        +
        +
        + + + {{ getFormattedDate(subComment.date) }} +
        +

        + {{ subComment.description }} +

        +
        + + + +
        +
        -

        - 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! -

        -
        - - - -
      • diff --git a/src/app/reusable-components/forum/post-details/post-details.component.ts b/src/app/reusable-components/forum/post-details/post-details.component.ts index 22b5e1d..c9b40d8 100644 --- a/src/app/reusable-components/forum/post-details/post-details.component.ts +++ b/src/app/reusable-components/forum/post-details/post-details.component.ts @@ -1,5 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { Location } from '@angular/common'; +import { ActivatedRoute } from '@angular/router'; +import { Subscription } from 'rxjs'; +import * as moment from 'moment'; @Component({ selector: 'app-post-details', @@ -8,18 +11,44 @@ import { Location } from '@angular/common'; }) export class PostDetailsComponent implements OnInit { showMorePostOptions: boolean = false; - selectedAnswer: number = 1; + selectedAnswer: number = 0; showAddCommentToPost: boolean = false; + routeSubscription: Subscription; + postDetails: any; constructor( - private location: Location + private location: Location, + private route: ActivatedRoute, ) { } ngOnInit(): void { + this.routeSubscription = this.route.params.subscribe((params) => { + this.postDetails = JSON.parse(params['data']); + console.log(this.postDetails); + }); + } + + ngOnDestroy() { + this.routeSubscription.unsubscribe(); } back() { this.location.back(); } + getFormattedDate(date: any) { + return moment(date).format('MMMM DD, YYYY'); + } + + openSelectedAnswer(index: number) { + this.selectedAnswer = index; + + setTimeout(() => { + document.querySelector('#answer-' + index).scrollIntoView({ + behavior: 'smooth', + block: 'center' + }); + }, 100); + } + }