From 607ea7e6c53145bd4b5fef9685a9540cd8fc9cd2 Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Thu, 25 Jul 2019 11:54:33 -0500
Subject: [PATCH] Add Metadata Loading and Metadata Error to mobile view
---
.../dars/dars-view/dars-view.component.html | 19 ++++++++++++++++++-
.../dars/dars-view/dars-view.component.scss | 7 +++++++
2 files changed, 25 insertions(+), 1 deletion(-)
diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index aeed238..3b02cb5 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -51,7 +51,24 @@
</div>
<div *ngIf="mobileView.matches">
- <mat-card class="mat-card-mobile">
+
+ <!-- METADATA LOADING -->
+ <mat-card class="dars-view-loading" *ngIf="(metadataStatus$ | async) === 'Loading' || (metadataStatus$ | async) === 'NotLoaded'">
+ <mat-progress-bar class="card-top-spinner" mode="indeterminate"></mat-progress-bar>
+ <h2>Loading your DARS audits</h2>
+ <p>Hang tight</p>
+ </mat-card>
+ <!-- END METADATA LOADING -->
+
+ <!-- METADATA ERROR -->
+ <mat-card class="dars-view-error" *ngIf="(metadataStatus$ | async) === 'Error'">
+ <img class="bucky-image" src="../../../assets/img/bucky-dead.svg" alt="Error Bucky Badger">
+ <h2>Error loading DARS audits</h2>
+ <p>Try again in a bit</p>
+ </mat-card>
+ <!-- END METADATA ERROR -->
+
+ <mat-card class="mat-card-mobile" *ngIf="(metadataStatus$ | async) === 'Loaded'">
<mat-card-header>
<mat-card-title>Degree Audit (DARS)</mat-card-title>
</mat-card-header>
diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss
index 69a205b..adcead0 100644
--- a/src/app/dars/dars-view/dars-view.component.scss
+++ b/src/app/dars/dars-view/dars-view.component.scss
@@ -137,3 +137,10 @@ button {
border-radius: 4px 4px 0 0;
background-color: #c5050b;
}
+
+// To be removed after DARS banner goes away
+@media screen and (max-width: 1249px) {
+ #dars-container {
+ margin-top: 2.5em;
+ }
+}
--
GitLab