Some modernization of the UI

.gitignore

@@ -1,4 +1,7 @@
 *.pyc
+*.swp
+*.swo
+.DS_Store
 *.db
 sample_project/repos/*
 override

codespeed/static/css/main.css

@@ -1,10 +1,10 @@
 /* Global styles */
 body {
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
     min-width: 650px;
     margin: 0;
     padding: 0;
     background-color: #596A74;
-    background-image: url(../images/vgradient.png);
     background-repeat: repeat-x;
     font-size: 16px;
     margin-bottom: 0.8em;
@@ -27,12 +27,12 @@ div#title {
     margin-bottom: 0.8em;
     background-color: #F1F1F1;
     color: #000000;
-    -moz-border-radius-bottomleft: 10px;
-    -moz-border-radius-bottomright: 10px;
-    -webkit-border-bottom-left-radius: 10px;
-    -webkit-border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
+    -moz-border-radius-bottomleft: 4px;
+    -moz-border-radius-bottomright: 4px;
+    -webkit-border-bottom-left-radius: 4px;
+    -webkit-border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
 }
 div#title img { float: left; padding: 0.2em; margin: 0; }
 div#title h2 { float: left; margin: 0 0 0 0.4em; font-style: italic; margin-top: 0.55em; }
@@ -47,30 +47,28 @@ ul.inline li {
 
 ul#links {
     position: relative;
-    margin-top: 0.6em;
+    margin: 0.9em;
     float: right;
-    padding: 0.7em;
-    padding-bottom: 0.5em;
     font-size: large;
 }
 ul#links li { margin-left: 0.8em; }
-ul#links li a:link, ul#links li a:visited { color: #000000; }
+ul#links li a:link, ul#links li a:visited { color: #000000; text-decoration: underline; }
 ul#links li a:hover { text-decoration: underline; }
 
 div#wrapper { margin: 0; }
 
 div#nav ul {
     padding-left: 15.3em;
-    font-family: Verdana, sans-serif;
+    font-size: 17px;
 }
 div#nav ul li {
     background-color: #DADADA;
-    -moz-border-radius-topleft: 16px;
-    -moz-border-radius-topright: 16px;
-    -webkit-border-top-left-radius: 16px;
-    -webkit-border-top-right-radius: 16px;
-    border-top-left-radius: 16px;
-    border-top-right-radius: 16px;
+    -moz-border-radius-topleft: 4px;
+    -moz-border-radius-topright: 4px;
+    -webkit-border-top-left-radius: 4px;
+    -webkit-border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
 }
 div#nav ul li a {
     display: block;
@@ -90,9 +88,9 @@ div#nav ul li:hover a { color: #2D2F32; }
 div#workarea {
     background-color: #F1F1F1;
     padding: 0.8em;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
 }
 
 div#presentation {
@@ -109,7 +107,7 @@ div#presentation div.menubox {
     background-image: url(../images/vgradient.png);
     background-repeat: repeat-x;
     background-color: #FFFFFF;
-    color: white;
+    color: black;
     width: 220px;
     cursor: pointer;
     text-align: center;
@@ -199,7 +197,7 @@ div.about_content { text-align: left; }
 }
 .boxhead h2 {
     margin: 0;
-    padding: 0.5em 0.8em 0.3em;
+    padding: 0.5em 0.8em 0.5em;
     color: white;
     font-weight: bold;
     font-size: 1.1em;
@@ -289,6 +287,9 @@ table.reports {
     margin-bottom: 2em
 }
 
+a.feed {
+  text-decoration: underline;
+}
 /*table.reports {
     border-width: 2px;
 }*/
@@ -468,8 +469,11 @@ p.note, p.warning {
     border-radius: 10px;
 }
 p.warning {
-    padding-left: 42px;
-    background-image: url(../images/warning.png);
+    margin-left: 10px;
+}
+p.warning::before{
+    content: '⚠ ';
+    color: #f53535;
 }
 p.note {
     margin-top: 20px;
@@ -482,15 +486,17 @@ p.note {
     background-image: url(../images/note.png);
 }
 
-div.footer {
+div.footer{
+    color: white;
     font-size: small;
     margin-top: 0.6em;
     margin-left: auto; margin-right: auto;
     text-align: center;
 }
 
 div.footer a {
-    color: black;
+    color: inherit;
+    font-weight: bold;
     text-decoration: underline;
 }
 

codespeed/static/js/changes.js

@@ -72,7 +72,7 @@ function refreshContent() {
     var h = $("#content").height();//get height for loading text
     $("#contentwrap").fadeOut("fast", function() {
         $(this).show();
-        $(this).html(getLoadText("Loading...", h, true));
+        $(this).html(getLoadText("Loading...", h));
         $(this).load("table/", $.param(getConfiguration()), function() { updateTable(); });
     });
 }

codespeed/static/js/codespeed.js

@@ -9,7 +9,7 @@ function readCheckbox(el) {
     return config;
 }
 
-function getLoadText(text, h, showloader) {
+function getLoadText(text, h) {
     var loadtext = '<div style="text-align:center;">';
     var pstyle = "";
     if (h > 0) {
@@ -19,9 +19,6 @@ function getLoadText(text, h, showloader) {
         pstyle = ' style="line-height:' + h + 'px;"';
     }
     loadtext += '<p' + pstyle + '>'+ text;
-    if (showloader) {
-        loadtext += ' <img src="' + window.STATIC_URL +'images/ajax-loader.gif" align="bottom">';
-    }
     loadtext += '</p></div>';
     return loadtext;
 }

codespeed/static/js/comparison.js

@@ -337,6 +337,9 @@ function renderComparisonPlot(plotid, benchmarks, exes, enviros, baseline, chart
 
     plotoptions.legend = {show: true, location: 'ne'};
     plotoptions.series = series;
+    plotoptions.grid = {borderColor: '#9DADC6', shadow: false, drawBorder: true};
+    plotoptions.seriesDefaults.shadow = false;
+    plotoptions.axesDefaults.tickOptions = {fontFamily:'Arial'};
 
     // determine conditions for rendering the legend outside the plot area
     var offplot = false;
@@ -417,7 +420,7 @@ function init(defaults) {
 
     // Get comparison data
     var h = $("#content").height();//get height for loading text
-    $("#cplot").html(getLoadText("Loading...", h, true));
+    $("#cplot").html(getLoadText("Loading...", h));
     $.getJSON("json/", savedata);
 
     $("#permalink").click(function() {

codespeed/static/js/timeline.js

@@ -181,28 +181,35 @@ function renderPlot(data) {
   }
   var plotoptions = {
     title: {text: data.benchmark, fontSize: '1.1em'},
+    grid: {borderColor: '#9DADC6', shadow: false, drawBorder: true},
     series: series,
+    axesDefaults: {
+      tickOptions: {
+        fontFamily: 'Arial'
+      }
+    },
     axes:{
       yaxis:{
         label: data.units + data.lessisbetter,
         labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-        min: 0, autoscale:true,
-        tickOptions:{formatString:'%.' + digits + 'f'}
+        min: 0,
+        autoscale: true,
+        tickOptions: {formatString:'%.' + digits + 'f'}
       },
       xaxis:{
         renderer: (shouldPlotEquidistant()) ? $.jqplot.CategoryAxisRenderer : $.jqplot.DateAxisRenderer,
         label: 'Commit date',
         labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
-        tickOptions:{formatString:'%b %d'},
+        tickOptions: {formatString:'%b %d'},
         pad: 1.01,
-        autoscale:true,
-        rendererOptions:{sortMergedLabels:true} /* only relevant when
-                                $.jqplot.CategoryAxisRenderer is used */ 
+        autoscale: true,
+        rendererOptions: {sortMergedLabels:true} /* only relevant when
+                                $.jqplot.CategoryAxisRenderer is used */
       }
     },
     legend: {show: true, location: 'nw'},
     highlighter: getHighlighterConfig(median),
-    cursor:{show:true, zoom:true, showTooltip:false, clickReset:true}
+    cursor: {show:true, zoom:true, showTooltip:false, clickReset:true}
   };
   if (series.length > 4 + hiddenSeries) {
       // Move legend outside plot area to unclutter
@@ -246,7 +253,12 @@ function renderMiniplot(plotid, data) {
 
   var plotoptions = {
     title: {text: data.benchmark, fontSize: '1.1em'},
-    seriesDefaults: {lineWidth: 2, markerOptions:{style:'circle', size: 6}},
+    grid: {borderColor: '#9DADC6', shadow: false, drawBorder: true},
+    seriesDefaults: {
+      shadow: false,
+      lineWidth: 2,
+      markerOptions: {style:'circle', size: 6}
+    },
     series: series,
     axes: {
       yaxis: {
@@ -272,14 +284,14 @@ function render(data) {
   $("#plotgrid").html("");
   if(data.error !== "None") {
     var h = $("#content").height();//get height for error message
-    $("#plotgrid").html(getLoadText(data.error, h, false));
+    $("#plotgrid").html(getLoadText(data.error, h));
     return 1;
   } else if ($("input[name='benchmark']:checked").val() === "show_none") {
     var h = $("#content").height();//get height for error message
-    $("#plotgrid").html(getLoadText("Please select a benchmark on the left", h, false));
+    $("#plotgrid").html(getLoadText("Please select a benchmark on the left", h));
   } else if (data.timelines.length === 0) {
     var h = $("#content").height();//get height for error message
-    $("#plotgrid").html(getLoadText("No data available", h, false));
+    $("#plotgrid").html(getLoadText("No data available", h));
   } else if ($("input[name='benchmark']:checked").val() === "grid"){
     //Render Grid of plots
     $("#revisions").attr("disabled",true);
@@ -304,7 +316,7 @@ function render(data) {
 function refreshContent() {
   var h = $("#content").height();//get height for loading text
   $("#plotgrid").fadeOut("fast", function() {
-    $("#plotgrid").html(getLoadText("Loading...", h, true)).show();
+    $("#plotgrid").html(getLoadText("Loading...", h)).show();
     $.getJSON("json/", getConfiguration(), render);
   });
 }

codespeed/templates/codespeed/base.html

@@ -1,11 +1,11 @@
 {% load url from future %}
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
   <head>
     <title>{% block title %}MyProject's Speed Center{% endblock %}</title>
     <meta name="description" content="A performance analysis tool for software projects. It shows performance regresions and allows comparing different applications or implementations">
     <meta name="keywords" content="performance, test, plots, charts">
-    <meta http-equiv="content-type" content="text/html;charset=utf-8">
+    <meta charset="UTF-8">
     <link href="{{ STATIC_URL }}css/main.css" rel="stylesheet" type="text/css">
     {% block extra_head %}{% endblock %}
   </head>
@@ -22,7 +22,7 @@
           <h2>{% block page_title %}SPEED CENTER{% endblock page_title %}</h2>
           {% block top_nav %}
             <ul id="links" class="inline">
-              <li><a href="/">&#187;Home</a></li><li><a href="../about/">&#187;About</a></li>
+              <li><a href="/">Home</a></li><li><a href="../about/">About</a></li>
             </ul>
           {% endblock top_nav %}
         {% endblock page_header %}

codespeed/templates/codespeed/changes_data.html

@@ -33,7 +33,7 @@
       </tr>
     </thead>
     <tbody class="commits" data-commitid="{{ rev.id }}">
-      <tr><td colspan="2" style="text-align:center;">Loading... <img src="{{ STATIC_URL}}images/ajax-loader.gif" align="bottom"></td></tr>
+      <tr><td colspan="2" style="text-align:center;">Loading...</td></tr>
     </tbody>
     <script type="text/javascript">
       var el = $("tbody.commits");

codespeed/templates/codespeed/reports.html

@@ -1,6 +1,8 @@
 {% if reports|length %}
 <table class="reports">
-    <caption>Latest Results <a href="feeds/latest/"><img src="{{ STATIC_URL }}images/rss.png" alt="RSS feed" title="Subscribe to the results RSS feed" /></a></caption>
+    <caption>Latest Results
+      (<a class="feed" href="feeds/latest/">rss</a>)
+    </caption>
     <tbody>
     {% for report in reports %}  <tr class="status-{{ report.colorcode }}">
         <td><label title="lessisbetter" style="display:none;">{{ report.get_absolute_url }}</label>{{ report.revision }}</td><td>{{ report.executable }}@{{ report.environment}}</td>
@@ -12,7 +14,9 @@
 
 {% if significant_reports|length %}
 <table class="reports">
-    <caption>Latest Significant Results <a href="feeds/latest_significant/"><img src="{{ STATIC_URL }}images/rss.png" alt="RSS feed" title="Subscribe to the significant results RSS feed" /></a></caption>
+    <caption>Latest Significant Results
+      (<a class="feed" href="feeds/latest_significant/">rss</a>)
+    </caption>
     <tbody>
     {% for report in significant_reports %}  <tr class="status-{{ report.colorcode }}">
         <td><label title="lessisbetter" style="display:none;">{{ report.get_absolute_url }}</label>{{ report.revision }}</td><td>{{ report.executable }}@{{ report.environment}}</td>

sample_project/templates/home.html

@@ -53,7 +53,7 @@ <h2>Comparison</h2>
     }
 
     $(function() {
-        $("#reports").html(getLoadText("Loading...", 0, true))
+        $("#reports").html(getLoadText("Loading...", 0))
             .load("{% url "reports" %}", function(responseText) { updateTable(); });
   });
 </script>