x/tuskar-ui
Code Issues Proposed changes

Replacing the caption tag in data tables.

Browse Source 
Using a new row in the thead instead now. This is
due to a WebKit bug where the caption element's
size cannot be correctly calculated on tables with
borders.

Fixes Bug #965603

Change-Id: I08962c850061860ed0bd749deb389205c5b731fe
This commit is contained in:
John Postlethwait 2012-03-26 14:38:13 -07:00
parent 6f0a8cc6c3
commit 4653061403
3 changed files with 51 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
horizon/templates/horizon/common/_data_table.html
View File

@ -3,11 +3,13 @@
<form action="{{ table.get_absolute_url }}" method="POST">{% csrf_token %}
{% with columns=table.get_columns rows=table.get_rows %}
<table id="{{ table.name }}" class="table table-bordered table-striped">
<caption class='table_header'>
<h3 class='table_title'>{{ table }}</h3>
{{ table.render_table_actions }}
</caption>
<thead>
<tr class='table_caption'>
<th class='table_header' colspan='{{ columns|length }}'>
<h3 class='table_title'>{{ table }}</h3>
{{ table.render_table_actions }}
</th>
</tr>
<tr>
{% for column in columns %}
<th {{ column.attr_string|safe }}>{{ column }}</th>

2
horizon/tests/table_tests.py
View File

@ -391,7 +391,7 @@ class DataTableTests(test.TestCase):
# Whole table
resp = http.HttpResponse(self.table.render())
self.assertContains(resp, '<table id="my_table"', 1)
self.assertContains(resp, '<th ', 7)
self.assertContains(resp, '<th ', 8)
self.assertContains(resp, 'id="my_table__row__1"', 1)
self.assertContains(resp, 'id="my_table__row__2"', 1)
self.assertContains(resp, 'id="my_table__row__3"', 1)

46
openstack_dashboard/static/dashboard/css/style.css
View File

@ -305,11 +305,54 @@ a.current_item:hover h3, a.current_item:hover h4 {
padding: 0 0 0 1px;
}
.table-bordered {
border: none;
}
.table_header {
min-height: 35px;
padding: 5px 0;
}
.table_caption th {
background-color: transparent;
border: none;
}
.table-bordered tr.table_caption + tr th {
border-top: 1px solid #ddd;
}
.table-bordered tr.table_caption + tr th:first-child,
.table-bordered tr.table_caption + tr th.hide + th {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
border-left: 1px solid #ddd;
}
.table-bordered tr.table_caption + tr th:last-child {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
border-right: 1px solid #ddd;
}
.table-bordered tbody tr td:first-child,
.table-bordered tfoot tr td:first-child {
border-left: 1px solid #ddd;
}
.table-bordered tbody tr td:last-child,
.table-bordered tfoot tr td:last-child {
border-right: 1px solid #ddd;
}
.table-bordered tfoot tr td:first-child {
border-bottom: 1px solid #ddd;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.table-bordered tfoot tr td:last-child {
border-bottom: 1px solid #ddd;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.table_title h3, .table_header h3 {
font-family: anivers;
font-weight: normal;
@ -317,7 +360,6 @@ a.current_item:hover h3, a.current_item:hover h4 {
margin-bottom: 5px;
float: left;
}
th {
background: #f1f1f1;
}