kj
/
lms-app
1
0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

Converted forum UI into a reusable component

master
kj1352 5 年之前
父節點
2adbb55918
當前提交
e3c8610a1f
共有 8 個文件被更改，包括 563 次插入 和 519 次删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      src/app/app.module.ts
  2. +195
    -0
      src/app/reusable-components/forum/forum.component.html
  3. +321
    -0
      src/app/reusable-components/forum/forum.component.scss
  4. +25
    -0
      src/app/reusable-components/forum/forum.component.spec.ts
  5. +18
    -0
      src/app/reusable-components/forum/forum.component.ts
  6. +2
    -194
      src/app/tabs/courses/details/details.component.html
  7. +0
    -322
      src/app/tabs/courses/details/details.component.scss
  8. +0
    -3
      src/app/tabs/courses/details/details.component.ts

+ 2
- 0
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,


+ 195
- 0
src/app/reusable-components/forum/forum.component.html 查看文件

@@ -0,0 +1,195 @@
<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">
</div>
<div class="input-holder">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
<input type="file">
</div>
<button class="add-post-button"> Add Post </button>
</section>

<ul class="forum-post-list">
<li class="post" [ngClass]="{'active': selectedPost === 1 }">
<button class="book-mark-button">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
</button>
<div (click)="selectedPost = 1">
<h5>
Can anyone explain dark matter radiation theory in a most simplest
way possible?
</h5>
<p>
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!
</p>
</div>
<div class="author">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<label> Dwayne the Rock </label>
<span class="time-stamp"> August 15, 2020 </span>
</div>
<div class="action-buttons">
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
<span> 56 </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
<span> 56 </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
<span> 56 </span>
</button>

<button class="more-button" (click)="showMorePostOptions = true">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
</button>
</div>

<ul class="comment-list">
<button class="add-comment-button" (click)="showAddCommentToPost = true">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
ADD A COMMENT
</button>
<li class="comment">
<div class="author">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<label> Dwayne the Rock </label>
<span class="time-stamp"> August 15, 2020 </span>
</div>
<p>
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!
</p>
<div class="action-buttons">
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
<span> Reply </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
<span> 56 </span>
</button>

<button class="more-button">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
</button>
</div>
</li>

<li class="comment">
<div class="author">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<label> Dwayne the Rock </label>
<span class="time-stamp"> August 15, 2020 </span>
</div>
<p>
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!
</p>
<div class="action-buttons">
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
<span> Reply </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
<span> 56 </span>
</button>

<button class="more-button">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
</button>
</div>
</li>
</ul>
</li>

<li class="post" [ngClass]="{'active': selectedPost === 2 }">
<button class="book-mark-button">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
</button>
<div (click)="selectedPost = 2">
<h5>
Can anyone explain dark matter radiation theory in a most simplest
way possible?
</h5>
<p>
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!
</p>
</div>
<div class="author">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<label> Dwayne the Rock </label>
<span class="time-stamp"> August 15, 2020 </span>
</div>
<div class="action-buttons">
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
<span> 56 </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
<span> 56 </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
<span> 56 </span>
</button>

<button class="more-button" (click)="showMorePostOptions = true">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
</button>
</div>

<ul class="comment-list">
<button class="add-comment-button" (click)="showAddCommentToPost = true">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
ADD A COMMENT
</button>
</ul>
</li>
</ul>

<section class="more-options-slideup" [ngClass]="{'active' : showMorePostOptions }">
<header>
<h4> More Options </h4>
<button class="close-button" (click)="showMorePostOptions = false">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</button>
</header>
<ul>
<li>
Downvote Answer
</li>
<li>
Downvote Question
</li>
<li>
Report
</li>
</ul>
</section>


<section class="more-options-slideup" [ngClass]="{'active' : showAddCommentToPost }">
<header>
<h4> Add Comment </h4>
<button class="close-button" (click)="showAddCommentToPost = false">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</button>
</header>
<textarea placeholder="Type your comment..."></textarea>
<button class="post-comment-button"> Submit </button>
</section>
</section>

+ 321
- 0
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;
}
}
}

}

+ 25
- 0
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<ForumComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ForumComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ForumComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 18
- 0
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 {
}

}

+ 2
- 194
src/app/tabs/courses/details/details.component.html 查看文件

@@ -185,200 +185,8 @@
</ul>


<section class="forum-details" *ngIf="selectedSegment === 'forum'">
<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">
</div>
<div class="input-holder">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
<input type="file">
</div>
<button class="add-post-button"> Add Post </button>
</section>

<ul class="forum-post-list">
<li class="post" [ngClass]="{'active': selectedPost === 1 }">
<button class="book-mark-button">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
</button>
<div (click)="selectedPost = 1">
<h5>
Can anyone explain dark matter radiation theory in a most simplest
way possible?
</h5>
<p>
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!
</p>
</div>
<div class="author">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<label> Dwayne the Rock </label>
<span class="time-stamp"> August 15, 2020 </span>
</div>
<div class="action-buttons">
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
<span> 56 </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
<span> 56 </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
<span> 56 </span>
</button>

<button class="more-button" (click)="showMorePostOptions = true">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
</button>
</div>

<ul class="comment-list">
<button class="add-comment-button" (click)="showAddCommentToPost = true">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
ADD A COMMENT
</button>
<li class="comment">
<div class="author">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<label> Dwayne the Rock </label>
<span class="time-stamp"> August 15, 2020 </span>
</div>
<p>
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!
</p>
<div class="action-buttons">
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
<span> Reply </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
<span> 56 </span>
</button>

<button class="more-button">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
</button>
</div>
</li>

<li class="comment">
<div class="author">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<label> Dwayne the Rock </label>
<span class="time-stamp"> August 15, 2020 </span>
</div>
<p>
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!
</p>
<div class="action-buttons">
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
<span> Reply </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
<span> 56 </span>
</button>

<button class="more-button">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
</button>
</div>
</li>
</ul>
</li>

<li class="post" [ngClass]="{'active': selectedPost === 2 }">
<button class="book-mark-button">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
</button>
<div (click)="selectedPost = 2">
<h5>
Can anyone explain dark matter radiation theory in a most simplest
way possible?
</h5>
<p>
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!
</p>
</div>
<div class="author">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<label> Dwayne the Rock </label>
<span class="time-stamp"> August 15, 2020 </span>
</div>
<div class="action-buttons">
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
<span> 56 </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
<span> 56 </span>
</button>
<button>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
<span> 56 </span>
</button>

<button class="more-button" (click)="showMorePostOptions = true">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
</button>
</div>

<ul class="comment-list">
<button class="add-comment-button" (click)="showAddCommentToPost = true">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
ADD A COMMENT
</button>
</ul>
</li>
</ul>

<section class="more-options-slideup" [ngClass]="{'active' : showMorePostOptions }">
<header>
<h4> More Options </h4>
<button class="close-button" (click)="showMorePostOptions = false">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</button>
</header>
<ul>
<li>
Downvote Answer
</li>
<li>
Downvote Question
</li>
<li>
Report
</li>
</ul>
</section>


<section class="more-options-slideup" [ngClass]="{'active' : showAddCommentToPost }">
<header>
<h4> Add Comment </h4>
<button class="close-button" (click)="showAddCommentToPost = false">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</button>
</header>
<textarea placeholder="Type your comment..."></textarea>
<button class="post-comment-button"> Submit </button>
</section>
<section *ngIf="selectedSegment === 'forum'">
<app-forum></app-forum>
</section>
</div>



+ 0
- 322
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;
}
}
}

}

+ 0
- 3
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,