Attendance UI

src/app/calendar/calendar.component.scss

@@ -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);
             }
         }
 

src/app/tabs/courses/details/details.component.html

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

src/app/tabs/courses/details/details.component.scss

@@ -286,6 +286,11 @@
         margin: 30px 0 15px 0;
     }
 
+    a {
+        text-decoration: none;
+        display: block;
+    }
+
     li {
         padding: 15px 20px;
         background-color: var(--ash-black);

src/app/tabs/home/home.component.scss

@@ -141,7 +141,7 @@
         }
 
         &.absent::before {
-            background-color: rgba(red, 0.5);
+            background-color: var(--danger);
         }
 
         &.late::before {

src/app/tabs/more/attendance/attendance.component.html

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

src/app/tabs/more/attendance/attendance.component.scss

@@ -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%;
+        }
+    }
+
+}

src/app/tabs/more/attendance/attendance.component.ts

@@ -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();
     }
 
 }

src/styles.scss

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