<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<title>statusz</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
*:focus { outline: none; }
body {
text-align: center;
background-color: #ddd;
color: #555;
font: 16px Arial, "Helvetica Neue", Helvetica, sans-serif;
}
h1 {
font-size: 40px;
font-weight: normal;
text-align: center;
margin: 20px 0;
}
#wrapper {
background-color: #f8f8f8;
width: 650px;
margin: 20px auto;
border: 3px dashed #555;
padding: 10px 20px;
}
#fields {
width: 100%;
border-collapse: collapse;
}
#fields tr {
height: 20px;
border-bottom: 1px solid transparent
}
#fields tr:hover { border-bottom-color: #555; }
#fields td { padding: 4px; }
#fields td:first-child {
text-align: left;
font-weight: bold;
}
#fields td:last-child {
text-align: right;
font: 14px Consolas, "Lucida Console", Monaco, monospace;
}
#all_commits { display: none; }
#commit_search { margin: 20px auto; }
#commit_search td:first-child {
padding-right: 10px;
text-align: left;
font-weight: bold;
}
#commit_search tr:last-child {
vertical-align: top;
display: none;
}
#commit_search tr:last-child > td { padding-top: 5px; }
#commit_search input {
font: 14px Consolas, "Lucida Console", Monaco, monospace;
border: 1px solid #555;
padding: 2px;
background-color: transparent;
}
#search_results {
padding-left: 4px;
text-align: left;
}
#search_results > .sha { font: 14px/20px Consolas, "Lucida Console", Monaco, monospace; }
</style>
<script type="text/javascript">
function commitSearch(field, e) {
var text = $(field).val();
var $resultsContainer = $("#search_results");
$resultsContainer.empty();
if (text == "") {
$("#commit_search tr:last-child").hide();
return;
}
if (!/^[a-f0-9]{0,40}$/.test(text)) {
$resultsContainer.text("No match.");
$("#commit_search tr:last-child").show();
return;
}
var matches = [];
for (var i = 0; i < allCommits.length; i++) {
var sha = allCommits[i];
if (sha.indexOf(text) == 0) {
matches.push(sha);
}
}
if (matches.length == 0) {
$resultsContainer.text("No match.");
$("#commit_search tr:last-child").show();
return;
} else {
for (var i = 0; i < matches.length; i++) {
if (i >= 10) {
$resultsContainer.append("<div>… (" + (matches.length - 10) + " more hidden results)</div>");
break;
}
$resultsContainer.append("<div class='sha'>" + matches[i] + "</div>");
}
$("#commit_search tr:last-child").show();
}
}
</script>
</head>
<body>
<div id="wrapper">
<h1>statusz</h1>
<table id="fields">
<% commit_search = false %>
<% html_values.each do |field, value| %>
<% if field == "all commits" %>
<% commit_search = true %>
<% next %>
<% end %>
<tr>
<td><%= field %></td>
<td><%= value %></td>
</tr>
<% end %>
</table>
<% if html_values["all commits"] %>
<script type="text/javascript">
allCommits = [<%= html_values["all commits"].map { |sha| %Q{"#{sha}"} }.join(",") %>]
</script>
<table id="commit_search">
<tr>
<td>search for a commit:</td>
<td>
<input name="sha" onkeyup="commitSearch(this, event);" size="40" type="text" value="" />
</td>
</tr>
<tr>
<td>matches:</td>
<td id="search_results"></td>
</tr>
</table>
<% end %>
</div>
</body>
</html>