fix css for big lines

README.md

@@ -4,7 +4,7 @@ Diff to Html generates pretty HTML diffs from git word diff output.
 
 ## Features
 
-* line-by-line diff (not side-by-side)
+* line-by-line` diff
 
 * char-by-char highlight
 
@@ -14,11 +14,21 @@ Diff to Html generates pretty HTML diffs from git word diff output.
 
 * GitHub like style
 
-## Setup
+## Real Example
 
-Import the diff2html.js in your html.
+> Go to [Diff2HTML](http://rtfpessoa.github.io/diff2html/)
 
-> Pretty Html From Git Word Diff Output
+## Distributions
+
+* [WebJar](http://www.webjars.org/)
+
+* [Node Module](https://www.npmjs.org/package/diff2html)
+
+* Manually download and import `diff2html.js` into your page
+
+## How to use
+
+> Pretty Line-by-Line Html From Git Word Diff Output
 
     Diff2Html.getPrettyHtmlFromDiff(exInput);
 
@@ -26,11 +36,11 @@ Import the diff2html.js in your html.
 
     Diff2Html.getJsonFromDiff(exInput);
 
-> Pretty Html From Json
+> Pretty Line-by-Line Html From Json
 
     Diff2Html.getPrettyHtmlFromJson(exInput);
 
-> Check out the `template.html` for a complete example.
+> Check out the `index.html` for a complete example.
 
 ## Contributions
 

diff2html.css

@@ -7,11 +7,11 @@
  *
  */
 
-#d2h-wrapper {
+.d2h-wrapper {
     display: block;
     margin: 0 auto;
     text-align: left;
-    width: 900px;
+    width: 100%;
 }
 
 .d2h-file-wrapper {
@@ -28,14 +28,13 @@
 }
 
 .d2h-file-stats {
-    display: inline-block;
+    display: inline;
     font-size: 12px;
     text-align: center;
-    width: 70px;
+    max-width: 15%;
 }
 
 .d2h-lines-added {
-    display: inline-block;
     background-color: #ceffce;
     border: 1px solid #b4e2b4;
     color: #399839;
@@ -45,7 +44,6 @@
 }
 
 .d2h-lines-deleted {
-    display: inline-block;
     background-color: #f7c8c8;
     border: 1px solid #e9aeae;
     color: #c33;
@@ -55,14 +53,13 @@
 }
 
 .d2h-file-name {
-    display: inline-block;
+    display: inline;
     height: 33px;
     line-height: 33px;
-    width: 750px;
+    max-width: 80%;
-}
+    white-space: nowrap;
-
+    text-overflow: ellipsis;
-.d2h-file-diff > div {
+    overflow: hidden;
-    width: 100%;
 }
 
 .d2h-diff-table {
@@ -71,6 +68,11 @@
     font-size: 12px;
     height: 18px;
     line-height: 18px;
+    width: 100%;
+}
+
+.d2h-file-diff {
+    overflow-x: scroll;
 }
 
 .d2h-code-line {
@@ -79,9 +81,7 @@
     padding-right: 10px;
     height: 18px;
     line-height: 18px;
-
+    margin-left: 80px;
-    width: 776px;
-    overflow: hidden;
 }
 
 .d2h-code-line del {
@@ -102,13 +102,27 @@
     border-radius: 0.2em;
 }
 
+.line-num1 {
+    display: inline-block;
+    float: left;
+    width: 30px;
+}
+
+.line-num2 {
+    display: inline-block;
+    float: right;
+    width: 30px;
+}
+
 .d2h-code-linenumber {
-    width: 1%;
+    position: absolute;
-    min-width: 30px;
+    width: 2%;
+    min-width: 65px;
     padding-left: 10px;
     padding-right: 10px;
     height: 18px;
     line-height: 18px;
+    background-color: #fff;
     color: rgba(0, 0, 0, 0.3);
     text-align: right;
     border: solid #eeeeee;
@@ -116,6 +130,10 @@
     cursor: pointer;
 }
 
+.d2h-code-linenumber:not(:first-child) {
+    border-width: 0 1px 0 1px;
+}
+
 .d2h-del {
     background-color: #f7c8c8;
     border-color: #e9aeae;

diff2html.js

@@ -35,7 +35,7 @@
          */
         Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput) {
             var diffJson = generateDiffJson(diffInput);
-            return generateJsonHtml(diffJson);
+            return generateJsonHtml(diffJson, generateFileHtml);
         };
 
         /*
@@ -49,7 +49,7 @@
          * Generates pretty html from a json object
          */
         Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson) {
-            return generateJsonHtml(diffJson);
+            return generateJsonHtml(diffJson, generateFileHtml);
         };
 
         var generateDiffJson = function (diffInput) {
@@ -94,13 +94,20 @@
             var startBlock = function (line) {
                 saveBlock();
 
-                var values = /^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line);
+                var values;
+                if (values = /^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line)) {
+                    oldLine = values[2];
+                    newLine = values[4];
+                } else {
+                    oldLine = 0;
+                    newLine = 0;
+                }
 
                 /* create block metadata */
                 currentBlock = {};
                 currentBlock.lines = [];
-                currentBlock.oldStartLine = oldLine = values[2];
+                currentBlock.oldStartLine = oldLine;
-                currentBlock.newStartLine = newLine = values[4];
+                currentBlock.newStartLine = newLine;
                 currentBlock.header = line;
             };
 
@@ -206,8 +213,8 @@
          * Line By Line HTML
          */
 
-        var generateJsonHtml = function (diffFiles) {
+        var generateJsonHtml = function (diffFiles, htmlTypeFunction) {
-            return "<div id=\"d2h-wrapper\">\n" +
+            return "<div class=\"d2h-wrapper\">\n" +
                 diffFiles.map(function (file) {
                     return "<div class=\"d2h-file-wrapper\">\n" +
                         "     <div class=\"d2h-file-header\">\n" +
@@ -221,7 +228,7 @@
                         "       <div class=\"d2h-code-wrapper\">\n" +
                         "         <table class=\"d2h-diff-table\">\n" +
                         "           <tbody class=\"d2h-diff-tbody\">\n" +
-                        "         " + generateFileHtml(file) +
+                        "         " + htmlTypeFunction(file) +
                         "           </tbody>\n" +
                         "         </table>\n" +
                         "       </div>\n" +
@@ -297,18 +304,16 @@
 
         var generateLineHtml = function (line) {
             return "<tr>\n" +
-                "  <td class=\"d2h-code-linenumber " + line.type + "\">" + line.oldLine + "</td>\n" +
+                "  <td class=\"d2h-code-linenumber " + line.type + "\">" +
-                "  <td class=\"d2h-code-linenumber " + line.type + "\">" + line.newLine + "</td>\n" +
+                "    <div class=\"line-num1\">" + line.oldLine + "</div>" +
+                "    <div class=\"line-num2\">" + line.newLine + "</div>" +
+                "  </td>\n" +
                 "  <td class=\"" + line.type + "\">" +
                 "    <div class=\"d2h-code-line " + line.type + "\">" + line.content + "</div>" +
                 "  </td>\n" +
                 "</tr>\n";
         };
 
-        /*
-         * Side By Side HTML (work in progress)
-         */
-
         /*
          * HTML Helpers
          */

diff2html.min.css

@@ -0,0 +1 @@
+.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#f99;font-weight:700;border-radius:.2em}.d2h-code-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#6f7;font-weight:700;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px}.line-num2{display:inline-block;float:right;width:30px}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px 0 0;cursor:pointer}.d2h-code-linenumber:not(:first-child){border-width:0 1px}.d2h-del{background-color:#f7c8c8;border-color:#e9aeae}.d2h-ins{background-color:#ceffce;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,.3);border-color:#d5e4f2}

index.html

@@ -11,9 +11,11 @@
         Last Update: Saturday 6 September 2014
     -->
 
-    <link rel="stylesheet" type="text/css" href="diff2html.css">
+    <!--<link rel="stylesheet" type="text/css" href="diff2html.css">-->
+    <link rel="stylesheet" type="text/css" href="diff2html.min.css">
 
-    <script type="text/javascript" src="diff2html.js"></script>
+    <!--<script type="text/javascript" src="diff2html.js"></script>-->
+    <script type="text/javascript" src="diff2html.min.js"></script>
     <script>
         var exInput = 'diff --git a/src/app/language/en.json b/src/app/language/en.json\n' +
                 'index ccf92c9..68b8345 100644\n' +
@@ -58,12 +60,19 @@
                 '  }\n';
 
         document.onreadystatechange = function () {
-            var diffHtml = Diff2Html.getPrettyHtmlFromDiff(exInput);
+            var diffJson = Diff2Html.getJsonFromDiff(exInput);
-            document.getElementsByTagName('body')[0].innerHTML = diffHtml;
+            var lineByLineDiffHtml = Diff2Html.getPrettyHtmlFromJson(diffJson);
+            document.getElementById('line-by-line').innerHTML = lineByLineDiffHtml;
         }
     </script>
 
 </head>
-<body>
+<body style="text-align: center; font-family: 'Source Sans Pro',sans-serif;">
+<h1>Diff to HTML by <a href="https://github.com/rtfpessoa">rtfpessoa</a></h1>
+
+<h2>Line by Line</h2>
+
+<div id="line-by-line" style="margin: 0 auto; width: 900px;">
+</div>
 </body>
 </html>