Added info template.

- refactored alert templates into error and info templates

analytics_dashboard/static/apps/learners/js/views/roster-view.js

@@ -353,24 +353,25 @@ define([
             var collection = this.options.collection,
                 hasSearch =  !_.isNull(collection.searchString) && collection.searchString !== '',
                 hasActiveFilter = collection.getActiveFilterFields().length > 0,
+                suggestions = [],
                 noLearnersMessage,
-                suggestions = [];
+                detailedMessage;
             if (hasSearch || hasActiveFilter) {
                 noLearnersMessage = gettext('No learners matched your criteria.');
                 if (hasSearch) {
                     suggestions.push(gettext('Try a different search.'));
-                } if (hasActiveFilter) {
+                }
+                if (hasActiveFilter) {
                     suggestions.push(gettext('Try clearing the filters.'));
                 }
             } else {
-                noLearnersMessage = gettext(
-                    'There\'s no learner data currently available for your course.' +
-                    ' ' + 'Either no learners have enrolled yet or your data hasn\'t been processed yet.' +
-                    ' ' + 'Check back in <insert time frame here> to see the most up-to-date learner data.'
-                );
+                // TODO: can we translate multi-line strings like this?
+                noLearnersMessage = gettext("There's no learner data currently available for your course.");
+                detailedMessage = gettext("Either no learners have enrolled yet or your data hasn't been processed yet. Check back in <insert time frame here> to see the most up-to-date learner data.");
             }
             return {
-                noLearnersMessage: noLearnersMessage,
+                title: noLearnersMessage,
+                body: detailedMessage,
                 suggestions: suggestions
             };
         }
@@ -437,13 +438,13 @@ define([
             this.onLearnerCollectionUpdated(this.options.collection);
         },
         onLearnerCollectionUpdated: function (collection) {
-            if (!collection.length) {
-                this.showChildView('main', new NoLearnersView({collection: collection}));
-            } else {
+            if (collection.length) {
                 // Don't re-render the learner table view if one already exists.
                 if (!(this.getRegion('main').currentView instanceof LearnerTableView)) {
                     this.showChildView('main', new LearnerTableView({collection: collection}));
                 }
+            } else {
+                this.showChildView('main', new NoLearnersView({collection: collection}));
             }
         }
     });

analytics_dashboard/static/apps/learners/templates/error.underscore

 <div class="row">
     <div class="col-xs-12">
-        <div class="col-xs-12 error-section-container" role="alert">
+        <div class="col-xs-12 alert-error-container" role="alert">
             <div class="col-xs-1">
-                <i data-placement="top" class="fa fa-exclamation-triangle fa-3 error" aria-hidden="true"></i>
+                <i data-placement="top" class="fa fa-exclamation-triangle fa-3 alert" aria-hidden="true"></i>
             </div>
             <div class="col-xs-11">
                 <div class="short-message">

analytics_dashboard/static/apps/learners/templates/no-learners.underscore

-<div class="no-results panel panel-default">
-    <div class="panel-heading"><%- noLearnersMessage %></div>
-    <% if (suggestions.length) { %>
-        <div class="panel-body">
-            <ul class="suggestions">
-                <% suggestions.map(function (suggestion) { %>
-                    <li><%- suggestion %></li>
-                <% }); %>
-            </ul>
+<div class="row">
+    <div class="col-xs-12">
+        <div class="col-xs-12 alert-info-container" role="alert">
+            <div class="col-xs-1">
+                <i data-placement="top" class="fa fa-bullhorn fa-3 alert" aria-hidden="true"></i>
+            </div>
+            <div class="col-xs-11">
+                <div class="short-message">
+                    <%- title %>
+                </div>
+                <% if (body) { %>
+                    <div>
+                        <%- body %>
+                    </div>
+                <% } %>
+                <% if (suggestions.length) { %>
+                    <ul class="suggestions">
+                        <% suggestions.map(function (suggestion) { %>
+                            <li><%- suggestion %></li>
+                        <% }); %>
+                    </ul>
+                <% } %>
+            </div>
         </div>
-    <% } %>
+    </div>
 </div>

analytics_dashboard/static/sass/_config-variables.scss

@@ -249,9 +249,10 @@ $footer-sock-height: $footer-height + $sock-height;
 $description-border-color: $edx-gray-l1;
 $description-border: 1px solid $description-border-color;
 
-// loading error
-$error-background-color: rgb(242, 242, 242);
-$error-section-highlight-color: rgb(195, 53, 59);
+// alerts
+$alert-background-color: rgb(242, 242, 242);
+$alert-error-color: rgb(195, 53, 59);
+$alert-info-color: rgb(111, 160, 186);
 
 // FontAwesome font directory
 $fa-font-path: "/static/bower_components/font-awesome/fonts";

analytics_dashboard/static/sass/_developer.scss

@@ -94,41 +94,18 @@ button.chart-info {
   }
 }
 
-.error-section-container {
-  padding: $padding-large-horizontal $padding-large-vertical;
-  padding-bottom: $padding-large-horizontal * 2;
-  margin-bottom: $padding-large-horizontal * 2;
-  background-color: $error-background-color;
-  border-top: 4px solid $error-section-highlight-color;
-
-  i.error {
-    color: $error-section-highlight-color;
-    font-size: $font-size-large * 2;
-  }
+.alert-error-container {
+  @include alert-container($alert-error-color);
+}
 
-  .short-message {
-    font-size: $font-size-large;
-    font-weight: 700;
-    padding-bottom: $padding-small-horizontal;
-  }
+.alert-info-container {
+  @include alert-container($alert-info-color);
 }
 
 .white-background {
   background-color: white;
 }
 
-// this keeps the gray borders from touching the top band at a 45 degree angle
-.error-section-container:before {
-  border: $description-border;
-  border-top: none;
-  content: "";
-  position: absolute;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
 // Ensure that the map fits for different screens sizes
 // --------------------
 .world-map {

analytics_dashboard/static/sass/_mixins.scss

@@ -35,3 +35,35 @@
     background-color: $navbar-default-link-disabled-bg;
   }
 }
+
+@mixin alert-container($alert-color) {
+  padding: $padding-large-horizontal $padding-large-vertical;
+  padding-bottom: $padding-large-horizontal * 2;
+  margin-bottom: $padding-large-horizontal * 2;
+  background-color: $alert-background-color;
+  border-top: 4px solid $alert-color;
+
+  i.alert {
+    color: $alert-color;
+    font-size: $font-size-large * 2;
+    padding: 0;
+  }
+
+  .short-message {
+    font-size: $font-size-large;
+    font-weight: 700;
+    padding-bottom: $padding-small-horizontal;
+  }
+
+  // this keeps the gray borders from touching the top band at a 45 degree angle
+  &:before {
+    border: $description-border;
+    border-top: none;
+    content: "";
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}

analytics_dashboard/templates/section_error.html

@@ -3,9 +3,9 @@
 
 <div class="row">
     <div class="col-xs-12">
-        <div class="col-xs-12 error-section-container {{background_class}}">
+        <div class="col-xs-12 alert-error-container {{background_class}}">
             <div class="col-xs-1">
-                <i data-placement="top" class="fa fa-exclamation-triangle fa-3 error"></i>
+                <i data-placement="top" class="fa fa-exclamation-triangle fa-3 alert"></i>
             </div>
             <div class="col-xs-11">
                 <div class="short-message">