Skip to content
GitLab
Unverified Commit eda3a343 authored by Arun Nair's avatar Arun Nair Committed by GitHub
Browse files

Merge pull request #3 from arun1205/examCycle 

Exam cycle html page changes
parents 7193e9b8 c14dfd2c
master bulk-upload-csv examcycleValiation
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 300 additions and 22 deletions
+300 -22
src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.html 0 → 100644
+ 131
− 0
View file @ eda3a343
<app-header></app-header>
<div class="examcycle">
<div class="container">
<div class="body-header flex justify-between items-center mb-4 ">
<h2 style="font-weight: 500">Edit</h2>
<div class="button-group ">
<button class="btn-1">Cancel</button>
<button class="btn-2">Save</button>
</div>
</div>
<div class="body">
<form class="examcycleform">
<div class="flex flex-column">
<div class="flex flex-row " style="gap: 1.5rem">
<div class="flex flex-column ">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Exam cycle</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Exam cycle</mat-label>
<mat-select>
<mat-option value="one">First option</mat-option>
<mat-option value="two">Second option</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="flex flex-column">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Course name</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Course name</mat-label>
<mat-select>
<mat-option value="one">First option</mat-option>
<mat-option value="two">Second option</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="flex flex-row " style="gap: 1.5rem">
<div class="flex flex-column ">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Start date</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div class="flex flex-column">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">End date</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker1">
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
</div>
<div class="flex flex-row " style="gap: 1.5rem">
<div class="flex flex-column ">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Exam name</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Exam name</mat-label>
<input matInput placeholder="Exam name">
</mat-form-field>
</div>
<div class="flex flex-column">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Exam date</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker3">
<mat-datepicker-toggle matIconSuffix [for]="picker3"></mat-datepicker-toggle>
<mat-datepicker #picker3></mat-datepicker>
</mat-form-field>
</div>
<div class="flex flex-column ">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Start time</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>hh:mm</mat-label>
<input class="custom-timepicker"style="border:none;"matTimepicker #t="matTimepicker" [strict]="false" id="timepicker-example" mode="12h">
<mat-icon matSuffix (click)="t.showDialog()">access_time</mat-icon>
</mat-form-field>
</div>
<div class="flex flex-column">
<h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">End time</h4>
<mat-form-field appearance="outline" style="width:16.5rem">
<mat-label>hh:mm</mat-label>
<input class="custom-timepicker"style="border:none;"matTimepicker #t="matTimepicker" [strict]="false" id="timepicker-example" mode="12h">
<mat-icon matSuffix (click)="t.showDialog()">access_time</mat-icon>
</mat-form-field>
</div>
</div>
<div class="flex flex-row " style="gap: 1.5rem">
<div class="flex flex-column">
<button class="btn-3" style="margin-top:1rem">Add Exam</button>
</div>
</div>
<div class="flex flex-row " style="margin-top:2rem">
<div class="flex flex-column">
<div class="card1">
<div class="flex flex-row">
<div class="flex flex-column">
<h3 style="font-weight:500;text-align:start;margin-left:2rem">Exam 1</h3>
<mat-icon style="margin-left:15rem;margin-top: -48px">close</mat-icon>
</div>
</div>
<h5 style="font-weight:300;text-align:start;margin-left:2rem">Exam date: dd/mm/yyyy</h5>
<div style="border-color:grey;background-color:#F0F3F4;margin-right: 2rem;margin-left: 2rem;height:1.5rem;border-bottom-left-radius: 8px;border-top-left-radius: 8px;border: 0.5px solid rgb(161, 159, 159)">
<div class="time">Exam time : 10AM-12PM</div>
</div>
</div>
</div>
<div class="flex flex-column" style="margin-left: 2rem">
<div class="card1">
<div class="flex flex-row">
<div class="flex flex-column">
<h3 style="font-weight:500;text-align:start;margin-left:2rem">Exam 2</h3>
<mat-icon style="margin-left:15rem;margin-top: -48px">close</mat-icon>
</div>
</div>
<h5 style="font-weight:300;text-align:start;margin-left:2rem">Exam date: dd/mm/yyyy</h5>
<div style="border-color:grey;background-color:#F0F3F4;margin-right: 2rem;margin-left: 2rem;height:1.5rem;border-bottom-left-radius: 8px;border-top-left-radius: 8px;border: 0.5px solid rgb(161, 159, 159)">
<div class="time">Exam time : 10AM-12PM</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
\ No newline at end of file
src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.scss 0 → 100644
+ 102
− 0
View file @ eda3a343
.examcycle{
min-height: 94vh;
background-color:#F0F3F4;
width: 100%;
}
.container{
margin-left: 20rem;
margin-right: 20rem;
}
.body-header{
display:flex;
flex-direction: row;
justify-content: space-between;
}
.button-group {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
}
.btn-1{
color: #045DAD;
width: 6rem;
padding: 12px;
border-width: 16px;
border-radius: 4px;
font-weight: 600;
border: 1.5px solid rgba(4,93,173, 1);
opacity: 1;
}
.btn-2{
background-color: #045DAD;
color:#fff;
width: 6rem;
padding:12px;
border-radius: 4px;
font-weight: 600;
border: 1.5px solid rgba(4,93,173, 1);
opacity: 1;
}
.body{
width:100%;
background-color: #fff;
height: fit-content;
padding-bottom: 2rem;
}
.examcycleform{
display: flex;
margin-left: 2rem;
}
.btn-3{
background-color: #045DAD;
color:#fff;
width: 6rem;
padding:12px;
border-radius: 4px;
font-weight: 600;
border: 1.5px solid rgba(4,93,173, 1);
opacity: 1;
}
.card1 {
height: 9rem;
width:17rem;
border: thin solid rgb(185, 181, 181);
border-radius: 4px;
}
.time{
font-weight:100;
font-size: small;
margin-left: 4px;
margin-top:3px
}
::ng-deep .custom-timepicker:focus {
appearance: outline;
outline: none; /* This removes the default blue outline on some browsers */
border-color: rgba(4,93,173, 1);
border-width: 12px ;
}
.custom-timepicker:focus {
outline:none;
}
.custom-timepicker{
font-size: medium;
}
src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.spec.ts 0 → 100644
+ 23
− 0
View file @ eda3a343
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExamCycleComponent } from './exam-cycle.component';
describe('ExamCycleComponent', () => {
let component: ExamCycleComponent;
let fixture: ComponentFixture<ExamCycleComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ExamCycleComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ExamCycleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.ts 0 → 100644
+ 12
− 0
View file @ eda3a343
import { Component } from '@angular/core';
@Component({
selector: 'app-exam-cycle',
templateUrl: './exam-cycle.component.html',
styleUrls: ['./exam-cycle.component.scss']
})
export class ExamCycleComponent {
}
src/app/modules/manage-exams-module/manage-exams-module-routing.module.ts
+ 2
− 1
View file @ eda3a343
...@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; ...@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
import { ExamsTableComponent } from './components/exams-table/exams-table.component'; import { ExamsTableComponent } from './components/exams-table/exams-table.component';
import { HeaderComponent } from '../shared/components/header/header.component'; import { HeaderComponent } from '../shared/components/header/header.component';
import { ExamCycleComponent } from './components/exam-cycle/exam-cycle.component';
const routes: Routes = [ const routes: Routes = [
...@@ -10,7 +11,7 @@ const routes: Routes = [ ...@@ -10,7 +11,7 @@ const routes: Routes = [
path: 'manage-exams', component: ExamsTableComponent, pathMatch: 'full', path: 'manage-exams', component: ExamsTableComponent, pathMatch: 'full',
}, },
{ {
path: 'header', component: HeaderComponent, pathMatch: 'full', path: 'exam-cycle', component: ExamCycleComponent, pathMatch: 'full',
}, },
]; ];
......
src/app/modules/manage-exams-module/manage-exams-module.module.ts
+ 13
− 2
View file @ eda3a343
...@@ -4,15 +4,26 @@ import { CommonModule } from '@angular/common'; ...@@ -4,15 +4,26 @@ import { CommonModule } from '@angular/common';
import { ManageExamsModuleRoutingModule } from './manage-exams-module-routing.module'; import { ManageExamsModuleRoutingModule } from './manage-exams-module-routing.module';
import { ExamsTableComponent } from './components/exams-table/exams-table.component'; import { ExamsTableComponent } from './components/exams-table/exams-table.component';
import { SharedModule } from '../shared/shared.module'; import { SharedModule } from '../shared/shared.module';
import { ExamCycleComponent } from './components/exam-cycle/exam-cycle.component';
import { MaterialModule } from 'src/material/material.module';
import { MatTimepickerModule } from 'mat-timepicker';
@NgModule({ @NgModule({
declarations: [ declarations: [
ExamsTableComponent ExamsTableComponent,
ExamCycleComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,
ManageExamsModuleRoutingModule, ManageExamsModuleRoutingModule,
SharedModule SharedModule,
MaterialModule,
MatTimepickerModule,
] ]
}) })
......
src/app/modules/shared/components/header/header.component.html
+ 10
− 9
View file @ eda3a343
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="header-container"> <div class="header-container bg-white">
<div> <div class="flex flex-row justify-content-between" style="justify-content: space-between;" >
<img src="../../assets/images/sunbird_logo.png" alt="UPSMF logo"> <div class="flex flex-column">
</div> <img style="width: 17rem;" src="../../assets/images/sunbird_logo.png" alt="UPSMF logo">
<div>
<button>GJ</button>
</div>
</div> </div>
</nav> <div class="flex flex-column">
\ No newline at end of file <button>GJ</button>
</div>
</div>
</div>
src/app/modules/shared/components/header/header.component.scss
+ 5
− 9
View file @ eda3a343
.header-container { .header-container{
display: flex;
justify-content: space-between;
align-items: center;
}
img{
margin-left: 12rem; margin-left: 12rem;
width: 17rem; margin-right: 12rem;
} }
button{ button{
margin-left: 72rem;
background-color: forestgreen; background-color: forestgreen;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: white; color: white;
height: 26px;
margin-top: 1rem;
} }
\ No newline at end of file
src/app/modules/shared/shared.module.ts
+ 2
− 1
View file @ eda3a343
...@@ -9,6 +9,7 @@ import {MaterialModule} from '../../../material/material.module'; ...@@ -9,6 +9,7 @@ import {MaterialModule} from '../../../material/material.module';
import { HeaderComponent } from './components/header/header.component'; import { HeaderComponent } from './components/header/header.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
SharedTableComponent, SharedTableComponent,
...@@ -17,7 +18,7 @@ import { HeaderComponent } from './components/header/header.component'; ...@@ -17,7 +18,7 @@ import { HeaderComponent } from './components/header/header.component';
imports: [ imports: [
CommonModule, CommonModule,
//TableModule, //TableModule,
MaterialModule MaterialModule,
], ],
exports : exports :
[ [
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment