Skip to content

Commit 2d6501c

Browse files
veenoiseveenoise
committed
feat: responsive table in /matrix
1 parent 39a85d2 commit 2d6501c

2 files changed

Lines changed: 61 additions & 60 deletions

File tree

‎src/app/pages/matrix/matrix.component.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,8 @@
124124
font-size: medium;
125125
}
126126

127-
.matrix-table {
128-
width: 100%;
129-
margin-bottom: 20px;
127+
.mat-table-container {
128+
overflow-x: auto;
130129
}
131130

132131
/* No data message styling */

‎src/app/pages/matrix/matrix.component.html‎

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -30,66 +30,68 @@
3030
<button class="reset-button" (click)="reset()">RESET</button>
3131

3232
<!-- eslint-disable -->
33-
<table
34-
mat-table
35-
[dataSource]="dataSource"
36-
class="mat-elevation-z8 matrix-table">
33+
<div class="mat-table-container">
34+
<table
35+
mat-table
36+
[dataSource]="dataSource"
37+
class="mat-elevation-z8 matrix-table">
3738

38-
<!-- Category Column -->
39-
<ng-container matColumnDef="Category">
40-
<th mat-header-cell *matHeaderCellDef class="table-small-width">Dimension</th>
41-
<td mat-cell *matCellDef="let element" class="table-small-width">
42-
<div class="dim-icon">
43-
<mat-icon mat-list-icon color="primary">{{dataStore?.meta?.getIcon(element.Category)}}</mat-icon>
44-
{{ element.Category }}
45-
</div>
46-
</td>
47-
</ng-container>
48-
49-
<!-- Dimension Column -->
50-
<ng-container matColumnDef="Dimension">
51-
<th mat-header-cell *matHeaderCellDef class="table-small-width">Sub-dimension</th>
52-
<td mat-cell *matCellDef="let element" class="table-small-width">
53-
{{ element.Dimension }}
54-
</td>
55-
</ng-container>
56-
57-
<div *ngFor="let level of levels | keyvalue">
58-
<ng-container matColumnDef="{{ level.key }}">
59-
<th mat-header-cell *matHeaderCellDef>{{ level.value }}</th>
60-
<td mat-cell *matCellDef="let element">
61-
<ul class="activity-list">
62-
<li class="mat-cell-activity" *ngFor="let activity of element[level.key]">
63-
<div>
64-
<div>
65-
<a
66-
class="activity-title"
67-
(click)="navigate(activity.uuid)"
68-
>{{ activity.name }}</a
69-
>
70-
</div>
71-
<span *ngIf="activity.tags" class="tags-activity">
72-
<span *ngFor="let tag of activity.tags; let i = index">
73-
<span *ngIf="i > 0">, </span>[{{ tag }}]</span
74-
>
75-
</span>
76-
</div>
77-
</li>
78-
</ul>
39+
<!-- Category Column -->
40+
<ng-container matColumnDef="Category">
41+
<th mat-header-cell *matHeaderCellDef class="table-small-width">Dimension</th>
42+
<td mat-cell *matCellDef="let element" class="table-small-width">
43+
<div class="dim-icon">
44+
<mat-icon mat-list-icon color="primary">{{dataStore?.meta?.getIcon(element.Category)}}</mat-icon>
45+
{{ element.Category }}
46+
</div>
47+
</td>
48+
</ng-container>
49+
50+
<!-- Dimension Column -->
51+
<ng-container matColumnDef="Dimension">
52+
<th mat-header-cell *matHeaderCellDef class="table-small-width">Sub-dimension</th>
53+
<td mat-cell *matCellDef="let element" class="table-small-width">
54+
{{ element.Dimension }}
7955
</td>
8056
</ng-container>
81-
</div>
82-
<!-- eslint-enable -->
57+
58+
<div *ngFor="let level of levels | keyvalue">
59+
<ng-container matColumnDef="{{ level.key }}">
60+
<th mat-header-cell *matHeaderCellDef>{{ level.value }}</th>
61+
<td mat-cell *matCellDef="let element">
62+
<ul class="activity-list">
63+
<li class="mat-cell-activity" *ngFor="let activity of element[level.key]">
64+
<div>
65+
<div>
66+
<a
67+
class="activity-title"
68+
(click)="navigate(activity.uuid)"
69+
>{{ activity.name }}</a
70+
>
71+
</div>
72+
<span *ngIf="activity.tags" class="tags-activity">
73+
<span *ngFor="let tag of activity.tags; let i = index">
74+
<span *ngIf="i > 0">, </span>[{{ tag }}]</span
75+
>
76+
</span>
77+
</div>
78+
</li>
79+
</ul>
80+
</td>
81+
</ng-container>
82+
</div>
83+
<!-- eslint-enable -->
8384

84-
<!-- No data message -->
85-
<tr class="mat-row" *matNoDataRow>
86-
<td class="mat-cell" [attr.colspan]="columnNames.length">
87-
No activities match the selected filters
88-
</td>
89-
</tr>
85+
<!-- No data message -->
86+
<tr class="mat-row" *matNoDataRow>
87+
<td class="mat-cell" [attr.colspan]="columnNames.length">
88+
No activities match the selected filters
89+
</td>
90+
</tr>
9091

91-
<tr mat-header-row *matHeaderRowDef="columnNames"></tr>
92-
<tr mat-row *matRowDef="let row; columns: columnNames"></tr>
93-
<tr mat-footer-row></tr>
94-
</table>
92+
<tr mat-header-row *matHeaderRowDef="columnNames"></tr>
93+
<tr mat-row *matRowDef="let row; columns: columnNames"></tr>
94+
<tr mat-footer-row></tr>
95+
</table>
96+
</div>
9597
</div>

0 commit comments

Comments
 (0)