Skip to content

Commit 58b5dc6

Browse files
scastillo-jpscastillo-jp
committed
fix: TT-144 responsive tables scroll
1 parent 390b6a9 commit 58b5dc6

File tree

2 files changed

+53
-58
lines changed

2 files changed

+53
-58
lines changed

‎src/app/modules/reports/components/time-entries-table/time-entries-table.component.html‎

Lines changed: 49 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,50 @@
1-
<div class="row mt-5">
2-
<div>
3-
<div class="table-responsive">
4-
<table
5-
class="table table-sm table-striped mb-0"
6-
datatable
7-
[dtTrigger]="dtTrigger"
8-
[dtOptions]="dtOptions"
9-
*ngIf="(reportDataSource$ | async) as dataSource">
10-
<thead class="thead-blue">
11-
<tr class="d-flex">
12-
<th class="hidden-col">ID</th>
13-
<th class="col md-col">User email</th>
14-
<th class="col sm-col">Date</th>
15-
<th class="col x-sm-col" title="Duration (hours)">Duration (hours)</th>
16-
<th class="col x-sm-col" title="Time in">Time in</th>
17-
<th class="col x-sm-col" title="Time out">Time out</th>
18-
<th class="col md-col">Project</th>
19-
<th class="hidden-col">Project ID</th>
20-
<th class="col md-col">Customer</th>
21-
<th class="hidden-col">Customer ID</th>
22-
<th class="col md-col">Activity</th>
23-
<th class="col lg-col">Ticket</th>
24-
<th class="col lg-col">Description</th>
25-
<th class="col lg-col">Technologies</th>
26-
</tr>
27-
</thead>
28-
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
29-
<tbody *ngIf="!dataSource.isLoading">
30-
<tr class="d-flex" *ngFor="let entry of dataSource.data">
31-
<td class="hidden-col">{{ entry.id }}</td>
32-
<td class="col md-col">{{ entry.owner_email }}</td>
33-
<td class="col sm-col">
34-
{{ entry.start_date | date: 'MM/dd/yyyy' }}
35-
</td>
36-
<td class="col x-sm-col">
37-
{{ entry.end_date | substractDate: entry.start_date }}
38-
</td>
39-
<td class="col x-sm-col">{{ entry.start_date | date: 'HH:mm' }}</td>
40-
<td class="col x-sm-col">{{ entry.end_date | date: 'HH:mm' }}</td>
41-
<td class="col md-col">{{ entry.project_name }}</td>
42-
<td class="hidden-col">{{ entry.project_id }}</td>
43-
<td class="col md-col">{{ entry.customer_name }}</td>
44-
<td class="hidden-col">{{ entry.customer_id }}</td>
45-
<td class="col md-col">{{ entry.activity_name }}</td>
46-
<td class="col lg-col">{{ entry.uri }}</td>
47-
<td class="col lg-col">{{ entry.description }}</td>
48-
<td class="col lg-col">{{ entry.technologies }}</td>
49-
</tr>
50-
</tbody>
51-
</table>
52-
</div>
53-
</div>
1+
<div class="row scroll-table mt-5 ml-0">
2+
<table
3+
class="table table-striped mb-0"
4+
datatable
5+
[dtTrigger]="dtTrigger"
6+
[dtOptions]="dtOptions"
7+
*ngIf="(reportDataSource$ | async) as dataSource">
8+
<thead class="thead-blue">
9+
<tr class="d-flex">
10+
<th class="hidden-col">ID</th>
11+
<th class="col md-col">User email</th>
12+
<th class="col sm-col">Date</th>
13+
<th class="col x-sm-col" title="Duration (hours)">Duration (hours)</th>
14+
<th class="col x-sm-col" title="Time in">Time in</th>
15+
<th class="col x-sm-col" title="Time out">Time out</th>
16+
<th class="col md-col">Project</th>
17+
<th class="hidden-col">Project ID</th>
18+
<th class="col md-col">Customer</th>
19+
<th class="hidden-col">Customer ID</th>
20+
<th class="col md-col">Activity</th>
21+
<th class="col lg-col">Ticket</th>
22+
<th class="col lg-col">Description</th>
23+
<th class="col lg-col">Technologies</th>
24+
</tr>
25+
</thead>
26+
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
27+
<tbody *ngIf="!dataSource.isLoading">
28+
<tr class="d-flex" *ngFor="let entry of dataSource.data">
29+
<td class="hidden-col">{{ entry.id }}</td>
30+
<td class="col md-col">{{ entry.owner_email }}</td>
31+
<td class="col sm-col">
32+
{{ entry.start_date | date: 'MM/dd/yyyy' }}
33+
</td>
34+
<td class="col x-sm-col">
35+
{{ entry.end_date | substractDate: entry.start_date }}
36+
</td>
37+
<td class="col x-sm-col">{{ entry.start_date | date: 'HH:mm' }}</td>
38+
<td class="col x-sm-col">{{ entry.end_date | date: 'HH:mm' }}</td>
39+
<td class="col md-col">{{ entry.project_name }}</td>
40+
<td class="hidden-col">{{ entry.project_id }}</td>
41+
<td class="col md-col">{{ entry.customer_name }}</td>
42+
<td class="hidden-col">{{ entry.customer_id }}</td>
43+
<td class="col md-col">{{ entry.activity_name }}</td>
44+
<td class="col lg-col">{{ entry.uri }}</td>
45+
<td class="col lg-col">{{ entry.description }}</td>
46+
<td class="col lg-col">{{ entry.technologies }}</td>
47+
</tr>
48+
</tbody>
49+
</table>
5450
</div>

‎src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,9 @@
2626
.hidden-col{
2727
display: none;
2828
}
29-
.table {
30-
overflow-x: auto;
31-
}
32-
.row{
29+
30+
.scroll-table {
31+
overflow-x: scroll;
3332
width: 100%;
3433
display: grid;
35-
}
34+
}

0 commit comments

Comments
 (0)