You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/02/04 15:21:12 UTC
[incubator-dlab] 01/01: [DLAB-1519]: Made report footer sticky
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1519
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 84977909879550687cc752852f786f7f155c2a48
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Feb 4 17:20:40 2020 +0200
[DLAB-1519]: Made report footer sticky
---
.../reporting-grid/reporting-grid.component.html | 16 ++++++++--------
.../reporting-grid/reporting-grid.component.scss | 10 ++++++++++
2 files changed, 18 insertions(+), 8 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
index 5069a7c..c21bb07 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
@@ -31,7 +31,7 @@
</button>
</th>
<td mat-cell *matCellDef="let element"> {{element[DICTIONARY[PROVIDER].billing.dlabId]}} </td>
- <td mat-footer-cell *matFooterCellDef> Total </td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"> Total </td>
</ng-container>
<ng-container matColumnDef="user">
@@ -45,7 +45,7 @@
</button>
</th>
<td mat-cell *matCellDef=" let element"> {{element.user}} </td>
- <td mat-footer-cell *matFooterCellDef></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
<ng-container matColumnDef="project">
@@ -59,7 +59,7 @@
</button>
</th>
<td mat-cell *matCellDef="let element"> {{element.project}} </td>
- <td mat-footer-cell *matFooterCellDef></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
<ng-container matColumnDef="type">
@@ -73,7 +73,7 @@
</button>
</th>
<td mat-cell *matCellDef="let element"> {{element[DICTIONARY[PROVIDER].billing.resourceType]}} </td>
- <td mat-footer-cell *matFooterCellDef></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
<ng-container matColumnDef="status">
@@ -91,7 +91,7 @@
*ngIf="element.status">{{ element.status.toLowerCase() }}</span>
<span *ngIf="!element.status">N/A</span>
</td>
- <td mat-footer-cell *matFooterCellDef></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
<ng-container matColumnDef="shape">
@@ -108,7 +108,7 @@
<td mat-cell *matCellDef="let element">
<span [outerHTML]="element['shape'] | lineBreak"></span>
</td>
- <td mat-footer-cell *matFooterCellDef></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
<ng-container matColumnDef="service">
@@ -126,7 +126,7 @@
{{ element['service'] }}
<span *ngIf="element.resource_type">({{ element.resource_type }})</span>
</td>
- <td mat-footer-cell *matFooterCellDef></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
<ng-container matColumnDef="charge" stickyEnd>
@@ -137,7 +137,7 @@
<td mat-cell *matCellDef="let element">
{{ element[DICTIONARY[PROVIDER].billing.cost] }} {{ element[DICTIONARY[PROVIDER].billing.currencyCode] }}
</td>
- <td mat-footer-cell *matFooterCellDef>
+ <td mat-footer-cell *matFooterCellDef class="table-footer">
<span *ngIf="reportData?.length">{{ fullReport['cost_total'] }}
{{ fullReport[DICTIONARY[PROVIDER].billing.currencyCode] }}</span>
</td>
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
index b4a0c36..9e6a541 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
@@ -19,6 +19,7 @@
.table-wrapper {
width: 100%;
+
}
.reporting {
@@ -172,6 +173,15 @@
}
}
+.table-footer{
+ position: sticky;
+ bottom: 0;
+ background: inherit;
+ border-top: 1px solid #E0E0E0;
+ transform: translateY(-1px);
+ border-bottom: none;
+}
+
@media screen and (max-width: 1280px) {
.dashboard_table.reporting {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org