From 7688c9e08f672f423beece5babed970aec8626d6 Mon Sep 17 00:00:00 2001 From: Rodrigo Fernandes Date: Sat, 6 Sep 2014 02:39:36 +0100 Subject: [PATCH] tag CSS classes to avoid naming conflicts --- style.css => diff2html.css | 164 +++++++++++++------------------------ diff2html.js | 38 ++++----- template.html | 4 +- 3 files changed, 78 insertions(+), 128 deletions(-) rename style.css => diff2html.css (59%) diff --git a/style.css b/diff2html.css similarity index 59% rename from style.css rename to diff2html.css index b52382e..38d59ad 100644 --- a/style.css +++ b/diff2html.css @@ -1,9 +1,9 @@ /* * - * Diff to HTML (style.css) + * Diff to HTML (diff2html.css) * Author: rtfpessoa * Date: Friday 29 August 2014 - * Last Update: Saturday 30 August 2014 + * Last Update: Friday 6 September 2014 * */ @@ -11,44 +11,31 @@ body { text-align: center; } -#wrapper { +#d2h-wrapper { display: inline-block; - margin-top: 1em; text-align: left; width: 920px; } -.file-wrapper { +.d2h-file-wrapper { border: 1px solid #ddd; border-radius: 3px; margin-bottom: 1em; } -.file-header { +.d2h-file-header { padding: 5px 10px; - text-shadow: 0 1px 0 #fff; border-bottom: 1px solid #d8d8d8; background-color: #f7f7f7; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - box-sizing: border-box; } -.file-name { - display: inline-block; - font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; - height: 33px; - line-height: 33px; -} - -.file-stats { +.d2h-file-stats { display: inline-block; font-family: monospace, monospace; font-size: 12px; - vertical-align: middle; } -.lines-added { +.d2h-lines-added { background-color: #ceffce; border: 1px solid #b4e2b4; color: #399839; @@ -56,7 +43,7 @@ body { padding: 5px; } -.lines-deleted { +.d2h-lines-deleted { background-color: #f7c8c8; border: 1px solid #e9aeae; color: #c33; @@ -64,111 +51,42 @@ body { padding: 5px; } -.file-diff { +.d2h-file-name { + display: inline-block; + font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; + height: 33px; + line-height: 33px; +} + +.d2h-file-diff { overflow: auto; } -.file-diff > div { +.d2h-file-diff > div { width: 100%; } -pre { - margin: 0; - font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; - line-height: 18px; - text-indent: 5px; - color: #333; - border: solid #eeeeee; - border-width: 0 1px 0 0; - cursor: pointer; -} - -.code-wrapper { +.d2h-code-wrapper { overflow-x: auto; overflow-y: hidden; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; } -.diff-table { - border-collapse: separate; -} - -table { +.d2h-diff-table { border-collapse: collapse; - border-spacing: 0; -} - -tbody { - display: table-row-group; - vertical-align: middle; - border-color: inherit; -} - -tr { - display: table-row; - vertical-align: inherit; - border-color: inherit; -} - -td, th { - padding: 0; -} - -pre { - text-indent: 0; - border: none; -} - -.code-linenumber { - width: 1%; - min-width: 25px; - padding-left: 10px; - padding-right: 10px; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; + height: 18px; line-height: 18px; - color: rgba(0, 0, 0, 0.3); - vertical-align: top; - text-align: right; - border: solid #eeeeee; - border-width: 0 1px 0 0; - cursor: pointer; } -.code-line { - position: relative; +.d2h-code-line { + overflow: scroll; + white-space: pre; padding-left: 10px; padding-right: 10px; - font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; - color: #333; - vertical-align: top; - white-space: pre; - overflow: visible; } -.delete { - vertical-align: middle; - background-color: #f7c8c8; - border-color: #e9aeae; -} - -.insert { - vertical-align: middle; - background-color: #ceffce; - border-color: #b4e2b4; -} - -.info { - background-color: #f8fafd; - vertical-align: middle; - color: rgba(0, 0, 0, 0.3); - border-color: #d5e4f2; -} - -.code-line del { +.d2h-code-line del { display: inline-block; margin-top: -1px; text-decoration: none; @@ -176,10 +94,42 @@ pre { font-weight: 700; } -.code-line ins { +.d2h-code-line ins { display: inline-block; margin-top: -1px; text-decoration: none; background-color: #97f295; font-weight: 700; } + +.d2h-code-linenumber { + width: 1%; + min-width: 25px; + padding-left: 10px; + padding-right: 10px; + color: rgba(0, 0, 0, 0.3); + text-align: right; + border: solid #eeeeee; + border-width: 0 1px 0 0; + cursor: pointer; +} + + +.d2h-delete { + vertical-align: middle; + background-color: #f7c8c8; + border-color: #e9aeae; +} + +.d2h-insert { + vertical-align: middle; + background-color: #ceffce; + border-color: #b4e2b4; +} + +.d2h-info { + background-color: #f8fafd; + vertical-align: middle; + color: rgba(0, 0, 0, 0.3); + border-color: #d5e4f2; +} diff --git a/diff2html.js b/diff2html.js index bc6fc69..338a4d9 100644 --- a/diff2html.js +++ b/diff2html.js @@ -3,7 +3,7 @@ * Diff to HTML (diff2html.js) * Author: rtfpessoa * Date: Friday 29 August 2014 - * Last Update: Saturday 30 August 2014 + * Last Update: Friday 6 September 2014 * * Diff command: * git diff --word-diff-regex=. HEAD~1 @@ -15,10 +15,10 @@ ClassVariable = (function () { var CSS_STYLES = { - INFO: "info", - CONTEXT: "context", - NEW: "insert", - DELETED: "delete" + INFO: "d2h-info", + CONTEXT: "d2h-context", + NEW: "d2h-insert", + DELETED: "d2h-delete" }; var BLOCK_HEADER_LINE = "..."; @@ -189,20 +189,20 @@ }; var generateJsonHtml = function (diffFiles) { - return "
\n" + + return "
\n" + diffFiles.map(function (file) { - return "
\n" + - "
\n" + - "
\n" + - " +" + file.addedLines + "\n" + - " -" + file.deletedLines + "\n" + + return "
\n" + + "
\n" + + "
\n" + + " +" + file.addedLines + "\n" + + " -" + file.deletedLines + "\n" + "
\n" + - "
" + getDiffName(file.oldName, file.newName) + "
\n" + + "
" + getDiffName(file.oldName, file.newName) + "
\n" + "
\n" + - "
\n" + - "
\n" + - " \n" + - " \n" + + "
\n" + + "
\n" + + "
\n" + + " \n" + " " + generateFileHtml(file) + " \n" + "
\n" + @@ -233,9 +233,9 @@ } return "\n" + - " " + oldLine + "\n" + - " " + newLine + "\n" + - " 
" + escapedLine + "
\n" + + " " + oldLine + "\n" + + " " + newLine + "\n" + + "
" + escapedLine + "\n" + "\n"; }).join("\n"); }).join("\n"); diff --git a/template.html b/template.html index 6f5cead..436bfec 100644 --- a/template.html +++ b/template.html @@ -8,10 +8,10 @@ Diff to HTML (template.html) Author: rtfpessoa Date: Friday 29 August 2014 - Last Update: Saturday 30 August 2014 + Last Update: Friday 6 September 2014 --> - +