kj
/
lms-app
1
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Sfoglia il codice sorgente

Resources list

master
kj1352 5 anni fa
parent
dfc2deaba8
commit
8f62d92a95
4 ha cambiato i file con 238 aggiunte e 81 eliminazioni
Visualizzazione separata
Opzioni Diff
Mostra statistiche Scarica il file Patch Scarica il file Diff
  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 Vedi 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 Vedi 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 Vedi 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 Vedi 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>