kj
/
lms-app
1
0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики Activity
Преглед на файлове

Resources list

master
kj1352 преди 5 години
родител
dfc2deaba8
ревизия
8f62d92a95
променени са 4 файла, в които са добавени 238 реда и са изтрити 81 реда
Разделен изглед
Diff Options
Показване на статистика 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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

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