kj
/
lms-app
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

Teacher attendance UI

master
kj1352 5 lat temu
rodzic
624cd97358
commit
6cca967caa
6 zmienionych plików z 549 dodań i 242 usunięć
Widok podzielony
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +417
    -237
      src/app/attendance/attendance.component.html
  2. +1
    -0
      src/app/attendance/attendance.component.scss
  3. +23
    -4
      src/app/attendance/attendance.component.ts
  4. +97
    -0
      src/app/services/demo.service.ts
  5. +1
    -1
      src/app/tabs/more/more.component.html
  6. +10
    -0
      src/app/tabs/more/more.component.scss

+ 417
- 237
src/app/attendance/attendance.component.html Wyświetl plik

@@ -9,263 +9,443 @@
</h5>
</header>

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

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

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

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

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

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


<section class="segment-tabs">
<button (click)="selectedSegmentTab = 'report'"
[ngClass]="{'active': selectedSegmentTab === 'report' }"> Report </button>
<button (click)="selectedSegmentTab = 'details'"
[ngClass]="{'active': selectedSegmentTab === 'details' }"> Details </button>
</section>
<section *ngIf="demoType === 'Student'">
<ul class="segment-list">
<li [ngClass]="{'active' : selectedSegment === 'ALL'}"
(click)="selectedSegment = 'ALL'">
<div class="container">
<h4> ALL </h4>
<p> 50% </p>
</div>
</li>

<ul class="attendance-report" *ngIf="selectedSegmentTab === 'report'">
<li class="year" [ngClass]="{'active' : selectedReportYear === 2020 }">
<header (click)="selectedReportYear === 2020 ? selectedReportYear = 0 : selectedReportYear = 2020">
<label> Year of 2020 - 2021 </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Month </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr>
<td> June 2020 </td>
<td> 2 </td>
<td> 20 </td>
</tr>

<tr>
<td> July 2020 </td>
<td> 4 </td>
<td> 18 </td>
</tr>

<tr>
<td> August 2020 </td>
<td> 6 </td>
<td> 20 </td>
</tr>
</tbody>
</table>
</li>

<li class="year" [ngClass]="{'active' : selectedReportYear === 2019 }">
<header (click)="selectedReportYear === 2019 ? selectedReportYear = 0 : selectedReportYear = 2019">
<label> Year of 2019 - 2020 </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Month </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr>
<td> June 2020 </td>
<td> 2 </td>
<td> 20 </td>
</tr>

<tr>
<td> July 2020 </td>
<td> 4 </td>
<td> 18 </td>
</tr>

<tr>
<td> August 2020 </td>
<td> 6 </td>
<td> 20 </td>
</tr>
</tbody>
</table>
</li>
</ul>

<ul class="month-list" *ngIf="selectedSegmentTab === 'details'">
<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>
<li [ngClass]="{'active' : selectedSegment === 'KAN'}"
(click)="selectedSegment = 'KAN'">
<div class="container">
<h4> KAN </h4>
<p> 50% </p>
</div>
<div class="progress">
50%
</li>

<li [ngClass]="{'active' : selectedSegment === 'ENG'}"
(click)="selectedSegment = 'ENG'">
<div class="container">
<h4> ENG </h4>
<p> 50% </p>
</div>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>
</li>

<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>
<p class="status-text"> Attended </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>
<li [ngClass]="{'active' : selectedSegment === 'MAT'}"
(click)="selectedSegment = 'MAT'">
<div class="container">
<h4> MAT </h4>
<p> 50% </p>
</div>
</li>

<li class="subject failed">
<div class="content">
<label> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> Absent </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
</li>
<li [ngClass]="{'active' : selectedSegment === 'PHY'}"
(click)="selectedSegment = 'PHY'">
<div class="container">
<h4> PHY </h4>
<p> 50% </p>
</div>
</li>

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


<section class="segment-tabs">
<button (click)="selectedSegmentTab = 'report'"
[ngClass]="{'active': selectedSegmentTab === 'report' }"> Report </button>
<button (click)="selectedSegmentTab = 'details'"
[ngClass]="{'active': selectedSegmentTab === 'details' }"> Details </button>
</section>

<ul class="attendance-report" *ngIf="selectedSegmentTab === 'report'">
<li class="year" [ngClass]="{'active' : selectedReportYear === 2020 }">
<header (click)="selectedReportYear === 2020 ? selectedReportYear = 0 : selectedReportYear = 2020">
<label> Year of 2020 - 2021 </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Month </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr>
<td> June 2020 </td>
<td> 2 </td>
<td> 20 </td>
</tr>

<tr>
<td> July 2020 </td>
<td> 4 </td>
<td> 18 </td>
</tr>

<tr>
<td> August 2020 </td>
<td> 6 </td>
<td> 20 </td>
</tr>
</tbody>
</table>
</li>

<li class="year" [ngClass]="{'active' : selectedReportYear === 2019 }">
<header (click)="selectedReportYear === 2019 ? selectedReportYear = 0 : selectedReportYear = 2019">
<label> Year of 2019 - 2020 </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Month </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr>
<td> June 2020 </td>
<td> 2 </td>
<td> 20 </td>
</tr>

<tr>
<td> July 2020 </td>
<td> 4 </td>
<td> 18 </td>
</tr>

<tr>
<td> August 2020 </td>
<td> 6 </td>
<td> 20 </td>
</tr>
</tbody>
</table>
</li>
</ul>

<ul class="month-list" *ngIf="selectedSegmentTab === 'details'">
<li class="month" [ngClass]="{'active' : selectedList === 1}"
(click)="selectedList === 1 ? selectedList = 0 : selectedList = 1">
<div class="list-header">
<div class="content">
<label> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> 10 Mins late </p>
<label> June </label>
<p> 90 Class : 60 Hrs </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>
<p class="status-text"> Attended </p>
<div class="progress">
50%
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
</li>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>

<li class="subject failed">
<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>
<p class="status-text"> Attended </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>
<p class="status-text"> Absent </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>
<p class="status-text"> 10 Mins late </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>
<p class="status-text"> Attended </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>
<p class="status-text"> Absent </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>
<p class="status-text"> 15 Mins late </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> Kannada </label>
<p> Chapter : Topic </p>
<p class="status-text"> Absent </p>
<label> July </label>
<p> 90 Class : 60 Hrs </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>
<p class="status-text"> 15 Mins late </p>
<div class="progress">
50%
</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>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</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>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
<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>
<p class="status-text"> warning </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>
<p class="status-text"> warning </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>
<p class="status-text"> warning </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>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>
</ul>
</section>

<li class="subject warning">
<section *ngIf="demoType === 'Teacher'">
<ul class="segment-list">
<li [ngClass]="{'active' : selectedSegment === classAttendance}"
(click)="selectedSegment = classAttendance" *ngFor="let classAttendance of attendanceList">
<div class="container">
<h4> {{ classAttendance.classLevel }} Std </h4>
</div>
</li>
<li [ngClass]="{'active' : selectedSegment === 'My'}"
(click)="selectedSegment = 'My'; selectedSegmentTab = 'details'">
<div class="container">
<h4> Self </h4>
</div>
</li>
</ul>

<section class="segment-tabs" *ngIf="selectedSegment && selectedSegment !== 'My'">
<button (click)="selectedSegmentTab = subject"
[ngClass]="{'active': selectedSegmentTab === subject }"
*ngFor="let subject of selectedSegment.subjects"> {{ subject.name }} </button>
</section>

<ul class="attendance-report" *ngIf="selectedSegmentTab">
<li class="year" [ngClass]="{'active' : selectedReportYear === attendance.year }" *ngFor="let attendance of selectedSegmentTab.attendance">
<header (click)="selectedReportYear === attendance.year ? selectedReportYear = '0' : selectedReportYear = attendance.year">
<label> Year of {{ attendance.year }} </label>
<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</header>

<table>
<tbody>
<tr>
<th> Student </th>
<th> Absent </th>
<th> Present </th>
</tr>

<tr *ngFor="let student of attendance.students">
<td> {{ student.name }} </td>
<td> {{ attendance.totalClasses - student.present }} </td>
<td> {{ student.present }} </td>
</tr>
</tbody>
</table>
</li>
</ul>

<ul class="month-list" *ngIf="selectedSegmentTab === 'details'">
<li class="month" [ngClass]="{'active' : selectedList === 1}"
(click)="selectedList === 1 ? selectedList = 0 : selectedList = 1">
<div class="list-header">
<div class="content">
<label> English </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
<label> June </label>
<p> 90 Class : 60 Hrs </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>
<p class="status-text"> warning </p>
<div class="progress">
50%
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>

<svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</div>

<li class="subject warning">
<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>
<p class="status-text"> Attended </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>
<p class="status-text"> Absent </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>
<p class="status-text"> 10 Mins late </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>
<p class="status-text"> Attended </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>
<p class="status-text"> Absent </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>
<p class="status-text"> 15 Mins late </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> Physics </label>
<p> Chapter : Topic </p>
<p class="status-text"> warning </p>
<label> July </label>
<p> 90 Class : 60 Hrs </p>
</div>
<div class="progress">
50%
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>
</ul>
<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>
<p class="status-text"> warning </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>
<p class="status-text"> warning </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>
<p class="status-text"> warning </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>
<p class="status-text"> warning </p>
</div>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
</li>
</ul>
</li>
</ul>
</section>
</section>

+ 1
- 0
src/app/attendance/attendance.component.scss Wyświetl plik

@@ -118,6 +118,7 @@
background-color: transparent;
color: var(--light-grey);
border-radius: 7px;
flex-grow: 1;

&.active {
background-color: var(--teal-green);


+ 23
- 4
src/app/attendance/attendance.component.ts Wyświetl plik

@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { DemoService } from '../services/demo.service';

@Component({
selector: 'app-attendance',
@@ -8,15 +9,33 @@ import { Location } from '@angular/common';
})
export class AttendanceComponent implements OnInit {
selectedList: number = 1;
selectedSegment: string = 'ALL';
selectedSegmentTab: string = 'report';
selectedReportYear: number = 2020;
selectedSegment: any;
selectedSegmentTab: any;
selectedReportYear: any;
demoType: string;
attendanceList = [];

constructor(
private location: Location
private location: Location,
private demoService: DemoService
) { }

ngOnInit(): void {
this.demoType = localStorage.demoType;

this.attendanceList = this.demoService.attendanceList;

if (this.demoType === 'Teacher') {
this.selectedList = 1;
this.selectedSegment = this.attendanceList[0];
this.selectedSegmentTab = this.attendanceList[0].subjects[0];
this.selectedReportYear = this.attendanceList[0].subjects[0].attendance[0].year;
} else {
this.selectedList = 1;
this.selectedSegment = 'ALL';
this.selectedSegmentTab = 'report';
this.selectedReportYear = 2020;
}
}

back() {


+ 97
- 0
src/app/services/demo.service.ts Wyświetl plik

@@ -323,6 +323,103 @@ export class DemoService {
}]
}];

attendanceList = [{
classLevel: '10',
subjects: [{
name: 'MAT',
attendance: [{
year: '2020',
totalClasses: 30,
students: [{
name: 'Anand',
present: 25,
}, {
name: 'Bhagya',
present: 24,
}, {
name: 'Chintu',
present: 20
}, {
name: 'Dinesh',
present: 30,
}]
}, {
year: '2019',
totalClasses: 50,
students: [{
name: 'Anand',
present: 45,
}, {
name: 'Bhagya',
present: 44,
}, {
name: 'Chintu',
present: 40
}, {
name: 'Dinesh',
present: 40,
}]
}]
}, {
name: 'EVS',
attendance: [{
year: '2020',
totalClasses: 30,
students: [{
name: 'Anand',
present: 25,
}, {
name: 'Bhagya',
present: 24,
}, {
name: 'Chintu',
present: 20
}, {
name: 'Dinesh',
present: 30,
}]
}]
}]
}, {
classLevel: '8',
subjects: [{
name: 'MAT',
attendance: [{
year: '2020',
totalClasses: 20,
students: [{
name: 'Meghana',
present: 15,
}, {
name: 'Sandhya',
present: 14,
}, {
name: 'Zaid',
present: 10
}, {
name: 'Tchalabala',
present: 10,
}]
}, {
year: '2019',
totalClasses: 30,
students: [{
name: 'Meghana',
present: 25,
}, {
name: 'Sandhya',
present: 24,
}, {
name: 'Zaid',
present: 20
}, {
name: 'Tchalabala',
present: 30,
}]
}]
}]
}]

constructor() {
}
}

+ 1
- 1
src/app/tabs/more/more.component.html Wyświetl plik

@@ -29,7 +29,7 @@
</div>

<section *ngIf="profileDetails" class="profile-details-holder">
<section class="segment-buttons">
<section class="segment-buttons" [ngClass]="{'hide-scores' : demoType === 'Teacher'}">
<button (click)="selectedSegment='badges'"
[ngClass]="{'active': selectedSegment === 'badges'}"> Badges </button>
<button (click)="selectedSegment='friends'"


+ 10
- 0
src/app/tabs/more/more.component.scss Wyświetl plik

@@ -120,6 +120,16 @@
background-color: var(--dark-grey);
padding: 1px;

&.hide-scores {
button {
width: calc(100% / 2);

&:nth-child(3) {
display: none;
}
}
}

button {
flex-grow: 1;
border-radius: 7px;