Replaced table footers with buttons and fixed zebra coloring (#28).

Apart from the aforementioned changes, some slight improvements were
also done to the styling of the table.

The buttons utilize a check mark symbol instead of modifying the
button text upon selection.
This commit is contained in:
Adam Waldenberg 2015-11-14 00:25:56 +01:00
parent c90ac5a7ef
commit 937ac44e8a
3 changed files with 58 additions and 19 deletions

View file

@ -64,22 +64,17 @@
$(this).append("<strong> &#x25bc;</strong>");
}});
$("table#changes tfoot tr td:first-child, table#blame tfoot tr td:first-child").filter(function() {{
this.hiddenCount = $(this).parent().parent().parent().find("tbody tr:hidden").length;
$("table#changes, table#blame").parent().find("button").filter(function() {{
this.hiddenCount = $(this).parent().find("tbody tr:hidden").length;
return this.hiddenCount > 0;
}}).each(function() {{
$(this).addClass("hoverable");
this.innerHTML = "{show_minor_authors} (" + this.hiddenCount + ") &#x25bc;";
}}).click(function() {{
this.clicked = !this.clicked;
if (this.clicked) {{
this.innerHTML = "{hide_minor_authors} (" + this.hiddenCount + ") &#x25b2;";
$(this).parent().parent().parent().find("tbody tr:empty").remove();
$(this).parent().parent().parent().find("tbody tr").show();
$(this).parent().find("tbody tr:empty").remove();
$(this).parent().find("tbody tr").show();
}} else {{
this.innerHTML = "{show_minor_authors} (" + this.hiddenCount + ") &#x25bc;";
$(this).parent().parent().parent().find("tbody tr td:last-child").filter(function() {{
$(this).parent().find("tbody tr td:last-child").filter(function() {{
return parseFloat(this.innerHTML) < MINOR_AUTHOR_PERCENTAGE;
}}).parent().each(function() {{
$(this).after("<tr></tr>").hide();
@ -207,6 +202,9 @@
box-shadow: 1px 1px 3px #666;
-moz-box-shadow: 1px 1px 3px #666;
}}
div.box div {{
text-align: center;
}}
div.logo p {{
margin: 0;
padding: 15px 0 0 0;
@ -218,13 +216,20 @@
table {{
font-size: small;
}}
table.table > tbody > tr > td {{
border: 1px solid #e8e8e8;
}}
table.table > thead > tr > th, table.table > tbody > tr > td {{
border: 1px solid #efefef;
vertical-align: middle;
padding: 6px;
padding: 8px 0px 8px 12px;
}}
thead tr th.header {{
background-color: #e7b7a5;
border-width: 0px;
}}
thead tr th:hover {{
color: #fff;
background-color: #b78775;
}}
th:first-child {{
@ -252,6 +257,32 @@
hr {{
border: 3px solid #e7e7e7;
}}
button.btn.btn-primary {{
font-weight: bold;
color: rgb(51, 51, 51);
background-color: #e7b7a5;
border-color: #e2b2a0;
margin-bottom: 20px;
padding: 10px 25px 10px 15px;
text-align: center;
}}
button.btn.btn-primary:hover {{
color: #fff;
background-color: #b78775;
border-color: #a77765;
}}
button.btn.btn-primary.active {{
color: #fff;
background-color: #b78775;
border-color: #b28270;
}}
button.btn span {{
color: transparent;
}}
button.btn.active span {{
color: white;
}}
/*body > div {{
width: 100%;
display: inline-block;

View file

@ -41,7 +41,12 @@ class BlameOutput(Outputable):
def output_html(self):
blame_xml = "<div><div class=\"box\">"
blame_xml += "<h1>" + _(BLAME_INFO_TEXT) + "</h1><hr /><div><table id=\"blame\" class=\"table table-striped\">"
blame_xml += "<h1>" + _(BLAME_INFO_TEXT) + "</h1><hr /><div>"
blame_xml += "<button type=\"button\" class=\"btn btn-primary\""
blame_xml += " data-toggle=\"button\" aria-pressed=\"false\" autocomplete=\"off\">"
blame_xml += " <span>&#x2713;</span> " + _("Show minor authors")
blame_xml += "</button>"
blame_xml += "<table id=\"blame\" class=\"table table-striped\">"
blame_xml += "<thead><tr> <th>{0}</th> <th>{1}</th> <th>{2}</th> <th>{3}</th> <th>{4}</th> </tr></thead>".format(
_("Author"), _("Rows"), _("Stability"), _("Age"), _("% in comments"))
blame_xml += "<tbody>"
@ -72,8 +77,7 @@ class BlameOutput(Outputable):
if blames[-1] != entry:
chart_data += ", "
blame_xml += "<tfoot><tr> <td colspan=\"5\">&nbsp;</td> </tr></tfoot></tbody></table>"
blame_xml += "<div class=\"chart\" id=\"blame_chart\"></div></div>"
blame_xml += "</tbody></table><div class=\"chart\" id=\"blame_chart\"></div></div>"
blame_xml += "<script type=\"text/javascript\">"
blame_xml += " blame_plot = $.plot($(\"#blame_chart\"), [{0}], {{".format(chart_data)
blame_xml += " series: {"

View file

@ -44,7 +44,12 @@ class ChangesOutput(Outputable):
total_changes += authorinfo_list.get(i).deletions
if authorinfo_list:
changes_xml += "<h1>" + _(HISTORICAL_INFO_TEXT) + "</h1><hr /><div><table id=\"changes\" class=\"table table-striped\">"
changes_xml += "<h1>" + _(HISTORICAL_INFO_TEXT) + "</h1><hr /><div>"
changes_xml += "<button type=\"button\" class=\"btn btn-primary\""
changes_xml += " data-toggle=\"button\" aria-pressed=\"false\" autocomplete=\"off\">"
changes_xml += " <span>&#x2713;</span> " + _("Show minor authors")
changes_xml += "</button>"
changes_xml += "<table id=\"changes\" class=\"table table-striped\">"
changes_xml += "<thead><tr> <th>{0}</th> <th>{1}</th> <th>{2}</th> <th>{3}</th> <th>{4}</th>".format(
_("Author"), _("Commits"), _("Insertions"), _("Deletions"), _("% of changes"))
changes_xml += "</tr></thead><tbody>"
@ -52,13 +57,12 @@ class ChangesOutput(Outputable):
for i, entry in enumerate(sorted(authorinfo_list)):
authorinfo = authorinfo_list.get(entry)
percentage = 0 if total_changes == 0 else (authorinfo.insertions + authorinfo.deletions) / total_changes * 100
changes_xml += "<tr>"
if format.get_selected() == "html":
changes_xml += "<td><img src=\"{0}\"/>{1}</td>".format(
changes_xml += "<tr><td><img src=\"{0}\"/>{1}</td>".format(
gravatar.get_url(self.changes.get_latest_email_by_author(entry)), entry)
else:
changes_xml += "<td>" + entry + "</td>"
changes_xml += "<tr><td>" + entry + "</td>"
changes_xml += "<td>" + str(authorinfo.commits) + "</td>"
changes_xml += "<td>" + str(authorinfo.insertions) + "</td>"