From ea3d9e8aa733222b29ecebb1a983f60802c5bfe4 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 19 Jun 2020 20:49:33 +0530 Subject: [PATCH] Forum post details UI --- src/app/app-routing.module.ts | 2 + src/app/app.module.ts | 2 + .../forum/forum.component.html | 83 +---- .../forum/forum.component.scss | 248 +++++++------ .../post-details/post-details.component.html | 339 ++++++++++++++++++ .../post-details/post-details.component.scss | 51 +++ .../post-details.component.spec.ts | 25 ++ .../post-details/post-details.component.ts | 25 ++ .../more/forum-page/forum-page.component.scss | 1 + 9 files changed, 590 insertions(+), 186 deletions(-) create mode 100644 src/app/reusable-components/forum/post-details/post-details.component.html create mode 100644 src/app/reusable-components/forum/post-details/post-details.component.scss create mode 100644 src/app/reusable-components/forum/post-details/post-details.component.spec.ts create mode 100644 src/app/reusable-components/forum/post-details/post-details.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9c4e26e..325e51a 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ee2a3bd..31fe0b5 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/reusable-components/forum/forum.component.html b/src/app/reusable-components/forum/forum.component.html index 93a5d6f..e13140a 100644 --- a/src/app/reusable-components/forum/forum.component.html +++ b/src/app/reusable-components/forum/forum.component.html @@ -26,17 +26,17 @@ - -
  • - -
    -
    - Can anyone explain dark matter radiation theory in a most simplest - way possible? -
    -

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

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

    More Options

    - -
    - -
    - - -
    -
    -

    Add Comment

    - -
    - - -
    diff --git a/src/app/reusable-components/forum/forum.component.scss b/src/app/reusable-components/forum/forum.component.scss index 748c9af..1f7dd00 100644 --- a/src/app/reusable-components/forum/forum.component.scss +++ b/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; } } - } 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 new file mode 100644 index 0000000..bbd6ebc --- /dev/null +++ b/src/app/reusable-components/forum/post-details/post-details.component.html @@ -0,0 +1,339 @@ +
    +
    + +
    + + Can anyone explain dark matter radiation theory in a most simplest + way possible? +
    +
    + +

    + Can anyone explain dark matter radiation theory in a most simplest + way possible? +

    + + + +
    +
    +

    More Options

    + +
    +
      +
    • + Downvote Answer +
      • +
    • + Downvote Question +
      • +
    • + Report +
      • +
    +
    + + +
    +
    +

    Add Comment

    + +
    + + +
    + +
    diff --git a/src/app/reusable-components/forum/post-details/post-details.component.scss b/src/app/reusable-components/forum/post-details/post-details.component.scss new file mode 100644 index 0000000..e5e867c --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/reusable-components/forum/post-details/post-details.component.spec.ts b/src/app/reusable-components/forum/post-details/post-details.component.spec.ts new file mode 100644 index 0000000..15ea362 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PostDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PostDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..22b5e1d --- /dev/null +++ b/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(); + } + +} diff --git a/src/app/tabs/more/forum-page/forum-page.component.scss b/src/app/tabs/more/forum-page/forum-page.component.scss index 2f3d55d..dfab091 100644 --- a/src/app/tabs/more/forum-page/forum-page.component.scss +++ b/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;