Skip to content

Commit 3ec1568

Browse files
daros10daros10
committed
#19 added styles in pages
1 parent b390e14 commit 3ec1568

File tree

9 files changed

+72
-76
lines changed

9 files changed

+72
-76
lines changed

‎src/app/modules/shared/components/month-picker/month-picker.component.html‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
<div class="container-month d-flex">
2-
<div
3-
class="month w-100 text-center text-white"
4-
*ngFor="let month of months; let i = index "
5-
(click)="getMonth(i)"
6-
[ngClass]="{ active: activeMonth === i }"
7-
>
2+
<div class="month w-100 text-center text-white title-card" *ngFor="let month of months; let i = index " (click)="getMonth(i)" [ngClass]="{ active: activeMonth === i }">
83
<div>{{ month }}</div>
94
</div>
10-
</div>
5+
</div>

‎src/app/modules/shared/components/month-picker/month-picker.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,7 @@
1010
.active {
1111
background-color: #005ce0;
1212
}
13+
14+
.title-card {
15+
background-color: #FF3F56;
16+
}

‎src/app/modules/shared/components/sidebar/sidebar.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ body {
4949
}
5050

5151
.sidebar-background {
52-
background-color: #FC5630 ;
52+
background-image: linear-gradient(to left top, #fc5630, #fe503a, #ff4a44, #ff444d, #ff3f56);
5353
}
5454

5555
.bg-item-active {

‎src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<app-search-project (changeFilterProject)="filterProjects = $event"></app-search-project>
2-
<ul class="list-group content-projects">
3-
<div *ngFor="let item of listProjects | filterProject:filterProjects; let i = index" class="container">
4-
<li *ngIf="item.status === 'Active'" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" (mouseenter)="showButton = i" (mouseleave)="showButton = -1" (click)="clockIn(item.id)" [ngClass]="{ active: selectedId === item.id }">
5-
{{ item.name }}
6-
<span *ngIf="showButton != i" class="badge badge-success">{{ item.status }}</span>
7-
<span *ngIf="showButton === i && selectedId !== item.id" class="badge badge-light">Clock In</span>
8-
</li>
9-
</div>
10-
</ul>
2+
<div class="container-fluid border rounded">
3+
<ul class="list-group list-group-flush content-projects mt-2 mb-2">
4+
<div *ngFor="let item of listProjects | filterProject:filterProjects; let i = index" class="container">
5+
<li *ngIf="item.status === 'Active'" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" (mouseenter)="showButton = i" (mouseleave)="showButton = -1" (click)="clockIn(item.id)" [ngClass]="{ active: selectedId === item.id }">
6+
{{ item.name }}
7+
<span *ngIf="showButton != i" class="badge badge-success">{{ item.status }}</span>
8+
<span *ngIf="showButton === i && selectedId !== item.id" class="badge badge-light">Clock In</span>
9+
</li>
10+
</div>
11+
</ul>
12+
</div>

‎src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,8 @@
1313
font-size: 0.7rem;
1414
padding: 0 0.3rem;
1515
}
16+
17+
.active {
18+
background-image: linear-gradient(to left top, #fc5630, #fe503a, #ff4a44, #ff444d, #ff3f56);
19+
border-radius: 15px;
20+
}

‎src/app/modules/time-clock/pages/time-clock.component.html‎

Lines changed: 31 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,69 @@
11
<div class="text-center mt-5">
2-
<div class="card">
3-
<div class="card-header">
2+
<div class="card border">
3+
<div class="card-header title-card">
44
<div class="row">
5-
<div class="col-2 text-left">
5+
<div class="col-2 text-left text-white">
66
<strong>Time clock</strong>
77
</div>
8-
<div class="col-10 text-right">
9-
<i class="far fa-question-circle"></i>
10-
</div>
118
</div>
129
</div>
1310
<div class="card-body">
1411
<p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at
1512
<strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
1613
<p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at
1714
<strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
18-
<h6 class="text-left"><strong>Totals</strong></h6>
1915
<hr>
2016
<div class="row">
2117
<div class="col-4">
2218
<h6>Current</h6>
23-
<h3>
19+
<h4>
2420
{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }}
25-
</h3>
21+
</h4>
2622
</div>
2723
<div class="col-4">
2824
<h6>Day</h6>
29-
<h3>00:00</h3>
25+
<h4>00:00</h4>
3026
</div>
3127
<div class="col-4">
3228
<h6>Week</h6>
33-
<h3>00:00</h3>
29+
<h4>00:00</h4>
3430
</div>
3531
</div>
36-
<h6 class="text-left"><strong>Projects</strong></h6>
37-
<ul class="list-group">
32+
<hr>
33+
<ul class="list-group container-fluid">
3834
<app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
3935
</ul>
40-
<br>
4136
<form *ngIf="(!isClockIn || showFields) && !isHidenForm">
42-
<div class="form-group row">
43-
<label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
44-
<div class="col-sm-10">
45-
<input type="text" class="form-control">
37+
<div class="container mt-3 mr-2">
38+
39+
<div class="input-group ">
40+
<div class="input-group-prepend">
41+
<span class="input-group-text" id="inputGroup-sizing-default">Activity</span>
42+
</div>
43+
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
4644
</div>
47-
</div>
48-
<div class="form-group row">
49-
<label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
50-
<div class="col-sm-10">
51-
<input type="text" class="form-control">
45+
<div class="input-group mt-1">
46+
<div class="input-group-prepend">
47+
<span class="input-group-text" id="inputGroup-sizing-default">Jira Ticket</span>
48+
</div>
49+
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
5250
</div>
53-
</div>
54-
<div class="form-group row">
55-
<label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
56-
<div class="col-sm-10">
51+
<div class="input-group mt-1">
52+
<div class="input-group-prepend">
53+
<span class="input-group-text" id="inputGroup-sizing-default">Technology</span>
54+
</div>
5755
<input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
5856
<input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger">
59-
<div>
60-
<h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this
61-
field to clock out.</h6>
62-
</div>
57+
</div>
58+
<div>
59+
<h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter thisfield to clock out.</h6>
6360
</div>
6461
</div>
6562
</form>
66-
<hr>
63+
<br>
6764
<div class="container">
68-
<div class="row">
69-
<div class="col text-left" id="optionsContainer">
70-
<button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
71-
Options
72-
</button>
73-
</div>
74-
<div class="col text-right" id="clockInOutContainer">
75-
<button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock
76-
In</button>
77-
<button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock
78-
Out</button>
79-
</div>
80-
</div>
65+
<button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
66+
<button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
8167
</div>
8268
</div>
8369
</div>

‎src/app/modules/time-clock/pages/time-clock.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,7 @@
88
height: 100%;
99
justify-content: center;
1010
}
11+
12+
.title-card {
13+
background-image: linear-gradient(to left top, #fc5630, #fe503a, #ff4a44, #ff444d, #ff3f56);
14+
}

‎src/app/modules/time-entries/pages/time-entries.component.html‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
11
<div class="container-time-entries">
22
<div class="card">
3-
<div class="card-header">Time Entries</div>
3+
<div class="card-header title-card text-white">Time Entries</div>
44
<app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
55
<div class="row m-0 header-entries">
66
<div class="col">Project</div>
77
<div class="col">Duration</div>
88
<div class="col-2">Actions</div>
99
</div>
1010
<!--Accordion wrapper-->
11-
<div *ngIf="dataByMonth.length > 0; else emptyState" class="accordion accordion-container" role="tablist"
12-
aria-multiselectable="true">
11+
<div *ngIf="dataByMonth.length > 0; else emptyState" class="accordion accordion-container" role="tablist" aria-multiselectable="true">
1312
<div class="card" *ngFor="let entry of dataByMonth | groupByDate; let rowIndex = index">
1413
<!-- Card header -->
15-
<div class="date-header" role="tab" id="heading10">
14+
<div class="date-header title-card" role="tab" id="heading10">
1615
<a data-toggle="collapse" [href]="'#entry' + rowIndex">
17-
<div class="mb-0">
16+
<div class="mb-0 text-white">
1817
{{ entry.date }}
1918
</div>
2019
</a>
2120
</div>
2221

2322
<!-- Card body -->
24-
<div *ngFor="let item of entry.details" [id]="'entry' + rowIndex" class="collapse show" role="tabpanel"
25-
aria-labelledby="heading10">
23+
<div *ngFor="let item of entry.details" [id]="'entry' + rowIndex" class="collapse show" role="tabpanel" aria-labelledby="heading10">
2624
<div class="row m-0 entries">
2725
<div class="col">
2826
{{ item.project }}
@@ -31,12 +29,10 @@
3129
{{ item.duration }}
3230
</div>
3331
<div class="col-2">
34-
<button class="btn btn-sm btn-small" data-toggle="modal" data-target="#editRecordsByDate"
35-
(click)="editEntry(item.id)">
32+
<button class="btn btn-sm btn-small" data-toggle="modal" data-target="#editRecordsByDate" (click)="editEntry(item.id)">
3633
<i class="fa fa-edit"></i>
3734
</button>
38-
<button class="btn btn-sm btn-small" data-toggle="modal" data-target="#deleteModal"
39-
(click)="openModal(item)">
35+
<button class="btn btn-sm btn-small" data-toggle="modal" data-target="#deleteModal" (click)="openModal(item)">
4036
<i class="fa fa-trash"></i>
4137
</button>
4238
</div>
@@ -61,6 +57,5 @@ <h5 class="modal-title" id="exampleModalLongTitle">Edit Entry</h5>
6157
</div>
6258
</div>
6359
</div>
64-
<app-modal *ngIf="showModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true" [list]="entryToDelete"
65-
(removeList)="removeEntry($event)">
66-
</app-modal>
60+
<app-modal *ngIf="showModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true" [list]="entryToDelete" (removeList)="removeEntry($event)">
61+
</app-modal>

‎src/app/modules/time-entries/pages/time-entries.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,8 @@
4444
cursor: pointer;
4545
}
4646
}
47+
48+
.title-card {
49+
background-image: linear-gradient(to left top, #fc5630, #fe503a, #ff4a44, #ff444d, #ff3f56);
50+
}
51+

0 commit comments

Comments
 (0)