From 26d349b736ccdd697db379dcac5b3b138f4670a1 Mon Sep 17 00:00:00 2001
From: Mikko Rantanen <jubjub@jubjubnest.net>
Date: Wed, 28 Oct 2015 19:43:06 +0200
Subject: [PATCH] Align the file summary

Use <table> element to lay out the file summary. The summary is tabular
data anyway so the use of <table> should be justified. First column
contains lines added, justified to right and the second column contains
lines removed, justified to the left. The last column has the file name.

Fixes #27
---
 css/diff2html.css        |  8 ++++++++
 src/file-list-printer.js | 20 +++++++++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/css/diff2html.css b/css/diff2html.css
index fc4b5f8..7b7e8b5 100644
--- a/css/diff2html.css
+++ b/css/diff2html.css
@@ -33,6 +33,10 @@
 }
 
 .d2h-lines-added {
+    text-align: right;
+}
+
+.d2h-lines-added > * {
     background-color: #ceffce;
     border: 1px solid #b4e2b4;
     color: #399839;
@@ -42,6 +46,10 @@
 }
 
 .d2h-lines-deleted {
+    text-align: left;
+}
+
+.d2h-lines-deleted > * {
     background-color: #f7c8c8;
     border: 1px solid #e9aeae;
     color: #c33;
diff --git a/src/file-list-printer.js b/src/file-list-printer.js
index c93a922..8cb2f76 100644
--- a/src/file-list-printer.js
+++ b/src/file-list-printer.js
@@ -21,19 +21,21 @@
             '     <a id="' + hideId + '" class="d2h-hide" href="#' + hideId + '">+</a>\n' +
             '     <a id="' + showId + 'd2h-show" class="d2h-show" href="#' + showId + '">-</a>\n' +
             '     <div class="d2h-clear"></div>\n' +
-            '     <div class="d2h-file-list">\n' +
+            '     <table class="d2h-file-list">\n' +
 
 
             diffFiles.map(function (file) {
-                return '     <div class="d2h-file-list-line">\n' +
-                    '       <div class="d2h-file-stats">\n' +
-                    '         <span class="d2h-lines-added">+' + file.addedLines + '</span>\n' +
-                    '         <span class="d2h-lines-deleted">-' + file.deletedLines + '</span>\n' +
-                    '       </div>\n' +
-                    '       <div class="d2h-file-name"><a href="#' + printerUtils.getHtmlId(file) + '">&nbsp;' + printerUtils.getDiffName(file) + '</a></div>\n' +
-                    '     </div>\n'
+                return '     <tr class="d2h-file-list-line">\n' +
+                    '       <td class="d2h-lines-added">\n' +
+                    '         <span>+' + file.addedLines + '</span>\n' +
+                    '       </td>\n' +
+                    '       <td class="d2h-lines-deleted">\n' +
+                    '         <span>-' + file.deletedLines + '</span>\n' +
+                    '       </td>\n' +
+                    '       <td class="d2h-file-name"><a href="#' + printerUtils.getHtmlId(file) + '">&nbsp;' + printerUtils.getDiffName(file) + '</a></td>\n' +
+                    '     </tr>\n'
             }).join('\n') +
-            '</div></div>\n';
+            '</table></div>\n';
     };
 
     module.exports['FileListPrinter'] = new FileListPrinter();