[pypy-svn] r71257 - in codespeed/pyspeed: media/css media/js templates
tobami at codespeak.net
tobami at codespeak.net
Tue Feb 16 17:01:10 CET 2010
Author: tobami
Date: Tue Feb 16 17:01:08 2010
New Revision: 71257
Modified:
codespeed/pyspeed/media/css/main2.css
codespeed/pyspeed/media/js/codespeed.js
codespeed/pyspeed/templates/base.html
codespeed/pyspeed/templates/overview.html
codespeed/pyspeed/templates/result_list.html
Log:
improved design
Modified: codespeed/pyspeed/media/css/main2.css
==============================================================================
--- codespeed/pyspeed/media/css/main2.css (original)
+++ codespeed/pyspeed/media/css/main2.css Tue Feb 16 17:01:08 2010
@@ -14,15 +14,19 @@
}
div#title img { float: left; }
div#title h1 { float: left; margin-top: 23px; }
-/* div#navigation { float: right; color: #222222; } */
-div#subnavigation { width: 100%; float: left; margin-bottom: 0.8em; }
+
+div#navigation { width: 100%; float: left; margin-bottom: 0.8em; }
div#tabs { width: 100%; color: #FFFFFF; }
-div#tabs ul { margin: 0; padding: 0; padding-left: 2em; font-weight: bold; }
+div#tabs ul { margin: 0; padding: 0; padding-left: 2em; }
div#tabs li {
display: inline-block;
+ margin-left: 0.5em;
+}
+div#tabs ul li a:link, div#tabs ul li a:visited {
+ display: block;
+ text-decoration: none;
background-color: #F5F5F5;
color: #888888;
- margin-left: 0.8em;
padding: 1em;
padding-top: 0.6em;
padding-bottom: 0.3em;
@@ -31,10 +35,13 @@
-webkit-border-radius-topleft: 20px;
-webkit-border-radius-topright: 20px;
}
-div#tabs li.current { background-color: #E5E5E5; color: #000000;}
-div#tabs li.highlight { background-color: #E5E5E5; color: #2D2F32;}
+div#tabs ul li a.current {
+ background-color: #E5E5E5;
+ color: #000000;
+ font-weight: bold;
+}
+div#tabs ul li a:hover { background-color: #E5E5E5; color: #2D2F32; }
-div#wrapper { width: 100%; margin-top: 0; float:left; }
div#configbar {
width: 97.8%;
position: relative;
@@ -43,6 +50,9 @@
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
+
+div#wrapper { width: 100%; margin-top: 0; float:left; }
+
div#navbar {
float: left;
margin-right: 20px;
@@ -84,7 +94,7 @@
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
-/* text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */ */
+/* text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
/* background: url(sbbody-l.gif) no-repeat bottom left; */
@@ -104,6 +114,8 @@
}
/* tables */
+table#results thead tr th { width: 7em; }
+
table.tablesorter {
width: 60em;
font-family:arial;
@@ -121,7 +133,6 @@
border: 1px solid #CDCDCD;
font-size: 8pt;
padding: 4px;
- width: 7em;
}
table.tablesorter thead tr .header {
background-image: url(/media/images/bg.gif);
@@ -152,9 +163,9 @@
table.tablesorter tbody td.text {text-align: left;}
-table.tablesorter thead th.value {width: 450px;}
-table.tablesorter tbody td.value {
- background-image: url(/media/images/gridline.gif);
+table.tablesorter thead th.bar { width: 440px !important; }
+table.tablesorter tbody td.bar {
+ background-image: url(/media/images/gridline.png);
background-repeat: repeat-x;
background-position: left top;
text-align: left;
@@ -162,15 +173,27 @@
border: none;
background-color:transparent;
}
-td.value img {
+table.tablesorter tbody td.bar img {
vertical-align: middle;
margin: 5px 5px 5px 0;
border: none;
}
+table.tablesorter tbody span {
+ display: block;
+/* top: 10px; */
+/* left: 0; */
+ height: 1.45em;
+ margin-top: 0.2em;
+ background: #5AA1D3;
+ text-indent: -9999px;
+ overflow: hidden;
+/* background-color: #FF4141; margin-bottom: 0.1em; */
+}
+
table.tablesorter tbody tr td.status-red { background-color: #FF4141; }
table.tablesorter tbody tr td.status-green { background-color: #B7FFB8; }
-table.tablesorter tbody tr td.status-yellow { background-color: yellow; }
+table.tablesorter tbody tr td.status-yellow { background-color: #FEE772; }
table.tablesorter tbody tr.highlight td {
background-color: #9DADC6 !important;
cursor: pointer;
@@ -185,5 +208,3 @@
clear: both;
height: 0;
}
-* html .clearfix { zoom: 1; } /* IE6 */
-*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Modified: codespeed/pyspeed/media/js/codespeed.js
==============================================================================
--- codespeed/pyspeed/media/js/codespeed.js (original)
+++ codespeed/pyspeed/media/js/codespeed.js Tue Feb 16 17:01:08 2010
@@ -1,7 +1,7 @@
-$(function() {
- $("#subnavigation ul li").hover(function() {
- $(this).addClass('highlight');
- }, function() {
- $(this).removeClass('highlight');
- });
-});
\ No newline at end of file
+// $(function() {
+// $("#navigation ul li").hover(function() {
+// $(this).addClass('highlight');
+// }, function() {
+// $(this).removeClass('highlight');
+// });
+// });
\ No newline at end of file
Modified: codespeed/pyspeed/templates/base.html
==============================================================================
--- codespeed/pyspeed/templates/base.html (original)
+++ codespeed/pyspeed/templates/base.html Tue Feb 16 17:01:08 2010
@@ -6,7 +6,7 @@
<link href="/media/css/main2.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
+ <script type="text/javascript" src="/media/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/media/js/codespeed.js"></script>
{% block script %}
{% endblock %}
@@ -19,9 +19,19 @@
</div>
<div id="wrapper">
-{% block subnavigation %}<div id="subnavigation"></div>{% endblock %}
+<div id="navigation">
+{% block navigation %}
+ <div id="tabs">
+ <ul>
+ <li><a href="/overview/">Overview</a></li>
+ <li><a href="#">Timeline</a></li>
+ <li><a href="/results/">Results</a></li>
+ </ul>
+ </div>
+ <div id="configbar">Start page</div>{% endblock %}
+</div>
+
{% block body %}
-<p>Start page</p>
{% endblock %}
</div>
{% block footer %}
Modified: codespeed/pyspeed/templates/overview.html
==============================================================================
--- codespeed/pyspeed/templates/overview.html (original)
+++ codespeed/pyspeed/templates/overview.html Tue Feb 16 17:01:08 2010
@@ -3,6 +3,7 @@
<script type="text/javascript" src="/media/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(function() {
+ var tdwidth = parseInt($("#results thead tr").find("th:eq(5)").css("width"));
$("#results > tbody > tr").each(function() {
//Color change column
var change = $(this).children("td:eq(2)").text().slice(0, -1);
@@ -18,30 +19,39 @@
else if(comp > 1.2) { colorcode = "status-green"; }
$(this).children("td:eq(4)").addClass(colorcode);
//Size bars according to comparison value
- comp = comp*13.2;
- if (comp > 100) {comp = 100;}
- $(this).children("td:eq(5)").find("img").width(comp + "%");
- });
- $.tablesorter.defaults.sortList = [[4,0]];
- $.tablesorter.defaults.headers = { 5: { sorter: false } };
- $("#results").tablesorter({widgets: ['zebra']});
- $("#results tbody td").hover(function() {
- $(this).parents('tr').addClass('highlight');
- }, function() {
- $(this).parents('tr').removeClass('highlight');
- });
+ comp = comp*58;
+ if (comp > tdwidth) {
+ comp = "100%";
+ } else { comp = comp + "px"; }
+/* $(this).children("td:eq(5)").find("img").width(comp);*/
+ $(this).children("td:eq(5)").find("span").css("width", comp);
+ });
+ //sort by default by the 5th column
+ $.tablesorter.defaults.sortList = [[4,0]];
+ //disable sorting for graphs
+ $.tablesorter.defaults.headers = { 5: { sorter: false } };
+ $("#results").tablesorter({widgets: ['zebra']});
+ $("#results tbody td").hover(function() {
+ $(this).parents('tr').addClass('highlight');
+ }, function() {
+ $(this).parents('tr').removeClass('highlight');
+ });
});
</script>
{% endblock %}
-{% block subnavigation %}
-<div id="subnavigation">
- <div id="tabs"><ul><li class="current">Overview</li><li>Timeline</li></ul></div>
+{% block navigation %}
+ <div id="tabs">
+ <ul>
+ <li><a href="#" class="current">Overview</a></li>
+ <li><a href="#">Timeline</a></li>
+ <li><a href="/results/">Results</a></li>
+ </ul>
+ </div>
<div id="configbar">revision:</div>
-</div>
{% endblock %}
-{% block body %}
+{% block body %}
<div id="navbar">
<div id="interpreter" class="sidebox">
<div class="boxhead"><h2>Interpreter</h2></div>
@@ -74,12 +84,13 @@
<table id="results" class="tablesorter">
<thead>
<tr>
- <th>Benchmark</th><th>Result (s)</th><th>Current change</th><th>Trend</th><th>Relative to cpython</th><th class="value"></th>
+ <th>Benchmark</th><th>Result (s)</th><th>Current change</th><th>Trend</th><th>Relative to cpython</th><th class="bar"></th>
</tr>
</thead>
<tbody>
{% for row in table_list %} <tr>
- <td class="text">{{ row.benchmark }}</td><td>{{ row.result|floatformat:3 }}</td><td>{{ row.change|floatformat:2 }}%</td><td>{{ row.trend|floatformat:2 }}%</td><td>{{ row.relative|floatformat:2 }}x</td><td class="value"><img src="/media/images/bar.png" alt="" width="{% widthratio row.relative 8.1 100 %}%" height="16" /></td>
+ <td class="text">{{ row.benchmark }}</td><td>{{ row.result|floatformat:3 }}</td><td>{{ row.change|floatformat:2 }}%</td><td>{{ row.trend|floatformat:2 }}%</td><td>{{ row.relative|floatformat:2 }}x</td><td class="bar"><span>1</span></td>
+<!-- <img src="/media/images/bar.png" alt="" height="16" width="34" /> -->
</tr>{% endfor %}
</tbody>
</table>
Modified: codespeed/pyspeed/templates/result_list.html
==============================================================================
--- codespeed/pyspeed/templates/result_list.html (original)
+++ codespeed/pyspeed/templates/result_list.html Tue Feb 16 17:01:08 2010
@@ -3,40 +3,38 @@
<script type="text/javascript" src="/media/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(function() {
- $("#results > tbody > tr").each(function() {
- //Color change column
-// var change = $(this).children("td:eq(2)").text().slice(0, -1);
-// var colorcode = "status-yellow";
-// if(change > 0.3) { colorcode = "status-red"; }
-// else if(change < -0.3) { colorcode = "status-green"; }
-// $(this).children("td:eq(2)").addClass(colorcode);
-// //Color comparison column
-// var comp = $(this).children("td:eq(4)").text().slice(0, -1);
-// // $(this).children("td:eq(4)").text(comp + "x");
-// colorcode = "status-yellow";
-// if(comp < 0.8) { colorcode = "status-red"; }
-// else if(comp > 1.2) { colorcode = "status-green"; }
-// $(this).children("td:eq(4)").addClass(colorcode);
-// //Size bars according to comparison value
-// comp = comp*13.2;
-// if (comp > 100) {comp = 100;}
-// $(this).children("td:eq(5)").find("img").width(comp + "%");
-// });
-// $.tablesorter.defaults.sortList = [[4,0]];
-// $.tablesorter.defaults.headers = { 5: { sorter: false } };
- $("#results").tablesorter({widgets: ['zebra']});
- $("#results tbody td").hover(function() {
+ $("#result_list").tablesorter({widgets: ['zebra']});
+ $("#result_list tbody td").hover(function() {
$(this).parents('tr').addClass('highlight');
}, function() {
$(this).parents('tr').removeClass('highlight');
});
});
</script>
+{% endblock %}
+
+{% block navigation %}
+ <div id="tabs">
+ <ul>
+ <li><a href="/overview/">Overview</a></li>
+ <li><a href="#">Timeline</a></li>
+ <li><a href="#" class="current">Results</a></li>
+ </ul>
+ </div>
+ <div id="configbar">List of test results. Filter: none.</div>
+{% endblock %}
+
{% block body %}
-<table id="results"><tr><th>Revision</th><th>Interpreter</th><th>Compile options</th><th>Benchmark</th><th>Result</th><th>run date</th></tr>
-{% for result in result_list %}<tr>
-<td>{{ result.revision.number }}</td><td>{{ result.interpreter.name }}</td><td>{{ result.interpreter.coptions }}</td><td>{{ result.benchmark }}</td><td>{{ result.value }}</td><td>{{ result.date }}</td>
-</tr>{% endfor %}
+<table id="result_list" class="tablesorter">
+ <thead>
+ <tr><th>Revision</th><th>Interpreter</th><th>Compile options</th><th>Benchmark</th><th>Result</th><th>run date</th></tr>
+ </thead>
+ <tbody>
+{% for result in result_list %} <tr>
+ <td>{{ result.revision.number }}</td><td>{{ result.interpreter.name }}</td><td>{{ result.interpreter.coptions }}</td><td>{{ result.benchmark }}</td><td>{{ result.value }}</td><td>{{ result.date }}</td>
+ </tr>
+{% endfor %}
+ </tbody>
</table>
{% endblock %}
{% block footer %}
More information about the Pypy-commit
mailing list