diff --git a/src/app/tabs/more/attendance/attendance.component.html b/src/app/tabs/more/attendance/attendance.component.html index ea9bd5f..9e66dd3 100644 --- a/src/app/tabs/more/attendance/attendance.component.html +++ b/src/app/tabs/more/attendance/attendance.component.html @@ -1 +1,67 @@ -

attendance works!

+
+
+ +
+ + Attendance +
+
+ +
+
+

2019-2020

+

50%

+
+ +
+

June 2020

+

80%

+
+
+ + +
diff --git a/src/app/tabs/more/attendance/attendance.component.scss b/src/app/tabs/more/attendance/attendance.component.scss index e69de29..02d0881 100644 --- a/src/app/tabs/more/attendance/attendance.component.scss +++ b/src/app/tabs/more/attendance/attendance.component.scss @@ -0,0 +1,136 @@ +.page { + background-color: var(--black); + height: 100vh; + overflow: auto; + padding-bottom: 60px; +} + +.nav-header { + background-color: var(--ash-black); + display: flex; + align-items: center; + padding: 0 5%; + height: 60px; + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: 1; + + .close-button { + border: 0px; + background-color: transparent; + .icon { + width: 16px; + height: 16px; + fill: var(--light-grey); + } + } + + h5 { + font-size: 16px; + color: white; + font-weight: 400; + margin-left: 20px; + letter-spacing: 1px; + + .icon { + width: 15px; + height: 15px; + fill: white; + margin-right: 3px; + vertical-align: middle; + position: relative; + top: -1px; + } + } +} + +.statistics-upfold { + display: flex; + align-items: center; + position: relative; + overflow: visible; + padding: 20px 10%; + background-color: var(--ash-black); + + &::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + background-color: var(--dark-grey); + height: 100%; + width: 100vw; + border-radius: 50%; + transform: scale(1.5)translateY(-5vw); + } + + .stat { + position: relative; + width: 50%; + text-align: center; + padding: 15px 0; + border-right: 1px solid var(--light-grey); + + &:last-child { + border-right: 0; + } + + p { + font-size: 14px; + color: white; + } + + h4 { + color: white; + font-size: 24px; + } + } +} + +.segment-list { + list-style: none; + white-space: nowrap; + overflow: auto; + background-color: var(--ash-black); + padding: 20px 5%; + + li { + display: inline-flex; + width: 80px; + height: 80px; + background-color: var(--dark-grey); + border-radius: 10px; + box-shadow: 0px 0px 5px var(--black); + margin-right: 15px; + align-items: center; + justify-content: center; + + &.active { + background-color: var(--teal-green); + + h4 { + color: white; + } + + p { + color: white; + } + } + } + + .container { + width: 70%; + } + + h4 { + color: var(--teal-green); + font-weight: 500; + font-size: 20px; + } + + p { + font-size: 17px; + color: white; + } +} diff --git a/src/app/tabs/more/attendance/attendance.component.ts b/src/app/tabs/more/attendance/attendance.component.ts index 79bd49f..638ebf6 100644 --- a/src/app/tabs/more/attendance/attendance.component.ts +++ b/src/app/tabs/more/attendance/attendance.component.ts @@ -1,15 +1,22 @@ import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; @Component({ - selector: 'app-attendance', - templateUrl: './attendance.component.html', - styleUrls: ['./attendance.component.scss'] + selector: 'app-attendance', + templateUrl: './attendance.component.html', + styleUrls: ['./attendance.component.scss'] }) export class AttendanceComponent implements OnInit { - constructor() { } + constructor( + private location: Location + ) { } - ngOnInit(): void { - } + ngOnInit(): void { + } + + back() { + this.location.back(); + } } diff --git a/src/assets/custom-icons/attendance.svg b/src/assets/custom-icons/attendance.svg new file mode 100644 index 0000000..b91fc6d --- /dev/null +++ b/src/assets/custom-icons/attendance.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +