Add graphical diffstat to commit view

The diffstat is calculated against the leftmost parent of the commit. This
gives nice information for "normal" merges while octopus merges are less
than optimal, so the diffstat isn't calculated for those merges.

Signed-off-by: Lars Hjemli <hjemli@gmail.com>

1 files changed, 28 insertions, 2 deletions

diff --git a/cgit.css b/cgit.css
index cded981..b736b19 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,296 +1,322 @@
 body {
         font-family: arial;
         font-size: 11pt;
         background: white;
 }
 
 body, table {
         padding: 0em;
         margin: 0em;
 }
 
 table {
       border-collapse: collapse;
 }
 
 h2 {
         font-size: 120%;
         font-weight: bold;
         margin-top: 0em;
         margin-bottom: 0.25em;
 }
 
 h3 {
         margin-top: 0em;
         font-size: 100%;
         font-weight: normal;
 }
 
+h4 {
+        margin-top: 1.5em;
+        margin-bottom: 0.1em;
+        font-size: 100%;
+        font-weight: bold;
+}
+
 a {
         color: blue;
         text-decoration: none;
 }
 
 a:hover {
         text-decoration: underline;
 }
 
 table.list {
         border: none;
         border-collapse: collapse;
 }
 
 table.list tr {
         background: white;
 }
 
 table.list tr:hover {
         background: #eee;
 }
 
 table.list tr.nohover:hover {
         background: white;
 }
 
 table.list th {
         font-weight: normal;
         border-bottom: solid 1px #777;
         padding: 0.1em 0.5em 0.1em 0.5em;
         vertical-align: baseline;
 }
 
 table.list td {
         border: none;
         padding: 0.1em 0.5em 0.1em 0.5em;
 }
 
 img {
         border: none;
 }
 
 table#layout {
         width: 100%;
         border-collapse: collapse;
         margin: 0px;
 }
 
 td#header, td#logo {
         color: #666;
         background-color: #ddd;
         border-bottom: solid 1px #000;
 }
 
 td#header {
         font-size: 150%;
         font-weight: bold;
         padding: 0.2em 0.5em;
         vertical-align: text-bottom;
 }
 
 td#logo {
         text-align: right;
         vertical-align: middle;
         padding-right: 0.5em;
 }
 
 td#crumb, td#search {
         color: #ccc;
         border-top: solid 3px #555;
         background-color: #666;
         border-bottom: solid 1px #333;
         padding: 2px 1em;
 }
 
 td#crumb {
         font-weight: bold;
 }
 
 td#crumb a {
         color: #ccc;
 }
 
 td#crumb a:hover {
         color: #eee;
 }
 
 td#search {
         text-align: right;
         vertical-align: center;
         padding-right: 0.5em;
 }
 
 td#search form {
         margin: 0px;
         padding: 0px;
 }
 
 td#search input {
         font-size: 9pt;
         padding: 0px;
         width: 10em;
         border: solid 1px #333;
         color: #333;
         background-color: #fff;
 }
 
 td#summary {
         vertical-align: top;
         padding-bottom: 1em;
 }
 
 td#archivelist {
         padding-bottom: 1em;
 }
 
 td#archivelist table {
         float: right;
         border-collapse: collapse;
         border: solid 1px #777;
 }
 
 td#archivelist table th {
         background-color: #ccc;
 }
 
 td#content {
         padding: 1em 0.5em;
 }
 
 div#blob {
         border: solid 1px black;
 }
 
 div.error {
         color: red;
         font-weight: bold;
         margin: 1em 2em;
 }
 
 td.ls-blob, td.ls-dir, td.ls-mod {
         font-family: monospace;
 }
 
 div.ls-dir a {
         font-weight: bold;
 }
 
 th.filesize, td.filesize {
         text-align: right;
 }
 
 td.filesize {
         font-family: monospace;
 }
 
 td.filemode {
         font-family: monospace;
 }
 
 td.blob {
         white-space: pre;
         font-family: monospace;
         background-color: white;
 }
 
 table.nowrap td {
         white-space: nowrap;
 }
 
 table.commit-info {
         border-collapse: collapse;
         margin-top: 1.5em;
 }
 
 table.commit-info th {
         text-align: left;
         font-weight: normal;
         padding: 0.1em 1em 0.1em 0.1em;
 }
 
 table.commit-info td {
         font-weight: normal;
         padding: 0.1em 1em 0.1em 0.1em;
 }
 
 div.commit-subject {
         font-weight: bold;
         font-size: 125%;
         margin: 1.5em 0em 0.5em 0em;
         padding: 0em;
 }
 
 div.commit-msg {
         white-space: pre;
         font-family: monospace;
 }
 
 table.diffstat {
         border-collapse: collapse;
         margin-top: 1.5em;
+        width: 100%;
+        border: solid 1px #aaa;
+}
+
+table.diffstat tr:hover {
+        background-color: #eee;
 }
 
 table.diffstat th {
         font-weight: normal;
         text-align: left;
         text-decoration: underline;
         padding: 0.1em 1em 0.1em 0.1em;
         font-size: 100%;
 }
 
 table.diffstat td {
-        padding: 0.1em 1em 0.1em 0.1em;
+        padding: 0.2em 0.2em 0.1em 0.1em;
         font-size: 100%;
+        border: none;
+        border-top: solid 1px #aaa;
+        border-bottom: solid 1px #aaa;
 }
 
 table.diffstat td span.modechange {
         padding-left: 1em;
         color: red;
 }
 
 table.diffstat td.add a {
         color: green;
 }
 
 table.diffstat td.del a {
         color: red;
 }
 
 table.diffstat td.upd a {
         color: blue;
 }
 
-table.diffstat td.summary {
+table.diffstat td.graph {
+        width: 75%;
+        vertical-align: center;
+}
+
+table.diffstat td.graph img {
+        border: none;
+        height: 11pt;
+}
+
+div.diffstat-summary {
         color: #888;
         padding-top: 0.5em;
 }
 
 table.diff td {
         border: solid 1px black;
         font-family: monospace;
         white-space: pre;
 }
 
 table.diff td div.hunk {
         background: #ccc;
 }
 
 table.diff td div.add {
         color: green;
 }
 
 table.diff td div.del {
         color: red;
 }
 
 .sha1 {
         font-family: courier;
         font-size: 90%;
 }
 
 .left {
         text-align: left;
 }
 
 .right {
         text-align: right;
 }