Merge pull request #291 from jeznorth/EPIC-1270

[EPIC-1270] Intro Modal Bug Fix

modules/core/client/scss/components/misc.scss

@@ -193,35 +193,53 @@ $tag-height: 3rem;
 }
 
 
-// Fixed Alert
-$fixed-alert-width: 60rem;
-
-.welcome-alert {
+// Welcome Modal
+.welcome-dialog {
     position: fixed;
-    top: 3rem;
-    left: 50%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
     z-index: 999;
-    box-shadow: 0.5rem 0.5rem 1rem rgba(#000, 0.2);
-    margin-left: calc(#{$fixed-alert-width} * -0.5);
-    padding: 2rem;
-    width: 60rem;
-    background-color: #FFF;
-    color: #494949;
-
-    h2, p {
-        margin-bottom: 2rem;
-    }
+    padding: 0;
+    overflow-y: auto;
+
+    &__content {
+        margin: 1.5rem;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        background: #fff;
+        -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
+        box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
 
-    p {
-        + p {
+        h3 {
             margin-top: 0;
+            margin-bottom: 2rem;
+        }
+
+        p { 
+            margin-top: 0;
+            margin-bottom: 0;
+
+            + p {
+                margin-top: 2rem;
+            }
+        }
+
+        .buttons {
+            margin-top: 1.5rem;
         }
     }
+}
 
-    .btn {
-        padding: 0.75rem 1rem;
-        width: 10rem;
-        font-size: 1.5rem;
+@media (min-width: 768px) {
+    .welcome-dialog {
+        top: 3rem;
+        left: 50%;
+        bottom: auto;
+        margin-left: -30rem;
+        width: 60rem;
     }
 }
 

modules/projects/client/views/projects.abstract.html

@@ -1,13 +1,21 @@
 
-<ui-view class="main-panel home-view" id="main-content-section">
+<ui-view class="main-panel home-view" 
+	id="main-content-section">
 
-	<div ng-if="!seenOnce" class="welcome-alert alert alert-success alert-dismissible" role="alert">
-		<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-		<h2>EAO Project Information &amp; Collaboration System</h2>
-		<p>Welcome to the BC Environmental Assessment Office’s new web-based Project Information and Collaboration System (EPIC), which is aimed at improving the efficiency and transparency of the provincial environmental assessment process by providing citizens and stakeholders with more intuitive access to project data and information.</p>
-		<p>EPIC is being launched as a “beta” – a fully-functional starting point upon which to build continuous improvements. As such, we’re seeking your feedback on how to make it better meet your needs. To do so, please send us an email at <a href="mailto:[email protected]">[email protected]</a> or <a href ui-sref="contact">click here</a> to learn more.</p>
-		<div class="clearfix">
-			<button class="btn btn-success pull-right" data-dismiss="alert" aria-label="Close">Get Started</button>
+	<div class="welcome-dialog alert alert-dismissable"	
+		ng-if="!seenOnce"
+		role="alert">
+		<div class="welcome-dialog__content">
+			<h3>EAO Project Information &amp; Collaboration System</h3>
+			<p>Welcome to the BC Environmental Assessment Office’s new web-based Project Information and Collaboration System (EPIC), which is aimed at improving the efficiency and transparency of the provincial environmental assessment process by providing citizens and stakeholders with more intuitive access to project data and information.</p>
+			<p>EPIC is being launched as a “beta” – a fully-functional starting point upon which to build continuous improvements. As such, we’re seeking your feedback on how to make it better meet your needs. To do so, please send us an email at <a href="mailto:[email protected]">[email protected]</a> or <a href ui-sref="contact">click here</a> to learn more.</p>
+			<div class="buttons clearfix">
+				<button class="btn btn-primary pull-right" 
+					data-dismiss="alert" 
+					aria-label="Close">
+					Get Started
+				</button>
+			</div>
 		</div>
 	</div>