1
0
Fork 0

Add a legend for observation ID colors

Adds an includable modal that shows a legend for the colors in an observation ID. Included in the Observations page and Station page
merge-requests/395/head
Corey Shields 2017-08-18 19:39:09 -04:00
parent 917445d50e
commit 91d52ba57d
3 changed files with 44 additions and 0 deletions

View File

@ -16,6 +16,9 @@
href="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Filters
</button>
<a class="btn btn-default btn-sm" role="button" href="#legend" data-toggle="modal" data-target="#LegendModal">
<span class="glyphicon glyphicon-certificate" aria-hidden="true"></span> Legend
</a>
<div class="collapse{% if norad %} in{% endif %}" id="collapseFilters">
<div class="filter-section">
@ -112,6 +115,7 @@
</div>
</div>
{% include 'includes/satellite.html' %}
{% include 'includes/legend.html' %}
{% endblock content %}
{% block javascript %}

View File

@ -172,6 +172,9 @@
</li>
</ul>
<div class="tab-content">
<a class="btn btn-default btn-sm" role="button" href="#legend" data-toggle="modal" data-target="#LegendModal">
<span class="glyphicon glyphicon-certificate" aria-hidden="true"></span> Legend
</a>
<div class="tab-pane active" id="observations">
<table class="table table-hover">
<thead>
@ -384,6 +387,7 @@
{% include 'includes/station_edit.html' %}
{% endif %}
{% include 'includes/satellite.html' %}
{% include 'includes/legend.html' %}
{% endblock content %}
{% block javascript %}

View File

@ -0,0 +1,36 @@
<div class="modal fade" id="LegendModal" tabindex="-1" role="dialog" aria-labelledby="LegendModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="LegendModalTitle">Legend</h4>
</div>
<div class="modal-body">
<table>
<tbody>
<tr><td>
<span>The ID number of each observation is listed below, colored as such:</span>
</td></tr>
<tr><td>
<span class="label label-info" title="This observation is in the future">43</span> This observation is in the future</span>
</td></tr>
<tr><td>
<span class="label label-success" title="There is known good data in this observation">12</span> There is some known good data in this observation
</td></tr>
<tr><td>
<span class="label label-warning" title="There is data that needs vetting in this observation">56</span> There is data that needs vetting in this observation
</td></tr>
<tr><td>
<span class="label label-danger" title="No good data in this observation">93</span> No good data in this observation
</td></tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>