diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 5c9ced6081e89527d5d4c2b048fe49cac7cc4a2e..07ce75c9e5e87e0fc6655bf2a048c759df1a0b41 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -24,7 +24,7 @@
<!-- METADATA LOADED -->
<div *ngIf="(metadataStatus$ | async) === 'Loaded'">
- <h2 id="dars-view-title" class="mat-h1">Completed Audit Requests</h2>
+ <h1 id="dars-view-title" class="mat-h1">Completed Audit Requests</h1>
<div class="dars-audit-group" >
<cse-dars-metadata-table
diff --git a/src/app/dars/metadata-table/metadata-table.component.html b/src/app/dars/metadata-table/metadata-table.component.html
index ba739d8f2383cf10f122b8554a2dde9bedb9f5ad..de96eb35d9e09d3d82c8dcb3f322c42a688655b9 100644
--- a/src/app/dars/metadata-table/metadata-table.component.html
+++ b/src/app/dars/metadata-table/metadata-table.component.html
@@ -1,7 +1,7 @@
<div id="audits" class="dars-table-wrapper mat-body">
<caption>
<div>
- <h4 class="mat-h4">{{title}}</h4>
+ <h2 class="mat-h2">{{title}}</h2>
<button mat-flat-button color="primary" attr.aria-label="{{button}}" (click)="buttonClick.emit()">{{button}}</button>
</div>
<p>{{tagline}}</p>
@@ -23,14 +23,6 @@
</div>
<table mat-table *ngIf="(metadata | async).length > 0" [dataSource]="dataSource">
- <!-- View Column -->
- <ng-container matColumnDef="view">
- <th mat-header-cell *matHeaderCellDef scope="col"></th>
- <td mat-cell *matCellDef="let audit">
- <!-- TODO: While an audit is in progress the route is null which causes an error '|| 0' is a working fix -->
- <a class="mat-stroked-button mat-primary" attr.aria-label="View full audit report for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}} Program of Study" [routerLink]="['/dars', audit.darsDegreeAuditReportId || 0]">View</a>
- </td>
- </ng-container>
<!-- School Column -->
<ng-container matColumnDef="school">
@@ -71,12 +63,16 @@
</td>
</ng-container>
- <!-- Status Column -->
- <ng-container matColumnDef="download">
- <th mat-header-cell *matHeaderCellDef scope="col"></th>
+ <!-- Actions Column -->
+ <ng-container matColumnDef="actions">
+ <th mat-header-cell *matHeaderCellDef scope="col">Actions</th>
<td mat-cell *matCellDef="let audit">
- <a mat-stroked-button color="primary" href="/api/darspdfservice?reportId={{ audit?.darsDegreeAuditReportId }}" target="_blank">
- <mat-icon>vertical_align_bottom</mat-icon>
+ <!-- TODO: While an audit is in progress the route is null which causes an error '|| 0' is a working fix -->
+ <a class="mat-stroked-button mat-primary view-audit-btn" attr.aria-label="View full audit report for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}} Program of Study" [routerLink]="['/dars', audit.darsDegreeAuditReportId || 0]">View</a>
+ <a mat-stroked-button color="primary" class="download-audit-pdf-btn" href="/api/darspdfservice?reportId={{ audit?.darsDegreeAuditReportId }}" target="_blank">
+ <mat-icon
+ matTooltip="Download PDF"
+ matTooltipPosition="right">vertical_align_bottom</mat-icon>
<span class="cdk-visually-hidden">Download Audit PDF for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}} Program of Study</span>
</a>
</td>
diff --git a/src/app/dars/metadata-table/metadata-table.component.scss b/src/app/dars/metadata-table/metadata-table.component.scss
index 1c51323b674aacbf137c564618c096997fcf8215..1de8fdcf9e6d2163d6a850c7dde79d4c38738cfb 100644
--- a/src/app/dars/metadata-table/metadata-table.component.scss
+++ b/src/app/dars/metadata-table/metadata-table.component.scss
@@ -1,4 +1,5 @@
@import 'assets/material-theme.scss';
+$black: #000000;
.dars-table-wrapper {
position: relative;
@@ -7,20 +8,22 @@
table {
width: 100%;
+ margin-top: 1.2em;
background-color: transparent;
- border-left: solid 1px #e3e3e3;
- border-right: solid 1px #e3e3e3;
+ tr {
+ height: 60px;
+ }
+ }
+
+ tr.mat-header-row {
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+ background-color: #fafafa;
}
caption {
display: block;
box-sizing: border-box;
width: 100%;
- padding: 20px;
- background-color: #f5f5f5;
- border: solid 1px #e3e3e3;
- border-radius: 5px 5px 0 0;
-
color: #7d7a7a;
text-align-last: left;
@@ -31,11 +34,11 @@
align-items: flex-start;
}
- h4 {
- font-weight: bold;
+ h2 {
+ color: $black;
}
- h4,
+ h2,
p {
margin: 0;
padding: 0;
@@ -52,12 +55,20 @@
.mat-paginator {
background-color: #f5f5f5;
- border: solid 1px #e3e3e3;
+ border-bottom: solid 1px #e3e3e3;
border-top-width: 0;
border-radius: 0 0 5px 5px;
}
}
+.view-audit-btn {
+ margin-right: 6px;
+}
+
+.download-audit-pdf-btn {
+ border: none;
+}
+
.no-audits {
position: relative;
display: block;
diff --git a/src/app/dars/metadata-table/metadata-table.component.ts b/src/app/dars/metadata-table/metadata-table.component.ts
index ed61a61f000c32989a341be9ac04dcc9c369ed0d..c519b26973141a6e9e992405528994baf5d80e00 100644
--- a/src/app/dars/metadata-table/metadata-table.component.ts
+++ b/src/app/dars/metadata-table/metadata-table.component.ts
@@ -45,13 +45,12 @@ export class DarsMetadataTableComponent implements OnInit, OnDestroy {
public messageSub: Subscription;
public newMessage: AuditStatusMessage;
public displayedColumns = [
- 'view',
'school',
'program',
'honors',
'plan',
'status',
- 'download',
+ 'actions',
];
constructor(
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index c4d0d553086bff8910e35136740e24f20950ac5a..22347bd61365bad39da4c108c90f6ba33bd092d8 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -151,6 +151,11 @@ main {
}
}
+.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float
+ .mat-form-field-label {
+ font-size: 16px;
+}
+
.mat-warn .mat-input-element,
.mat-form-field-invalid .mat-input-element {
caret-color: #0479a8;