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=
@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,33 +10,28 @@
{% block module_meta %}
{% endblock %}
<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 %}{% 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 %}
<div class="section-content section-data-graph">
<div class="section-content section-data-viz">
<div class="analytics-chart-container">
{% 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>
{% 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"
data-track-type="hover" data-track-event="edx.bi.graph.interacted"
data-track-category="{% block hover_category %}{% endblock %}">
{% include "loading.html" %}
</div>
</div>
{% block module_controls %}
{% endblock %}
</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 %}
<div class="section-content section-data-graph">
<div class="section-content section-data-viz">
<div class="analytics-chart-container">
{% if js_data.course.hasData %}
{% if js_data.course.hasData %}
<div class="section-content section-data-graph">
<div class="section-content section-data-viz">
<div class="analytics-chart-container">
{% block chart_info %}
{% include "courses/submissions_chart_info.html" %}
{% 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>
{% 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 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 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 %}
{% 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 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>
{{load_error_message|safe}}
</div>
</div>
</div>
<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' %}
{% 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>
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