kj
/
lms-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

course details forum UI

master
kj1352 5 years ago
parent
cef9be2346
commit
270a547dbb
4 changed files with 242 additions and 10 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +154
    -8
      src/app/tabs/courses/details/details.component.html
  2. +46
    -2
      src/app/tabs/courses/details/details.component.scss
  3. +1
    -0
      src/app/tabs/courses/details/details.component.ts
  4. +41
    -0
      src/assets/custom-icons/reply.svg

+ 154
- 8
src/app/tabs/courses/details/details.component.html View File

@@ -208,17 +208,19 @@
</section>

<ul class="forum-post-list">
<li>
<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>
<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 (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>
@@ -242,6 +244,150 @@
<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"> <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"> <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>
</ul>



+ 46
- 2
src/app/tabs/courses/details/details.component.scss View File

@@ -66,6 +66,7 @@
display: flex;
align-items: stretch;
height: 50px;
box-shadow: 0px 0px 5px var(--black);

button {
font-size: 14px;
@@ -457,11 +458,17 @@
margin: 20px auto 0;
overflow: hidden;

li {
.post {
background-color: var(--ash-black);
padding: 20px 5%;
border-bottom: 1px solid var(--dark-grey);
position: relative;

&.active {
.comment-list {
display: block;
}
}
}

.book-mark-button {
@@ -547,7 +554,7 @@
.icon {
width: 15px;
height: 15px;
margin-right: 5px;
margin-right: 2px;
fill: var(--light-grey);
}

@@ -571,5 +578,42 @@
}
}

.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;
}
}
}

}

+ 1
- 0
src/app/tabs/courses/details/details.component.ts View File

@@ -14,6 +14,7 @@ export class DetailsComponent implements OnInit {
routeSubscription: Subscription;
selectedChapter: number = 1;
showMorePostOptions: boolean = false;
selectedPost: number;

constructor(
private route: ActivatedRoute,


+ 41
- 0
src/assets/custom-icons/reply.svg View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
<g>
<g>
<path d="M149.333,117.333V32L0,181.333l149.333,149.333V243.2C256,243.2,330.667,277.333,384,352
C362.667,245.333,298.667,138.667,149.333,117.333z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>