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

Resources list

master
kj1352 5 years ago
parent
dfc2deaba8
commit
8f62d92a95
4 changed files with 238 additions and 81 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +128
    -81
      src/app/tabs/courses/details/details.component.html
  2. +49
    -0
      src/app/tabs/courses/details/details.component.scss
  3. +1
    -0
      src/assets/custom-icons/document.svg
  4. +60
    -0
      src/assets/custom-icons/link.svg

+ 128
- 81
src/app/tabs/courses/details/details.component.html View File

@@ -33,109 +33,156 @@
</section>
</section>

<ul class="chapter-list">
<li class="chapter completed" [ngClass]="{'active' : selectedChapter === 1}">
<div class="container" (click)="selectedChapter === 1? selectedChapter = null : selectedChapter = 1">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="chapter-heading">
<label> Chapter 1 </label>
<p> 5 Topics </p>
</div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>
<ul class="topic-list">
<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
</div>
</li>
<div class="segments-holder">

<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
<ul class="chapter-list" *ngIf="selectedSegment === 'home'">
<li class="chapter completed" [ngClass]="{'active' : selectedChapter === 1}">
<div class="container" (click)="selectedChapter === 1? selectedChapter = null : selectedChapter = 1">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
<div class="chapter-heading">
<label> Chapter 1 </label>
<p> 5 Topics </p>
</div>
</li>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>
<ul class="topic-list">
<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
</div>
</li>

<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-3']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
</div>
</li>
<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
</div>
</li>

<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-3']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
</div>
</li>

<li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
<li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
</div>
</li>
</ul>
</li>
<li class="chapter" [ngClass]="{'active' : selectedChapter === 2}">
<div class="container" (click)="selectedChapter === 2 ? selectedChapter = null : selectedChapter = 2">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
<div class="chapter-heading">
<label> Chapter 2 </label>
<p> 5 Topics </p>
</div>
</li>
</ul>
</li>
<li class="chapter" [ngClass]="{'active' : selectedChapter === 2}">
<div class="container" (click)="selectedChapter === 2 ? selectedChapter = null : selectedChapter = 2">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="chapter-heading">
<label> Chapter 2 </label>
<p> 5 Topics </p>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>
<ul class="topic-list">
<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
</div>
</li>
<ul class="topic-list">
<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
</div>
</li>

<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
</div>
</li>

<li class="topic" [routerLink]="['/video-chapter/', 'Topic-3']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
</div>
</li>

<li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
</p>
<svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
</div>
</li>
</ul>
</li>
</ul>

<ul class="resources-list">
<header> Chapter 1 </header>
<a href="http://africau.edu/images/default/sample.pdf" target="_blank">
<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
<div class="content">
<label> Resource 1 </label>
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
quidem minima dolor delectus optio, dicta.
</p>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
</div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</li>
</a>

<li class="topic" [routerLink]="['/video-chapter/', 'Topic-3']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">

<header> Chapter 2 </header>
<a href="https://www.ieee.org/publications/periodicals.html" target="_blank">
<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/link.svg"></svg-icon>
<div class="content">
<label> Resource 1 </label>
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
quidem minima dolor delectus optio, dicta.
</p>
<svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
</div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</li>
</a>

<li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="topic-container">
<a href="http://africau.edu/images/default/sample.pdf" target="_blank">
<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
<div class="content">
<label> Resource 2 </label>
<p>
<span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
quidem minima dolor delectus optio, dicta.
</p>
<svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
</div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</li>
</ul>
</li>
</ul>
</a>
</ul>
</div>

</div>

+ 49
- 0
src/app/tabs/courses/details/details.component.scss View File

@@ -273,3 +273,52 @@
}
}
}

.resources-list {
list-style: none;
width: 90%;
margin: 0 auto;

header {
font-size: 16px;
color: var(--light-grey);
font-weight: 500;
margin: 30px 0 15px 0;
}

li {
padding: 15px 20px;
background-color: var(--ash-black);
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 10px;
overflow: hidden;
margin-bottom: 15px;
}

.content {
width: calc(100% - 80px);
}

label {
color: white;
font-size: 15px;
display: block;
}

p {
color: var(--light-grey);
font-size: 12px;
}

.icon {
width: 20px;
height: 20px;
fill: var(--light-grey);

&.arrow {
transform: rotate(-45deg);
}
}
}

+ 1
- 0
src/assets/custom-icons/document.svg View File

@@ -0,0 +1 @@
<svg height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m107.812 14.836h-8.53v-8.529a1.749 1.749 0 0 0 -1.75-1.75h-56.585a1.7 1.7 0 0 0 -.337.034h-.01a1.758 1.758 0 0 0 -.433.154c-.03.015-.058.031-.088.048a1.754 1.754 0 0 0 -.377.279l-20.749 20.755a1.708 1.708 0 0 0 -.278.374c-.018.031-.035.061-.051.093a1.793 1.793 0 0 0 -.152.427v.023a1.715 1.715 0 0 0 -.033.322v84.348a1.75 1.75 0 0 0 1.75 1.75h8.531v8.529a1.749 1.749 0 0 0 1.75 1.75h77.344a1.749 1.749 0 0 0 1.75-1.75v-105.107a1.749 1.749 0 0 0 -1.752-1.75zm-68.612-4.305v14.785h-14.788zm-17.263 18.285h19.01a1.749 1.749 0 0 0 1.75-1.75v-2.713h38.913a1.75 1.75 0 0 0 0-3.5h-38.91v-12.796h53.082v101.607h-73.845zm84.125 91.127h-73.844v-6.779h65.314a1.749 1.749 0 0 0 1.75-1.75v-93.078h6.78z"/><path d="m36.109 48.524h45.5a1.75 1.75 0 1 0 0-3.5h-45.5a1.75 1.75 0 0 0 0 3.5z"/><path d="m36.109 60.61h45.5a1.75 1.75 0 0 0 0-3.5h-45.5a1.75 1.75 0 1 0 0 3.5z"/><path d="m36.109 72.7h45.5a1.75 1.75 0 0 0 0-3.5h-45.5a1.75 1.75 0 0 0 0 3.5z"/><path d="m36.109 84.781h45.5a1.75 1.75 0 1 0 0-3.5h-45.5a1.75 1.75 0 0 0 0 3.5z"/><path d="m36.109 96.867h45.5a1.75 1.75 0 0 0 0-3.5h-45.5a1.75 1.75 0 1 0 0 3.5z"/><path d="m36.109 36.438h45.5a1.75 1.75 0 0 0 0-3.5h-45.5a1.75 1.75 0 1 0 0 3.5z"/></g></svg>

+ 60
- 0
src/assets/custom-icons/link.svg View File

@@ -0,0 +1,60 @@
<?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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.092 512.092" style="enable-background:new 0 0 512.092 512.092;" xml:space="preserve">
<g>
<g>
<path d="M312.453,199.601c-6.066-6.102-12.792-11.511-20.053-16.128c-19.232-12.315-41.59-18.859-64.427-18.859
c-31.697-0.059-62.106,12.535-84.48,34.987L34.949,308.23c-22.336,22.379-34.89,52.7-34.91,84.318
c-0.042,65.98,53.41,119.501,119.39,119.543c31.648,0.11,62.029-12.424,84.395-34.816l89.6-89.6
c1.628-1.614,2.537-3.816,2.524-6.108c-0.027-4.713-3.87-8.511-8.583-8.484h-3.413c-18.72,0.066-37.273-3.529-54.613-10.581
c-3.195-1.315-6.867-0.573-9.301,1.877l-64.427,64.512c-20.006,20.006-52.442,20.006-72.448,0
c-20.006-20.006-20.006-52.442,0-72.448l108.971-108.885c19.99-19.965,52.373-19.965,72.363,0
c13.472,12.679,34.486,12.679,47.957,0c5.796-5.801,9.31-13.495,9.899-21.675C322.976,216.108,319.371,206.535,312.453,199.601z"
/>
</g>
</g>
<g>
<g>
<path d="M477.061,34.993c-46.657-46.657-122.303-46.657-168.96,0l-89.515,89.429c-2.458,2.47-3.167,6.185-1.792,9.387
c1.359,3.211,4.535,5.272,8.021,5.205h3.157c18.698-0.034,37.221,3.589,54.528,10.667c3.195,1.315,6.867,0.573,9.301-1.877
l64.256-64.171c20.006-20.006,52.442-20.006,72.448,0c20.006,20.006,20.006,52.442,0,72.448l-80.043,79.957l-0.683,0.768
l-27.989,27.819c-19.99,19.965-52.373,19.965-72.363,0c-13.472-12.679-34.486-12.679-47.957,0
c-5.833,5.845-9.35,13.606-9.899,21.845c-0.624,9.775,2.981,19.348,9.899,26.283c9.877,9.919,21.433,18.008,34.133,23.893
c1.792,0.853,3.584,1.536,5.376,2.304c1.792,0.768,3.669,1.365,5.461,2.048c1.792,0.683,3.669,1.28,5.461,1.792l5.035,1.365
c3.413,0.853,6.827,1.536,10.325,2.133c4.214,0.626,8.458,1.025,12.715,1.195h5.973h0.512l5.12-0.597
c1.877-0.085,3.84-0.512,6.059-0.512h2.901l5.888-0.853l2.731-0.512l4.949-1.024h0.939c20.961-5.265,40.101-16.118,55.381-31.403
l108.629-108.629C523.718,157.296,523.718,81.65,477.061,34.993z"/>
</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>