From 4d7211a5bfbdcc05a0889a15baa43bbb4b6e5978 Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Wed, 24 Jul 2019 12:57:42 -0500
Subject: [PATCH] Display DARS outage banner
---
src/app/app.component.html | 7 +++++
src/app/app.component.scss | 54 ++++++++++++++++++++++++++++++++++++--
2 files changed, 59 insertions(+), 2 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index c1ba4cc..4fe3bca 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,10 @@
+<div class="alert-banner">
+ <p>
+ <md-icon class="material-icons info" role="img" aria-hidden="true">info</md-icon>
+ Coming soon! By Fall 2019, you will be able to run a DARS audit in the Course Search & Enroll app to check your degree progress and see how planned courses apply to your degree requirements!
+ </p>
+</div>
+
<header ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar" role="banner">
<cse-header></cse-header>
<cse-navigation></cse-navigation>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 4bd0efa..33edc09 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -4,7 +4,7 @@
header {
position: absolute;
- top: 0;
+ top: 44px;
left: 0;
width: 100%;
height: 112px;
@@ -20,7 +20,7 @@ header {
main {
position: absolute;
- top: 112px;
+ top: 156px;
left: 0;
bottom: 0;
right: 0;
@@ -32,3 +32,53 @@ main {
min-width: 360px;
height: 100vh;
}
+
+.alert-banner {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ background-color: white;
+ p {
+ margin: 13px 0;
+ padding: 0px 15px;
+ font-family: mat-font-family($config);
+ font-size: 14px;
+ line-height: 1.4em;
+ -webkit-font-smoothing: antialiased;
+ }
+ md-icon {
+ font-size: 16px;
+ color: #0479a8;
+ top: 2.5px;
+ }
+ a {
+ text-decoration: none;
+ }
+}
+
+@media screen and (min-width: 650px) and (max-width: 1246px) {
+ main {
+ top: 130px !important;
+ }
+ header {
+ top: 66px !important;
+ }
+}
+
+@media screen and (max-width: 649px) {
+ main {
+ top: 149px !important;
+ }
+ header {
+ top: 85px !important;
+ }
+}
+
+@media screen and (max-width: 440px) {
+ main {
+ top: 166px !important;
+ }
+ header {
+ top: 102px !important;
+ }
+}
--
GitLab