Skip to content

Commit 6f84390

Browse files
invAlidMITinvAlidMIT
committed
minor changes in UI
1 parent 96dc834 commit 6f84390

File tree

6 files changed

+69
-26
lines changed

6 files changed

+69
-26
lines changed

‎Frontend/src/app/pages/user/load-quiz/load-quiz.component.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,17 @@
55
<mat-card class="mat-card">
66
<mat-card-header>
77
<div mat-card-avatar class="image"></div>
8-
<mat-card-title>
8+
<mat-card-title class="theme-text">
99
{{q.title}}
1010
</mat-card-title>
11-
<mat-card-subtitle>
11+
<mat-card-subtitle class="theme-text">
1212
{{q.category.title}}
1313
</mat-card-subtitle>
1414
</mat-card-header>
1515
<mat-card-content>
1616
<p class="truncate">{{q.description}}</p>
1717
</mat-card-content>
1818
<mat-card-actions class="mt-4">
19-
<button mat-button>View</button>
2019
<button [routerLink]="'/userDashboard/quiz-instructions/'+q.qid" mat-button color="primary" style="margin-left: 2px;">Start</button>
2120
<button mat-button color="warn" style="margin-left: 2px;">Max Marks: {{q.maxMarks}}</button>
2221
<button mat-button color="warn" style="margin-left: 2px;">Questions: {{q.numberOfQuestions}}</button>
@@ -28,7 +27,7 @@
2827
<div class="col-md-12 text-center" *ngIf="quizzes.length==0">
2928
<mat-card class="mat-card">
3029
<mat-card-content>
31-
<h2>No Quizzes Available For This Category!!</h2>
30+
<h2 class="theme-text">No Quizzes Available For This Category!!</h2>
3231
</mat-card-content>
3332

3433
</mat-card>

‎Frontend/src/app/pages/user/side-bar/side-bar.component.css

+18
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,21 @@
77
.mat-item span {
88
padding-left: 9px;
99
}
10+
11+
.active {
12+
border-left: 5px solid;
13+
background-color: #ccc;
14+
border-left-color: black !important;
15+
16+
}
17+
18+
19+
.menu-item{
20+
border-left-color: rgba(0,0,0,0);
21+
color: white !important;
22+
}
23+
24+
mat-drawer,mat-drawer-content{
25+
transition: all 500ms ease-in-out;
26+
color: white !important;
27+
}

‎Frontend/src/app/pages/user/side-bar/side-bar.component.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<mat-card class="mat-card">
22
<mat-action-list>
3-
<div mat-subheader>Quiz Categories</div>
3+
<div mat-subheader>Quiz Categories</div>
44
<button mat-list-item routerLink="/userDashboard/0">
55
<div class="mat-item">
6-
<mat-icon>category</mat-icon>
7-
<span>All quizzes</span>
6+
<mat-icon class="theme-text">dashboard</mat-icon>
7+
<span class="theme-text">All quizzes</span>
88
</div>
99
</button>
1010

1111
<button mat-list-item [routerLink]="'/userDashboard/'+c.cid" *ngFor="let c of categories">
1212
<div class="mat-item">
13-
<mat-icon>category</mat-icon>
14-
<span>{{c.title}}</span>
13+
<mat-icon class="theme-text">category</mat-icon>
14+
<span class="theme-text">{{c.title}}</span>
1515
</div>
1616
</button>
1717

1818
</mat-action-list>
19-
</mat-card>
19+
</mat-card>

‎Frontend/src/app/pages/user/side-bar/side-bar.component.ts

+36-10
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,29 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import {MatCardModule} from '@angular/material/card';
1+
import { Component, OnInit, computed, signal } from '@angular/core';
2+
import { NavbarComponent } from "../../../components/navbar/navbar.component";
33
import {MatListModule} from '@angular/material/list';
4+
import {MatCardModule} from '@angular/material/card';
45
import {MatIconModule} from '@angular/material/icon';
56
import {MatButtonModule} from '@angular/material/button';
7+
import { RouterLink,RouterLinkActive } from '@angular/router';
8+
import {MatSidenavModule} from '@angular/material/sidenav';
9+
import {MatMenuModule} from '@angular/material/menu';
10+
import { MatToolbarModule } from '@angular/material/toolbar';
11+
import {MatBadgeModule} from '@angular/material/badge';
12+
import { RouterOutlet } from '@angular/router';
13+
import { CommonModule } from '@angular/common';
614
import { CategoryService } from '../../../services/category.service';
715
import { MatSnackBar } from '@angular/material/snack-bar';
8-
import { CommonModule } from '@angular/common';
9-
import { RouterLink } from '@angular/router';
16+
17+
1018

1119
@Component({
12-
selector: 'app-side-bar',
13-
standalone: true,
14-
imports: [MatCardModule,MatListModule,MatIconModule,MatButtonModule,
15-
CommonModule,RouterLink],
16-
templateUrl: './side-bar.component.html',
17-
styleUrl: './side-bar.component.css'
20+
selector: 'app-side-bar',
21+
standalone: true,
22+
templateUrl: './side-bar.component.html',
23+
styleUrl: './side-bar.component.css',
24+
imports: [MatCardModule, MatListModule, MatIconModule, MatButtonModule,
25+
CommonModule, RouterLink, MatSidenavModule, MatMenuModule, MatToolbarModule,
26+
MatBadgeModule, NavbarComponent,RouterOutlet,RouterLinkActive]
1827
})
1928
export class SideBarComponent implements OnInit {
2029

@@ -39,5 +48,22 @@ export class SideBarComponent implements OnInit {
3948
)
4049
}
4150

51+
isSidebarOpen = signal(false);
52+
dashboardActive = true;
53+
54+
sidebarWidth=computed(()=>this.isSidebarOpen()?'65px':'');
55+
56+
toggleSidebar() {
57+
this.isSidebarOpen.set(!this.isSidebarOpen());
58+
}
59+
60+
toggleDashboardDeActive() {
61+
this.dashboardActive = false;
62+
}
63+
64+
toggleDashboardActive(){
65+
this.dashboardActive=true;
66+
}
67+
4268

4369
}

‎Frontend/src/app/pages/user/start-quiz/start-quiz.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="container-fluid">
44
<div class="row">
55
<div class="col-md-10">
6-
<h2 class="text-center" style="margin-bottom: 7px;color: white;">{{questions[0].quiz.title}}</h2>
6+
<h2 class="text-center theme-text" style="margin-bottom: 7px;color: white;">{{questions[0].quiz.title}}</h2>
77

88
<ng-container *ngIf="questions">
99
</ng-container>

‎Frontend/src/app/pages/user/view-attempted-quiz-result/view-attempted-quiz-result.component.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
<mat-card class="mat-card">
44
<mat-card-header>
55
<div class="container text-center">
6-
<h2>You Have Already Attempted This Quiz!!</h2>
6+
<h2 class="theme-text">You Have Already Attempted This Quiz!!</h2>
77
<mat-card-title>
8-
<h2>Quiz Result</h2>
8+
<h2 class="theme-text">Quiz Result</h2>
99
</mat-card-title> </div>
1010
</mat-card-header>
1111
<mat-card-content style="text-align: center;">
12-
<h2>Marks Obtained: {{result.marksGot}}</h2>
12+
<h2 class="theme-text">Marks Obtained: {{result.marksGot}}</h2>
1313
<br/>
14-
<h2>Number Of Correct Answers Given: {{result.correctAnswers}}</h2>
14+
<h2 class="theme-text">Number Of Correct Answers Given: {{result.correctAnswers}}</h2>
1515
<br/>
16-
<h2>Number Of Questions Attempted: {{result.attempted}}</h2>
16+
<h2 class="theme-text">Number Of Questions Attempted: {{result.attempted}}</h2>
1717
<br/>
1818

1919
</mat-card-content>

0 commit comments

Comments
 (0)