Merge pull request #180 from rtfpessoa/improve-line-heigth

Improve line heigth
rtfpessoa · Jan 4, 2019 · 37401d7 · 37401d7
2 parents 39f8d9b + 7fbc8c2
commit 37401d7
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 93 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,7 +2,6 @@
   "parserOptions": {
     "ecmaVersion": 6,
     "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
       "jsx": true
     },
     "sourceType": "module"

diff --git a/README.md b/README.md
@@ -240,13 +240,13 @@ If your favourite language is not included in the default package also add its j
 
 ```html
 <!-- Stylesheet -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">
 <link rel="stylesheet" type="text/css" href="dist/diff2html.css">
 
 <!-- Javascripts -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scala.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/scala.min.js"></script>
 <script type="text/javascript" src="dist/diff2html-ui.js"></script>
 ```
 

diff --git a/docs/demo.html b/docs/demo.html
@@ -33,7 +33,7 @@
     <!-- Custom styles for this template -->
     <link href="main.min.css" rel="stylesheet">
 
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">
 
     <!-- diff2html -->
     <link rel="stylesheet" type="text/css" href="assets/diff2html.min.css">
@@ -240,8 +240,8 @@ <h3>Thank you</h3>
 }
 </script>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scala.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/scala.min.js"></script>
 
 <!-- diff2html -->
 <script type="text/javascript" src="assets/diff2html.min.js"></script>

diff --git a/src/templates/diff2html-templates.js b/src/templates/diff2html-templates.js
diff --git a/src/templates/file-summary-line.mustache b/src/templates/file-summary-line.mustache
@@ -1,6 +1,6 @@
 <li class="d2h-file-list-line">
     <span class="d2h-file-name-wrapper">
-      <span>{{>fileIcon}}</span>
+      {{>fileIcon}}
       <a href="#{{fileHtmlId}}" class="d2h-file-name">{{fileName}}</a>
       <span class="d2h-file-stats">
           <span class="d2h-lines-added">{{addedLines}}</span>

diff --git a/src/templates/generic-file-path.mustache b/src/templates/generic-file-path.mustache
@@ -1,5 +1,5 @@
 <span class="d2h-file-name-wrapper">
-    <span class="d2h-icon-wrapper">{{>fileIcon}}</span>
+    {{>fileIcon}}
     <span class="d2h-file-name">{{fileDiffName}}</span>
     {{>fileTag}}
 </span>
diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
@@ -10,6 +10,7 @@
 }
 
 .d2h-file-header {
+  height: 35px;
   padding: 5px 10px;
   border-bottom: 1px solid #d8d8d8;
   background-color: #f7f7f7;
@@ -58,7 +59,6 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow-x: hidden;
-  line-height: 21px;
 }
 
 .d2h-file-wrapper {
@@ -76,7 +76,7 @@
 
 .d2h-diff-tbody > tr > td {
   height: 20px;
-  line-height: 20px;
+  line-height: 1;
 }
 
 .d2h-files-diff {
@@ -103,14 +103,12 @@
   display: inline-block;
   white-space: nowrap;
   padding: 0 10px;
-  margin-left: 80px;
 }
 
 .d2h-code-side-line {
   display: inline-block;
   white-space: nowrap;
   padding: 0 10px;
-  margin-left: 50px;
 }
 
 .d2h-code-line del,
@@ -168,7 +166,6 @@
 
 .d2h-code-linenumber {
   box-sizing: border-box;
-  position: absolute;
   width: 86px;
   padding-left: 2px;
   padding-right: 2px;
@@ -182,7 +179,6 @@
 
 .d2h-code-side-linenumber {
   box-sizing: border-box;
-  position: absolute;
   width: 56px;
   padding-left: 5px;
   padding-right: 5px;
@@ -285,10 +281,6 @@
   cursor: pointer;
 }
 
-.d2h-icon-wrapper {
-  line-height: 31px;
-}
-
 .d2h-icon {
   vertical-align: middle;
   margin-right: 10px;

diff --git a/test/diff2html-tests.js b/test/diff2html-tests.js
@@ -57,11 +57,10 @@ var filesExample1 =
   '    <ol class="d2h-file-list">\n' +
   '    <li class="d2h-file-list-line">\n' +
   '    <span class="d2h-file-name-wrapper">\n' +
-  '      <span><svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"\n' +
-  '     viewBox="0 0 14 16" width="14">\n' +
-  '    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>\n' +
-  '</svg></span>\n' +
-  '      <a href="#d2h-675094" class="d2h-file-name">sample</a>\n' +
+  '      <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"\n' +
+  '           viewBox="0 0 14 16" width="14">\n' +
+  '          <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>\n' +
+  '      </svg>      <a href="#d2h-675094" class="d2h-file-name">sample</a>\n' +
   '      <span class="d2h-file-stats">\n' +
   '          <span class="d2h-lines-added">+1</span>\n' +
   '          <span class="d2h-lines-deleted">-1</span>\n' +
@@ -76,10 +75,9 @@ var htmlLineExample1 =
   '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
   '    <div class="d2h-file-header">\n' +
   '    <span class="d2h-file-name-wrapper">\n' +
-  '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
-  '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
-  '</svg></span>\n' +
-  '    <span class="d2h-file-name">sample</span>\n' +
+  '    <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+  '        <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+  '    </svg>    <span class="d2h-file-name">sample</span>\n' +
   '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
   '    </div>\n' +
   '    <div class="d2h-file-diff">\n' +
@@ -128,10 +126,9 @@ var htmlSideExample1 =
   '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
   '    <div class="d2h-file-header">\n' +
   '      <span class="d2h-file-name-wrapper">\n' +
-  '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
-  '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
-  '</svg></span>\n' +
-  '    <span class="d2h-file-name">sample</span>\n' +
+  '    <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+  '        <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+  '    </svg>    <span class="d2h-file-name">sample</span>\n' +
   '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
   '    </div>\n' +
   '    <div class="d2h-files-diff">\n' +
@@ -317,10 +314,9 @@ describe('Diff2Html', function() {
         '    <div id="d2h-211439" class="d2h-file-wrapper" data-lang="md">\n' +
         '    <div class="d2h-file-header">\n' +
         '    <span class="d2h-file-name-wrapper">\n' +
-        '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
-        '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
-        '</svg></span>\n' +
-        '    <span class="d2h-file-name">CHANGELOG.md</span>\n' +
+        '    <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
+        '        <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
+        '    </svg>    <span class="d2h-file-name">CHANGELOG.md</span>\n' +
         '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
         '    </div>\n' +
         '    <div class="d2h-file-diff">\n' +