kj
/
lms-app
1
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

Resources list

master
kj1352 pirms 5 gadiem
vecāks
dfc2deaba8
revīzija
8f62d92a95
4 mainītis faili ar 238 papildinājumiem un 81 dzēšanām
Dalītais skats
Salīdzināšanas iespējas
Rādīt statistiku Lejupielādēt ielāpa failu Lejupielādēt izmaiņu failu
  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 Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

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