[LNT] r282518 - Introduce floating table headers in LNT
Chris Matthews via llvm-commits
llvm-commits at lists.llvm.org
Tue Sep 27 11:16:58 PDT 2016
Author: cmatthews
Date: Tue Sep 27 13:16:57 2016
New Revision: 282518
URL: http://llvm.org/viewvc/llvm-project?rev=282518&view=rev
Log:
Introduce floating table headers in LNT
Some tables are so long you can't see the headings as you scroll. This
change adds a floating-table style you can add to those tables and the
floatTHead javascript library will move those headers as you scroll.
Added floating headers to matrix page and runs page.
Modified:
lnt/trunk/lnt/server/ui/templates/layout.html
lnt/trunk/lnt/server/ui/templates/v4_matrix.html
lnt/trunk/lnt/server/ui/templates/v4_run.html
Modified: lnt/trunk/lnt/server/ui/templates/layout.html
URL: http://llvm.org/viewvc/llvm-project/lnt/trunk/lnt/server/ui/templates/layout.html?rev=282518&r1=282517&r2=282518&view=diff
==============================================================================
--- lnt/trunk/lnt/server/ui/templates/layout.html (original)
+++ lnt/trunk/lnt/server/ui/templates/layout.html Tue Sep 27 13:16:57 2016
@@ -1,32 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8"/>
- <link href="{{ url_for('.static', filename='bootstrap/css/bootstrap.min.css')
- }}" rel="stylesheet" media="screen"/>
- <link href="{{ url_for('.static', filename='bootstrap/css/bootstrap-responsive.min.css')
- }}" rel="stylesheet"/>
- <link href="{{ url_for('.static', filename='narrow.css')
- }}" rel="stylesheet" media='screen and (max-width: 750px)'/>
- <link href="{{ url_for('.static', filename='wide.css')
- }}" rel="stylesheet" media='screen and (min-width: 750px)'/>
- <script src="{{ url_for('.static', filename='jquery/1.7.2/jquery-1.7.2.min.js')
- }}"> </script>
- <script src="{{ url_for('.static', filename='jquery/jquery.dateFormat/jquery-dateFormat.min.js')
- }}"> </script>
-
- <script src="{{ url_for('.static', filename='bootstrap/js/bootstrap.min.js')
- }}"></script>
- <script src="{{ url_for('.static', filename='timedate.js')
- }}"></script>
-
- <!-- DataTables CSS -->
- <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.8/css/jquery.dataTables.css" />
-
- <!-- DataTables -->
- <script type="text/javascript" charset="UTF-8" src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.js">
- </script>
+ <meta charset="UTF-8"/>
+ <link href="{{ url_for('.static', filename='bootstrap/css/bootstrap.min.css')
+ }}" rel="stylesheet" media="screen"/>
+ <link href="{{ url_for('.static', filename='bootstrap/css/bootstrap-responsive.min.css')
+ }}" rel="stylesheet"/>
+ <link href="{{ url_for('.static', filename='narrow.css')
+ }}" rel="stylesheet" media='screen and (max-width: 750px)'/>
+ <link href="{{ url_for('.static', filename='wide.css')
+ }}" rel="stylesheet" media='screen and (min-width: 750px)'/>
+ <script src="{{ url_for('.static', filename='jquery/1.7.2/jquery-1.7.2.min.js')
+ }}"> </script>
+ <script src="{{ url_for('.static', filename='jquery/jquery.dateFormat/jquery-dateFormat.min.js')
+ }}"> </script>
+
+ <script src="{{ url_for('.static', filename='bootstrap/js/bootstrap.min.js')
+ }}"></script>
+ <script src="{{ url_for('.static', filename='timedate.js')
+ }}"></script>
+
+ <!-- DataTables CSS -->
+ <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.8/css/jquery.dataTables.css" />
+
+ <!-- DataTables -->
+ <script type="text/javascript" charset="UTF-8" src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.js">
+ </script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.4.2/jquery.floatThead.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
@@ -84,6 +85,11 @@
tr:hover .profile-btn {
visibility: visible;
}
+
+ /* Floating headers can't have clear backgrounds. */
+ .floating_header thead {
+ background-color: #FFFFFF;
+ }
</style>
@@ -99,6 +105,19 @@
<script type='text/javascript'>
{% block javascript %}
{% endblock %}
+
+ $( function () {
+ // For each floating header table, start the floatingTHead.
+ var table = $('table.floating_header');
+ $.each(table,
+ function (k, e) {
+ $(e).floatThead({
+ position: 'absolute',
+ top: $('#header').height()-15,
+ })
+ }
+ );
+ });
</script>
</head>
@@ -187,9 +206,6 @@
</ul>
</li>
</ul>
-
-
-
</div>
<div>
{# Navigation Breadcrumbs #}
Modified: lnt/trunk/lnt/server/ui/templates/v4_matrix.html
URL: http://llvm.org/viewvc/llvm-project/lnt/trunk/lnt/server/ui/templates/v4_matrix.html?rev=282518&r1=282517&r2=282518&view=diff
==============================================================================
--- lnt/trunk/lnt/server/ui/templates/v4_matrix.html (original)
+++ lnt/trunk/lnt/server/ui/templates/v4_matrix.html Tue Sep 27 13:16:57 2016
@@ -43,8 +43,10 @@
{% if machine_name_common %}
<p>Machine: <a href="{{ v4_url_for('v4_machine', id=machine_id_common) }}">{{ machine_name_common }}</a></p>
{% endif %}
- <table class="table table-hover" style="width:auto">
- <tr>
+ <table class="table table-hover floating_header" style="width:auto">
+ <thead>
+ <tr>
+
<th>Order</th>
{% for r in associated_runs: %}
<th>
@@ -55,6 +57,7 @@
{% endfor %}
<th>Geomean</th>
</tr>
+ </thead>
{% for order in orders: %}
{% set baseline_class = "info" if order == baseline_rev else "" %}
<tr class="{{baseline_class}}">
@@ -71,11 +74,15 @@
</div>
<script type="text/javascript">
- $(function() {
- $(".auto_submit_item").change(function() {
- $("form").submit();
- });
- });
+ $(function() {
+ $(".auto_submit_item").change(function() {
+ $("form").submit();
+ });
+ });
+
+
+
+
</script>
{% endblock %}
Modified: lnt/trunk/lnt/server/ui/templates/v4_run.html
URL: http://llvm.org/viewvc/llvm-project/lnt/trunk/lnt/server/ui/templates/v4_run.html?rev=282518&r1=282517&r2=282518&view=diff
==============================================================================
--- lnt/trunk/lnt/server/ui/templates/v4_run.html (original)
+++ lnt/trunk/lnt/server/ui/templates/v4_run.html Tue Sep 27 13:16:57 2016
@@ -323,7 +323,7 @@ $('.profile-prev-only').tooltip();
{% for field in metric_fields %}
<section id="{{ field.name }}">
{{ utils.render_popup_begin('test_data-' + field.name, field.name, false) }}
- <table class="table table-striped table-hover table-condensed sortable">
+ <table class="table table-striped table-hover table-condensed sortable floating_header">
<thead>
<tr>
<th rowspan="1" class="sorttable_nosort"><input type="checkbox" id="select-all-{{ field.name }}" onClick="selectAll(this)"></th>
More information about the llvm-commits
mailing list