Skip to content

E
edx-analytics-dashboard
Commit 77f7410c by Dennis Jen
Options

replaced errors/alerts with pattern library alert style

parent 269ec56a
Showing with 64 additions and 80 deletions
analytics_dashboard/core/templatetags/dashboard_extras.py
...@@ -82,15 +82,11 @@ def summary_point(value, label, subheading=None, tooltip=None, additional_value= ...@@ -82,15 +82,11 @@ def summary_point(value, label, subheading=None, tooltip=None, additional_value=
@register.inclusion_tag('section_error.html') @register.inclusion_tag('section_error.html')
def show_chart_error(background_class=''): def show_chart_error():
""" """
Returns the error section with default context. 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') @register.inclusion_tag('section_error.html')
...@@ -103,11 +99,10 @@ def show_metrics_error(): ...@@ -103,11 +99,10 @@ def show_metrics_error():
return _get_base_error_context('metrics') return _get_base_error_context('metrics')
def _get_base_error_context(content_type, background_class=''): def _get_base_error_context(content_type):
return { return {
'content_type': content_type, 'content_type': content_type,
'load_error_message': settings.DOCUMENTATION_LOAD_ERROR_MESSAGE, 'load_error_message': settings.DOCUMENTATION_LOAD_ERROR_MESSAGE,
'background_class': background_class
} }
......
analytics_dashboard/courses/templates/courses/base_grouped_content.html
...@@ -10,33 +10,28 @@ ...@@ -10,33 +10,28 @@
{% block module_meta %} {% block module_meta %}
{% endblock %} {% endblock %}
<div class="section-content section-data-graph"> {% if js_data.course.hasData %}
<div class="section-content section-data-viz"> <div class="section-content section-data-graph">
<div class="analytics-chart-container"> <div class="section-content section-data-viz">
{% if js_data.course.hasData %} <div class="analytics-chart-container">
{% block chart_info %}{% endblock %}
{% 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 %}"
data-track-type="hover" data-track-event="edx.bi.graph.interacted"
data-track-category="{% block hover_category %}{% endblock %}">
{% if js_data.course.hasData %} {% if js_data.course.hasData %}
{% include "loading.html" %} {% block chart_info %}{% endblock %}
{% else %} {% captureas chart_tip_text %}{% block chart_tip_text %}{% endblock %}{% endcaptureas %}
<div class="clearfix"></div> {% include "chart_tooltip.html" with tip_text=chart_tip_text track_category="bar" %}
<div class="chart-message-container">
<p class="text-center">
{{ no_data_message }}
</p>
</div>
{% endif %} {% 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 %}">
{% include "loading.html" %}
</div>
</div> </div>
{% block module_controls %}
{% endblock %}
</div> </div>
{% block module_controls %}
{% endblock %}
</div> </div>
</div> {% else %}
{% include "alert_information.html" with message=no_data_message %}
{% endif %}
</section> </section>
......
analytics_dashboard/courses/templates/courses/base_performance_answer_distribution.html
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
</div> </div>
</div> </div>
{% if not js_data.course.answerDistribution %} {% if not js_data.course.answerDistribution %}
{% show_chart_error 'white-background' %} {% show_chart_error %}
{% endif %} {% endif %}
</div> </div>
</div> </div>
......
analytics_dashboard/courses/templates/courses/base_performance_learning_outcomes.html
...@@ -16,32 +16,25 @@ ...@@ -16,32 +16,25 @@
{% block module_meta %} {% block module_meta %}
{% endblock %} {% endblock %}
<div class="section-content section-data-graph"> {% if js_data.course.hasData %}
<div class="section-content section-data-viz"> <div class="section-content section-data-graph">
<div class="analytics-chart-container"> <div class="section-content section-data-viz">
{% if js_data.course.hasData %} <div class="analytics-chart-container">
{% block chart_info %} {% block chart_info %}
{% include "courses/submissions_chart_info.html" %} {% include "courses/submissions_chart_info.html" %}
{% endblock chart_info %} {% endblock chart_info %}
{% captureas chart_tip_text %}{% block chart_tip_text %}{% endblock %}{% endcaptureas %} {% captureas chart_tip_text %}{% block chart_tip_text %}{% endblock %}{% endcaptureas %}
{% include "chart_tooltip.html" with tip_text=chart_tip_text track_category="bar" %} {% include "chart_tooltip.html" with tip_text=chart_tip_text track_category="bar" %}
{% endif %} <div id="chart-view" class="analytics-chart">
<div id="chart-view" class="analytics-chart {% if not js_data.course.hasData%}message-only-chart{% endif %}">
{% if js_data.course.hasData %}
{% include "loading.html" %} {% include "loading.html" %}
{% else %} </div>
<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>
{% block module_controls %}{% endblock %}
</div> </div>
</div> {% else %}
{% include "alert_information.html" with message=no_data_message %}
{% endif %}
</section> </section>
{% if js_data.course.hasData %} {% if js_data.course.hasData %}
......
analytics_dashboard/static/sass/_developer.scss
...@@ -52,12 +52,6 @@ button.chart-info { ...@@ -52,12 +52,6 @@ button.chart-info {
padding-top: $padding-large-vertical; 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 { .nvd3 {
.nv-axis { .nv-axis {
...@@ -103,10 +97,6 @@ button.chart-info { ...@@ -103,10 +97,6 @@ button.chart-info {
} }
} }
.white-background {
background-color: white;
}
// Ensure that the map fits for different screens sizes // Ensure that the map fits for different screens sizes
// -------------------- // --------------------
.world-map { .world-map {
......
analytics_dashboard/templates/alert_information.html 0 → 100644
<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 i18n %}
{% load dashboard_extras %} {% load dashboard_extras %}
<div class="row"> <div class="alert alert-error" role="alert" aria-labelledby="alert-error-title" tabindex="-1">
<div class="col col-12 sm-col-12 alert-error-container {{background_class}}"> <span class="icon alert-icon fa fa-warning" aria-hidden="true"></span>
<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 %}
{% if content_type == 'chart' %}
{% blocktrans %}We are unable to load this chart.{% endblocktrans %}
{% elif content_type == 'table' %}
{% blocktrans %}We are unable to load this table.{% endblocktrans %}
{% elif content_type == 'metrics' %}
{% blocktrans %}We are unable to load these metrics.{% endblocktrans %}
{% endif%}
</div>
<div> <div class="alert-message">
{{load_error_message|safe}} <h3 class="alert-title" id="alert-error-title">
</div> {% if content_type == 'chart' %}
</div> {% blocktrans %}We are unable to load this chart.{% endblocktrans %}
</div> {% elif content_type == 'table' %}
{% blocktrans %}We are unable to load this table.{% endblocktrans %}
{% elif content_type == 'metrics' %}
{% blocktrans %}We are unable to load these metrics.{% endblocktrans %}
{% endif%}
</h3>
<p class="alert-copy-with-title">
{{load_error_message|safe}}
</p>
</div>
</div> </div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment