Merge pull request #215 from rtfpessoa/fix-linenumbers-on-scroll

Fix linenumbers on scroll

Author: rtfpessoa

package.json

@@ -54,26 +54,26 @@
     "fs": false
   },
   "dependencies": {
-    "diff": "^3.5.0",
+    "diff": "^4.0.1",
     "hogan.js": "^3.0.2",
     "lodash.merge": "^4.6.1",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
-    "autoprefixer": "^9.3.1",
+    "autoprefixer": "^9.5.1",
     "browserify": "^16.2.3",
-    "clean-css-cli": "^4.2.1",
-    "codacy-coverage": "^3.2.0",
-    "eslint": "^5.9.0",
-    "eslint-plugin-promise": "^4.0.1",
+    "clean-css-cli": "^4.3.0",
+    "codacy-coverage": "^3.4.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-promise": "^4.1.1",
     "eslint-plugin-standard": "^4.0.0",
     "fast-html-parser": "^1.0.1",
     "istanbul": "^0.4.5",
     "mkdirp": "^0.5.1",
-    "mocha": "^5.2.0",
+    "mocha": "5.2.0",
     "nopt": "^4.0.1",
-    "postcss-cli": "^6.0.1",
-    "uglify-js": "^3.4.9"
+    "postcss-cli": "^6.1.2",
+    "uglify-js": "^3.5.9"
   },
   "license": "MIT",
   "files": [

src/ui/css/diff2html.css

@@ -74,19 +74,13 @@
   font-size: 13px;
 }
 
-.d2h-diff-tbody > tr > td {
-  height: 20px;
-  line-height: 1;
-}
-
 .d2h-files-diff {
   display: block;
   width: 100%;
   height: 100%;
 }
 
 .d2h-file-diff {
-  overflow-x: scroll;
   overflow-y: hidden;
 }
 
@@ -102,13 +96,15 @@
 .d2h-code-line {
   display: inline-block;
   white-space: nowrap;
-  padding: 0 10px;
+  /* Compensate for the absolute positioning of the line numbers */
+  padding: 0 8em;
 }
 
 .d2h-code-side-line {
   display: inline-block;
   white-space: nowrap;
-  padding: 0 10px;
+  /* Compensate for the absolute positioning of the line numbers */
+  padding: 0 4.5em;
 }
 
 .d2h-code-line del,
@@ -149,26 +145,27 @@
 .line-num1 {
   box-sizing: border-box;
   float: left;
-  width: 40px;
+  width: 3.5em;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-left: 3px;
+  padding: 0 0.5em 0 0.5em;
 }
 
 .line-num2 {
   box-sizing: border-box;
   float: right;
-  width: 40px;
+  width: 3.5em;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-left: 3px;
+  padding: 0 0.5em 0 0.5em;
 }
 
 .d2h-code-linenumber {
   box-sizing: border-box;
-  width: 86px;
-  padding-left: 2px;
-  padding-right: 2px;
+  width: 7.5em;
+  /* Keep the numbers fixed on line contents scroll */
+  position: absolute;
+  display: inline-block;
   background-color: #fff;
   color: rgba(0, 0, 0, 0.3);
   text-align: right;
@@ -177,11 +174,16 @@
   cursor: pointer;
 }
 
+.d2h-code-linenumber:after {
+  content: '\200b';
+}
+
 .d2h-code-side-linenumber {
+  /* Keep the numbers fixed on line contents scroll */
+  position: absolute;
+  display: inline-block;
   box-sizing: border-box;
-  width: 56px;
-  padding-left: 5px;
-  padding-right: 5px;
+  width: 4em;
   background-color: #fff;
   color: rgba(0, 0, 0, 0.3);
   text-align: right;
@@ -192,6 +194,10 @@
   text-overflow: ellipsis;
 }
 
+.d2h-code-side-linenumber:after {
+  content: '\200b';
+}
+
 .d2h-code-side-emptyplaceholder,
 .d2h-emptyplaceholder {
   background-color: #f1f1f1;