From 2c1ce65c52ef1ebcf0eb3fd94a2350ebe8938f3a Mon Sep 17 00:00:00 2001
From: Scott Berg <saberg3@wisc.edu>
Date: Tue, 9 Jul 2019 10:45:14 -0500
Subject: [PATCH] Update styles for a loading audit.
---
.../dars/dars-view/dars-view.component.html | 9 +++----
.../dars/dars-view/dars-view.component.scss | 24 ++++++++++++-------
2 files changed, 20 insertions(+), 13 deletions(-)
diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 689c350..3040c22 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -12,15 +12,16 @@
</button>
</div>
- <!-- <ng-container [ngSwitch]="visibleAuditStatus$ | async"> -->
<ng-container [ngSwitch]="visibleAuditStatus$ | async">
<ng-container *ngSwitchCase="'Loaded'">
<cse-dars-audit [audit]="audit$ | async"></cse-dars-audit>
</ng-container>
<ng-container *ngSwitchCase="'Loading'">
- <img id="loading-bucky" src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
- <p>Loading your degree Audit</p>
- <mat-spinner diameter="50"></mat-spinner>
+ <mat-card class="loading-wrapper">
+ <mat-progress-bar class="loading-audit-progress-bar" mode="query"></mat-progress-bar>
+ <img id="loading-bucky" src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
+ <p>Loading your degree Audit</p>
+ </mat-card>
</ng-container>
</ng-container>
</div>
diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss
index 3f419ea..c949a51 100644
--- a/src/app/dars/dars-view/dars-view.component.scss
+++ b/src/app/dars/dars-view/dars-view.component.scss
@@ -44,23 +44,29 @@
margin: 0 1rem 1rem;
}
-#loading-bucky {
- width: 100%;
- display: block;
- max-width: 256px;
-}
-
-#loading-audit {
+.loading-wrapper {
+ position: relative;
+ padding: 50px 10px;
text-align: center;
font-family: mat-font-family($config);
+
+ .loading-audit-progress-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+
+ border-radius: 0 0 4px 4px;
+ }
+
img {
width: 100%;
- max-width: 150px;
+ max-width: 125px;
margin: auto;
}
p {
- text-transform: uppercase;
+ // text-transform: uppercase;
font-weight: bold;
font-size: 18px;
}
--
GitLab