diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8311ad7..df63a25 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/reusable-components/forum/forum.component.html b/src/app/reusable-components/forum/forum.component.html new file mode 100644 index 0000000..fdba733 --- /dev/null +++ b/src/app/reusable-components/forum/forum.component.html @@ -0,0 +1,195 @@ +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + + +
+
+

More Options

+ +
+ +
+ + +
+
+

Add Comment

+ +
+ + +
+
diff --git a/src/app/reusable-components/forum/forum.component.scss b/src/app/reusable-components/forum/forum.component.scss new file mode 100644 index 0000000..ddad44d --- /dev/null +++ b/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; + } + } + } + +} diff --git a/src/app/reusable-components/forum/forum.component.spec.ts b/src/app/reusable-components/forum/forum.component.spec.ts new file mode 100644 index 0000000..4b0c26d --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ForumComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ForumComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/reusable-components/forum/forum.component.ts b/src/app/reusable-components/forum/forum.component.ts new file mode 100644 index 0000000..c4f0d71 --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/tabs/courses/details/details.component.html b/src/app/tabs/courses/details/details.component.html index 2b5ec52..239596b 100644 --- a/src/app/tabs/courses/details/details.component.html +++ b/src/app/tabs/courses/details/details.component.html @@ -185,200 +185,8 @@ -
-
- -
- - -
-
- - -
-
- - -
-
- - -
- -
- - - -
-
-

More Options

- -
-
    -
  • - Downvote Answer -
    • -
  • - Downvote Question -
    • -
  • - Report -
    • -
-
- - -
-
-

Add Comment

- -
- - -
+
+
diff --git a/src/app/tabs/courses/details/details.component.scss b/src/app/tabs/courses/details/details.component.scss index 8ed3236..bb5fdc7 100644 --- a/src/app/tabs/courses/details/details.component.scss +++ b/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; - } - } - } - -} diff --git a/src/app/tabs/courses/details/details.component.ts b/src/app/tabs/courses/details/details.component.ts index 3d40a65..9d1c086 100644 --- a/src/app/tabs/courses/details/details.component.ts +++ b/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,