replaced errors/alerts with pattern library alert style

analytics_dashboard/core/templatetags/dashboard_extras.py

@@ -82,15 +82,11 @@ def summary_point(value, label, subheading=None, tooltip=None, additional_value=
 
 
 @register.inclusion_tag('section_error.html')
-def show_chart_error(background_class=''):
+def show_chart_error():
     """
     Returns the error section with default context.
-
-    Arguments
-        background_class -- CSS class to add to the background style
-        (e.g. 'white-background').  Default background is gray.
     """
-    return _get_base_error_context('chart', background_class)
+    return _get_base_error_context('chart')
 
 
 @register.inclusion_tag('section_error.html')
@@ -103,11 +99,10 @@ def show_metrics_error():
     return _get_base_error_context('metrics')
 
 
-def _get_base_error_context(content_type, background_class=''):
+def _get_base_error_context(content_type):
     return {
         'content_type': content_type,
         'load_error_message': settings.DOCUMENTATION_LOAD_ERROR_MESSAGE,
-        'background_class': background_class
     }
 
 

analytics_dashboard/courses/templates/courses/base_grouped_content.html

@@ -10,6 +10,7 @@
     {% block module_meta %}
     {% endblock %}
 
+    {% if js_data.course.hasData %}
       <div class="section-content section-data-graph">
         <div class="section-content section-data-viz">
           <div class="analytics-chart-container">
@@ -18,25 +19,19 @@
               {% captureas chart_tip_text %}{% block chart_tip_text %}{% endblock %}{% endcaptureas %}
               {% include "chart_tooltip.html" with tip_text=chart_tip_text track_category="bar" %}
             {% endif %}
-          <div id="chart-view" class="analytics-chart {% if not js_data.course.hasData%}message-only-chart{% endif %}"
+            <div id="chart-view" class="analytics-chart"
               data-track-type="hover" data-track-event="edx.bi.graph.interacted"
               data-track-category="{% block hover_category %}{% endblock %}">
-            {% if js_data.course.hasData %}
                 {% include "loading.html" %}
-            {% else %}
-              <div class="clearfix"></div>
-              <div class="chart-message-container">
-                <p class="text-center">
-                  {{ no_data_message }}
-                </p>
-              </div>
-            {% endif %}
             </div>
           </div>
           {% block module_controls %}
           {% endblock %}
         </div>
       </div>
+    {% else %}
+      {% include "alert_information.html" with message=no_data_message %}
+    {% endif %}
 
   </section>
 

analytics_dashboard/courses/templates/courses/base_performance_answer_distribution.html

@@ -90,7 +90,7 @@
                 </div>
             </div>
             {% if not js_data.course.answerDistribution %}
-                {% show_chart_error 'white-background' %}
+                {% show_chart_error %}
             {% endif %}
         </div>
     </div>

analytics_dashboard/courses/templates/courses/base_performance_learning_outcomes.html

@@ -16,32 +16,25 @@
     {% block module_meta %}
     {% endblock %}
 
+    {% if js_data.course.hasData %}
       <div class="section-content section-data-graph">
         <div class="section-content section-data-viz">
           <div class="analytics-chart-container">
-          {% if js_data.course.hasData %}
             {% block chart_info %}
               {% include "courses/submissions_chart_info.html" %}
             {% endblock chart_info %}
             {% captureas chart_tip_text %}{% block chart_tip_text %}{% endblock %}{% endcaptureas %}
             {% include "chart_tooltip.html" with tip_text=chart_tip_text track_category="bar" %}
-          {% endif %}
-          <div id="chart-view" class="analytics-chart {% if not js_data.course.hasData%}message-only-chart{% endif %}">
-            {% if js_data.course.hasData %}
+            <div id="chart-view" class="analytics-chart">
               {% include "loading.html" %}
-            {% else %}
-              <div class="clearfix"></div>
-              <div class="chart-message-container">
-                <p class="text-center">
-                  {{ no_data_message }}
-                </p>
-              </div>
-            {% endif %}
             </div>
           </div>
           {% block module_controls %}{% endblock %}
         </div>
       </div>
+    {% else %}
+      {% include "alert_information.html" with message=no_data_message %}
+    {% endif %}
 </section>
 
 {% if js_data.course.hasData %}

analytics_dashboard/static/sass/_developer.scss

@@ -52,12 +52,6 @@ button.chart-info {
     padding-top: $padding-large-vertical;
   }
 
-  // shorten the chart so just a message (e.g. error message) is displayed
-  .message-only-chart {
-    height: inherit; // allows container height to adjust for long messages
-    min-height: 38px;
-  }
-
   .nvd3 {
     .nv-axis {
 
@@ -103,10 +97,6 @@ button.chart-info {
   }
 }
 
-.white-background {
-  background-color: white;
-}
-
 // Ensure that the map fits for different screens sizes
 // --------------------
 .world-map {

analytics_dashboard/templates/alert_information.html

+<div class="alert alert-information" role="alert" aria-labelledby="alert-information" tabindex="-1">
+    <span class="icon alert-icon fa fa-warning" aria-hidden="true"></span>
+
+    <div class="alert-message">
+        <h3 class="sr-only alert-title" id="alert-information">
+            {{ message }}
+        </h3>
+
+        <p class="alert-copy">
+            {{ message }}
+        </p>
+    </div>
+
+</div>
\ No newline at end of file

analytics_dashboard/templates/section_error.html

 {% load i18n %}
 {% load dashboard_extras %}
 
-<div class="row">
-        <div class="col col-12 sm-col-12 alert-error-container {{background_class}}">
-            <div class="col col-1 sm-col-1">
-                <span data-placement="top" class="fa fa-exclamation-triangle fa-3 alert" aria-hidden="true"></span>
-            </div>
-            <div class="col col-11 sm-col-11">
-                <div class="short-message">
-                    {% comment %}Keeping the sentences whole aids in accurate translations.{% endcomment %}
+<div class="alert alert-error" role="alert" aria-labelledby="alert-error-title" tabindex="-1">
+    <span class="icon alert-icon fa fa-warning" aria-hidden="true"></span>
+
+    <div class="alert-message">
+        <h3 class="alert-title" id="alert-error-title">
             {% if content_type == 'chart' %}
                 {% blocktrans %}We are unable to load this chart.{% endblocktrans %}
             {% elif content_type == 'table' %}
@@ -16,11 +13,10 @@
             {% elif content_type == 'metrics' %}
                 {% blocktrans %}We are unable to load these metrics.{% endblocktrans %}
             {% endif%}
-                </div>
+        </h3>
 
-                <div>
+        <p class="alert-copy-with-title">
             {{load_error_message|safe}}
-                </div>
-            </div>
+        </p>
     </div>
 </div>