Skip to content

Commit 4cc9013

Browse files
enriquezreneRene Enriquez
enriquezrene
authored and
Rene Enriquez
committed
feat: ioet#529 responsive layout for time-clock screen
1 parent 6c52070 commit 4cc9013

File tree

6 files changed

+53
-74
lines changed

6 files changed

+53
-74
lines changed

‎src/app/modules/shared/components/technologies/technologies.component.html‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
1-
<div class="input-group input-group-sm">
2-
<div class="input-group-prepend">
3-
<span class="input-group-text span-width">Technology</span>
4-
</div>
1+
<div class="form-group">
2+
<label>Technology:</label>
53
<input
64
autocomplete="off"
75
(keyup)="queryTechnologies($event)"
86
id="technologies"
97
type="text"
108
class="form-control"
11-
aria-label="Small"
12-
aria-describedby="inputGroup-sizing-sm"
139
[(ngModel)]="query"
1410
/>
15-
</div>
16-
<div style="text-align: center;" *ngIf="isLoading">
17-
<img src="assets/img/spinner.gif"/>
18-
</div>
19-
<div #technologiesDropdown *ngIf="technology && showList" class="d-flex flex-column technologies-dropdown-container">
20-
<div
21-
*ngFor="let item of technology.items"
22-
(click)="addTechnology(item.name)"
23-
class="technologies-dropdown-item">
24-
{{ item.name }}
11+
12+
<div *ngIf="isLoading">
13+
<img src="assets/img/spinner.gif" />
2514
</div>
26-
</div>
27-
<div class="selected-technologies-container d-flex flex-wrap" *ngIf="selectedTechnologies?.length">
28-
<div *ngFor="let technology of selectedTechnologies; let tagIndex = index" class="selected-technology">
29-
<span class="mr-3">{{ technology }}</span>
30-
<i class="fas fa-times text-white" (click)="removeTechnology(tagIndex)"></i>
15+
16+
<div #technologiesDropdown *ngIf="technology && showList" class="form-group technologies-dropdown-container">
17+
<div
18+
*ngFor="let item of technology.items"
19+
(click)="addTechnology(item.name)"
20+
class="technologies-dropdown-item">
21+
{{ item.name }}
22+
</div>
3123
</div>
3224
</div>
33-
<div class="form-group" *ngIf="selectedTechnologies === null || selectedTechnologies.length === 0">
34-
<!-- empty-space -->
25+
<div class="form-group">
26+
<div class="form-group selected-technologies-container" *ngIf="selectedTechnologies?.length">
27+
<div *ngFor="let technology of selectedTechnologies; let tagIndex = index" class="selected-technology">
28+
<i class="fas fa-times text-white" (click)="removeTechnology(tagIndex)"></i>
29+
<span style="padding-left: 0.5rem">{{ technology }}</span>
30+
</div>
31+
</div>
32+
<div class="form-group" *ngIf="selectedTechnologies === null || selectedTechnologies.length === 0">
33+
<!-- empty-space -->
34+
</div>
35+
3536
</div>
3637

3738

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

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
@import '../../../../../styles/colors.scss';
22

33
.technologies-dropdown-container {
4-
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
5-
margin: 0 0 2rem 6rem;
4+
box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2), 0 0 0 0.1rem rgba(0, 0, 0, 0.08);
65
max-height: 8.5rem;
76
overflow-y: auto;
87
scroll-snap-type: y mandatory;
98

109
.technologies-dropdown-item {
1110
cursor: pointer;
12-
font-size: 0.8rem;
13-
margin-bottom: 0.1rem;
11+
font-size: small;
1412
padding: 0.2rem 0.5rem;
15-
scroll-snap-align: start;
1613

1714
&:hover {
1815
opacity: 0.7;
@@ -21,20 +18,16 @@
2118
}
2219
}
2320

24-
.selected-technologies-container {
25-
margin: 0.5rem 0 0.5rem 6rem;
26-
}
27-
2821
.selected-technology {
2922
background-color: $secondary;
30-
color: #ffffff;
31-
border-radius: 0.2rem;
32-
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
33-
font-size: 0.8rem;
34-
padding: 0.1rem 1rem 0.2rem 1.5rem;
23+
color: white;
24+
border-radius: 0.1rem;
25+
box-shadow: rgba(0, 0, 0, 0.75);
26+
font-size: small;
27+
padding: 0.1rem 1rem 0.1rem 1rem;
3528
position: relative;
3629
margin: 0 0.5rem 0.5rem 0;
37-
30+
display: inline-block;
3831
&:hover {
3932
opacity: 0.8;
4033
}

‎src/app/modules/time-clock/components/entry-fields/entry-fields.component.html‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,44 @@
11
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
2-
<div class="input-group input-group-sm mb-3">
3-
<div class="input-group-prepend">
4-
<span class="input-group-text span-width">Activity</span>
5-
</div>
2+
<div class="form-group">
3+
<label>Activity:</label>
64
<select
7-
id="activitiesSelect"
85
(change)="onSubmit()"
96
class="form-control"
107
formControlName="activity_id"
118
[class.is-invalid]="activity_id.invalid && activity_id.touched"
12-
required
13-
>
9+
required>
1410
<option value="-1"></option>
1511
<option *ngFor="let activity of activities" value="{{ activity.id }}">{{ activity.name }}</option>
1612
</select>
1713
</div>
18-
<div class="input-group input-group-sm mb-3">
19-
<div class="input-group-prepend">
20-
<span class="input-group-text span-width">Ticket URI</span>
21-
</div>
14+
15+
<div class="form-group">
16+
<label>Ticket URI:</label>
2217
<input
2318
(blur)="onSubmit()"
2419
type="text"
2520
id="uri"
2621
formControlName="uri"
2722
class="form-control"
28-
aria-label="Small"
29-
aria-describedby="inputGroup-sizing-sm"
3023
/>
3124
</div>
25+
3226
<app-technologies
3327
(technologyAdded)="onTechnologyAdded($event)"
3428
(technologyRemoved)="onTechnologyRemoved($event)"
3529
[selectedTechnologies]="selectedTechnologies"
3630
>
3731
</app-technologies>
3832

39-
<div class="input-group input-group-sm mb-3">
40-
<div class="input-group-prepend">
41-
<span class="input-group-text span-width">Description</span>
42-
</div>
33+
<div class="form-group">
34+
<label>Description:</label>
4335
<textarea
4436
maxlength="1500"
4537
(blur)="onSubmit()"
4638
formControlName="description"
4739
class="form-control"
4840
id="NotesTextarea"
49-
rows="2"
50-
>
51-
</textarea>
41+
rows="2"></textarea>
5242
</div>
43+
5344
</form>

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
<form [formGroup]="projectsForm">
2-
<div class="input-group input-group-sm mb-3">
3-
<div class="input-group-prepend">
4-
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
5-
</div>
6-
2+
<div class="form-group">
3+
<label>Project:</label>
74
<div class="form-control autocomplete">
8-
95
<ng-autocomplete
106
formControlName="project_id"
117
[data]="listProjects"
@@ -27,11 +23,11 @@
2723
</div>
2824
<div class="p-2 pr-3">
2925
<button *ngIf="showClockIn" class="btn btn-sm btn-primary btn-select"
30-
(click)="clockIn(item.id, item.customer_name, item.name)">Clock In</button>
26+
(click)="clockIn(item.id, item.customer_name, item.name)">Clock In</button>
3127
<button *ngIf="!showClockIn" class="btn btn-sm btn-primary btn-select"
32-
(click)="switch(item.id, item.customer_name, item.name)">Switch</button>&nbsp;
28+
(click)="switch(item.id, item.customer_name, item.name)">Switch</button>&nbsp;
3329
<button *ngIf="!showClockIn" class="btn btn-sm btn-update btn-select"
34-
(click)="updateProject(item.id)">Update project</button>
30+
(click)="updateProject(item.id)">Update project</button>
3531
</div>
3632
</div>
3733
</ng-template>

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
@import '../../../../../styles/colors.scss';
22

33
.span-width {
4-
width: 6rem;
54
background-color: $primary;
65
color: white;
7-
height: 40px;
86
}
97

108
.btn-select {
11-
padding: 2px 10px;
9+
padding: 0.2rem 1rem;
1210
font-size: x-small;
1311
}
1412

@@ -18,7 +16,6 @@
1816
}
1917

2018
.autocomplete {
21-
width: 80%;
2219
display: block;
2320
background-clip: padding-box;
2421
border: none;
@@ -27,6 +24,6 @@
2724
}
2825

2926
.btn-update {
30-
background-color: #ff5e06;
27+
background-color: $warning;
3128
color: white;
3229
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@
1313
</p>
1414
</div>
1515
</div>
16+
1617
<app-project-list-hover></app-project-list-hover>
1718
<div *ngIf="areFieldsVisible">
1819
<app-entry-fields></app-entry-fields>
1920
</div>
2021

21-
<div class="form-group" style="text-align: right;">
22-
<button *ngIf="areFieldsVisible" class="btn btn-primary" type="button" (click)="clockOut()">
22+
<div class="form-group">
23+
<button *ngIf="areFieldsVisible" class="btn btn-primary btn-block" type="button" (click)="clockOut()">
2324
Clock Out
2425
</button>
2526
</div>

0 commit comments

Comments
 (0)