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

Attendance UI

master
kj1352 5 years ago
parent
3a5d9742aa
commit
3e15ecb1e4
8 changed files with 301 additions and 15 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      src/app/calendar/calendar.component.scss
  2. +1
    -1
      src/app/tabs/courses/details/details.component.html
  3. +5
    -0
      src/app/tabs/courses/details/details.component.scss
  4. +1
    -1
      src/app/tabs/home/home.component.scss
  5. +135
    -8
      src/app/tabs/more/attendance/attendance.component.html
  6. +153
    -2
      src/app/tabs/more/attendance/attendance.component.scss
  7. +3
    -1
      src/app/tabs/more/attendance/attendance.component.ts
  8. +1
    -0
      src/styles.scss

+ 2
- 2
src/app/calendar/calendar.component.scss View File

@@ -171,11 +171,11 @@

&.absent {
.status-icon {
fill: rgba(red, 0.5);
fill: var(--danger);
}

&::before {
border-color: rgba(red, 0.5);
border-color: var(--danger);
}
}



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

@@ -140,7 +140,7 @@
</li>
</ul>

<ul class="resources-list">
<ul class="resources-list" *ngIf="selectedSegment === 'resources'">
<header> Chapter 1 </header>
<a href="http://africau.edu/images/default/sample.pdf" target="_blank">
<li>


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

@@ -286,6 +286,11 @@
margin: 30px 0 15px 0;
}

a {
text-decoration: none;
display: block;
}

li {
padding: 15px 20px;
background-color: var(--ash-black);


+ 1
- 1
src/app/tabs/home/home.component.scss View File

@@ -141,7 +141,7 @@
}

&.absent::before {
background-color: rgba(red, 0.5);
background-color: var(--danger);
}

&.late::before {


+ 135
- 8
src/app/tabs/more/attendance/attendance.component.html View File

@@ -10,58 +10,185 @@
</header>

<section class="statistics-upfold">
<div class="stat">
<div class="stat safe">
<p> 2019-2020 </p>
<h4> 50% </h4>
</div>

<div class="stat">
<div class="stat danger">
<p> June 2020 </p>
<h4> 80% </h4>
</div>
</section>

<ul class="segment-list">
<li class="active">
<li [ngClass]="{'active' : selectedSegment === 'ALL'}"
(click)="selectedSegment = 'ALL'">
<div class="container">
<h4> ALL </h4>
<p> 50% </p>
</div>
</li>

<li>
<li [ngClass]="{'active' : selectedSegment === 'KAN'}"
(click)="selectedSegment = 'KAN'">
<div class="container">
<h4> KAN </h4>
<p> 50% </p>
</div>
</li>

<li>
<li [ngClass]="{'active' : selectedSegment === 'ENG'}"
(click)="selectedSegment = 'ENG'">
<div class="container">
<h4> ENG </h4>
<p> 50% </p>
</div>
</li>

<li>
<li [ngClass]="{'active' : selectedSegment === 'MAT'}"
(click)="selectedSegment = 'MAT'">
<div class="container">
<h4> MAT </h4>
<p> 50% </p>
</div>
</li>

<li>
<li [ngClass]="{'active' : selectedSegment === 'PHY'}"
(click)="selectedSegment = 'PHY'">
<div class="container">
<h4> PHY </h4>
<p> 50% </p>
</div>
</li>

<li>
<li [ngClass]="{'active' : selectedSegment === 'CHE'}"
(click)="selectedSegment = 'CHE'">
<div class="container">
<h4> CHE </h4>
<p> 50% </p>
</div>
</li>
</ul>


<ul class="month-list">
<li class="month" [ngClass]="{'active' : selectedList === 1}"
(click)="selectedList === 1 ? selectedList = 0 : selectedList = 1">
<div class="list-header">
<div class="content">
<label> June </label>
<p> 90 Class : 60 Hrs </p>
</div>
<div class="progress">
50%
</div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>

<ul class="subject-list">
<header> <p> Today: </p> <div class="progress"> 50% </div> </header>
<li class="subject completed">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>

<li class="subject failed">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>

<header> <p> Yesterday: </p> <div class="progress"> 50% </div> </header>
<li class="subject completed">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>

<li class="subject failed">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>


<li class="month" [ngClass]="{'active' : selectedList === 2}"
(click)="selectedList === 2 ? selectedList = 0 : selectedList = 2">
<div class="list-header">
<div class="content">
<label> July </label>
<p> 90 Class : 60 Hrs </p>
</div>
<div class="progress">
50%
</div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>

<ul class="subject-list">
<header> <p> 30th: </p> <div class="progress"> 50% </div> </header>
<li class="subject warning">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>

<li class="subject warning">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>


<li class="subject warning">
<div class="content">
<label> Chemistry </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>


<li class="subject warning">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>
</ul>
</div>

+ 153
- 2
src/app/tabs/more/attendance/attendance.component.scss View File

@@ -49,7 +49,7 @@
display: flex;
align-items: center;
position: relative;
overflow: visible;
overflow: hidden;
padding: 20px 10%;
background-color: var(--ash-black);

@@ -62,7 +62,7 @@
height: 100%;
width: 100vw;
border-radius: 50%;
transform: scale(1.5)translateY(-5vw);
transform: scale(1.2)translateY(-5vw);
}

.stat {
@@ -72,6 +72,18 @@
padding: 15px 0;
border-right: 1px solid var(--light-grey);

&.safe {
h4 {
color: var(--green);
}
}

&.danger {
h4 {
color: var(--danger);
}
}

&:last-child {
border-right: 0;
}
@@ -134,3 +146,142 @@
color: white;
}
}

.month-list {
list-style: none;
margin-top: 5px;

.month {
&.active {
.list-header .icon {
transform: rotate(90deg);
}

.list-header {
border-color: var(--dark-grey);
position: sticky;
position: -webkit-sticky;
top: 60px;
z-index: 1;
}

.subject-list {
display: block;
}
}
}

.list-header {
display: flex;
align-items: center;
width: 100%;
padding: 15px 5%;
background-color: var(--ash-black);
border-bottom: 1px solid var(--black);

.content {
flex-grow: 1;
}

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

p {
font-size: 14px;
color: var(--light-grey);
margin-top: 5px;
}

.progress {
width: 100px;
text-align: right;
margin-right: 15px;
color: white;
font-size: 16px;
}

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

&.arrow {
width: 20px;
height: 20px;
}
}
}

.subject-list {
list-style: none;
padding: 0 5% 15px;
display: none;

header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;

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

.progress {
font-size: 16px;
color: white;
}
}
}

.subject {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 5%;
background-color: var(--ash-black);
border-radius: 15px;
margin-bottom: 15px;

&.completed {
.icon {
fill: var(--green);
}
}

&.failed {
.icon {
fill: var(--danger);
}
}

&.warning {
.icon {
fill: rgba(orange, 0.5);
}
}

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

p {
font-size: 14px;
color: var(--light-grey);
margin-top: 5px;
}

.icon {
width: 20px;
height: 20px;
fill: var(--light-grey);
background-color: white;
border-radius: 50%;
}
}

}

+ 3
- 1
src/app/tabs/more/attendance/attendance.component.ts View File

@@ -7,6 +7,8 @@ import { Location } from '@angular/common';
styleUrls: ['./attendance.component.scss']
})
export class AttendanceComponent implements OnInit {
selectedList: number = 1;
selectedSegment: string = 'ALL';

constructor(
private location: Location
@@ -16,7 +18,7 @@ export class AttendanceComponent implements OnInit {
}

back() {
this.location.back();
this.location.back();
}

}

+ 1
- 0
src/styles.scss View File

@@ -18,4 +18,5 @@
--teal: #06c4a8;
--green: #8cc63f;
--teal-green: #08c17e;
--danger: #ea8b8b;
}