Update css

This commit is contained in:
Rodrigo Fernandes 2016-05-26 16:34:47 +01:00
parent e3a79c4d29
commit 0050b62bc6
No known key found for this signature in database
GPG key ID: 08E3C5F38969078E
15 changed files with 363 additions and 59 deletions

View file

@ -33,10 +33,6 @@
<!-- Custom styles for this template -->
<link href="main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css">
<!-- diff2html -->
@ -374,7 +370,11 @@
$(document).ready(function() {
var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
diff2htmlUi.draw('#line-by-line', {
inputFormat: 'json',
showFiles: true,
matching: 'lines'
});
diff2htmlUi.fileListCloseable('#line-by-line', false);
diff2htmlUi.highlightCode('#line-by-line');
@ -382,7 +382,8 @@
inputFormat: 'json',
showFiles: true,
matching: 'lines',
outputFormat: 'side-by-side'
outputFormat: 'side-by-side',
synchronisedScroll: true
});
diff2htmlUi.fileListCloseable('#side-by-side', false);
diff2htmlUi.highlightCode('#side-by-side');

View file

@ -36,8 +36,22 @@
var cfg = config || {};
var $target = this._getTarget(targetId);
$target.html(Diff2Html.getPrettyHtml(diffJson, cfg));
synchronisedScroll($target, config);
};
function synchronisedScroll($target, config) {
if (config.synchronisedScroll) {
$target.find(".d2h-file-side-diff").scroll(function() {
var $this = $(this);
$this.closest(".d2h-file-wrapper").find(".d2h-file-side-diff")
.scrollLeft($this.scrollLeft());
});
}
}
Diff2HtmlUI.prototype.fileListCloseable = function(targetId, startVisible) {
var $target = this._getTarget(targetId);

2
diff2html-ui.min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -16,6 +16,8 @@
}
.d2h-file-stats {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: auto;
font-size: 14px;
@ -41,8 +43,12 @@
}
.d2h-file-name-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
@ -242,6 +248,8 @@
}
.d2h-file-list-line {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: left;
}
@ -300,6 +308,8 @@
}
.d2h-tag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 10px;
margin-left: 5px;
@ -337,12 +347,21 @@
.selecting-right td.d2h-code-side-linenumber * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.selecting-left .d2h-code-line::-moz-selection,
.selecting-left .d2h-code-line *::-moz-selection
.selecting-right td.d2h-code-linenumber::-moz-selection,
.selecting-left .d2h-code-side-line::-moz-selection,
.selecting-left .d2h-code-side-line *::-moz-selection,
.selecting-right td.d2h-code-side-linenumber::-moz-selection,
.selecting-right td.d2h-code-side-linenumber *::-moz-selection {
background: transparent;
}
.selecting-left .d2h-code-line::selection,
.selecting-left .d2h-code-line *::selection
.selecting-right td.d2h-code-linenumber::selection,

2
diff2html.min.css vendored

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 MiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 MiB

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 MiB

After

Width:  |  Height:  |  Size: 121 KiB

View file

@ -33,10 +33,6 @@
<!-- Custom styles for this template -->
<link href="main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<body class="swag-line template-index">
<div class="container-overflow-wrap">
@ -87,7 +83,7 @@
</span>
<h1 class="hero-header">Diff parser and pretty html generator</h1>
<h4 class="text-muted">Better diffs, unmatched reviews.</h4>
<a class="btn" href="demo.html">Live Demo</a>
<a class="btn btn-lg" href="demo.html">Live Demo</a>
<div class="screenshots screenshots-fan clearfix">
@ -157,9 +153,8 @@
<h3><strong>Install with Bower</strong></h3>
<p>You can install and manage diff2html's CSS and JS using Bower:</p>
<div class="homepage-code-example">
<p>
<span class="text-muted">&gt; $ bower install diff2html</span>
</p>
<p><span class="unselectable">&gt; $ </span><span class="text-muted">bower install diff2html</span></p>
<span class="btn-clipboard" data-clipboard-text="bower install diff2html" title="Copy">Copy</span>
</div>
</div>
</div>
@ -168,9 +163,8 @@
<h3><strong>Install with npm</strong></h3>
<p>You can also install diff2html using npm:</p>
<div class="homepage-code-example">
<p>
<span class="text-muted">&gt; $ npm install diff2html</span>
</p>
<p><span class="unselectable">&gt; $ </span><span class="text-muted">npm install diff2html</span></p>
<span class="btn-clipboard" data-clipboard-text="npm install diff2html" title="Copy">Copy</span>
</div>
</div>
</div>
@ -194,22 +188,133 @@
<div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
<div class="homepage-terminal-example">
<p class="m-b-md">
<span class="text-muted">&gt; $ npm install -g diff2html-cli</span><br>
diff2html cli installed!
<span class="unselectable">&gt; $ </span><span class="text-muted">npm install -g diff2html-cli</span><br>
<span class="unselectable">diff2html cli installed!</span>
</p>
<p class="m-b-md">
<span class="text-muted">&gt; $ diff2html</span><br>
Previous commit changes on your browser
<span class="unselectable">&gt; $ </span><span class="text-muted">diff2html</span><br>
<span class="unselectable">Previous commit changes on your browser</span>
</p>
<p>
<span class="text-muted">&gt; $ is that it?</span><br>
Yup, it's that simple.
<span class="unselectable">&gt; $ <span class="text-muted">is that it?</span><br>
Yup, it's that simple.</span>
</p>
</div>
</div>
</div>
<div class="row row-padded-small text-center">
<div id="users" class="row row-padded-small row-centered row-bordered">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<h3><strong>Projects using diff2html</strong></h3>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">diff2html-cli</h5>
<p class="m-b">diff2html from your terminal to the browser.</p>
<a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">Ungit</h5>
<p class="m-b">The easiest way to use git. On any platform. Anywhere.</p>
<a href="https://github.com/FredrikNoren/ungit" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">Diffy</h5>
<p class="m-b">Share your diffs and explain your ideas without committing.</p>
<a href="https://diffy.org/" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> Webpage
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">node-git</h5>
<p class="m-b">Execute Git Command by Node.js.</p>
<a href="https://github.com/liangshuai/node-git" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">diff-pane</h5>
<p class="m-b">Atom - Diff two panes.</p>
<a href="https://github.com/t-ari/diff-pane" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">node-giff</h5>
<p class="m-b">Display git diff on browser.</p>
<a href="https://github.com/do7be/node-giff" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">edgar-monitor</h5>
<p class="m-b">A module that processes new Edgar filings and sends out
notifications.</p>
<a href="https://github.com/buzzfeed-openlab/edgar-monitor" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">&nbsp;</h5>
<p class="m-b">Your project here.</p>
<a href="https://github.com/rtfpessoa/diff2html/issues/new" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> GitHub
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-padded-small text-center">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h3><strong>Open Source</strong></h3>
<h4 class="m-b-md">diff2html is open source.
@ -217,7 +322,7 @@
find us on <a href="https://github.com/rtfpessoa/diff2html" target="_blank">GitHub</a> and
<a href="https://gitter.im/rtfpessoa/diff2html" target="_blank">Gitter</a>. Need any help?
</h4>
<a class="btn" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
<a class="btn btn-md" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
Read more in the Docs
</a>
</div>
@ -258,5 +363,22 @@
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script>
new Clipboard(document.getElementsByClassName("btn-clipboard"));
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-78351861-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

View file

@ -11,6 +11,12 @@
padding-top: 15px !important
}
@media (min-width: 768px) {
p.m-b {
height: 75px;
}
}
.errors ul {
list-style: none;
margin: 0;
@ -19,9 +25,6 @@
.btn {
display: inline-block;
font-size: 14px;
padding: 7px 24px;
border-radius: 4px;
color: #fff;
background: #26A65B;
font-weight: 400
@ -32,6 +35,25 @@
background: #5dbe5d;
}
.btn-clipboard {
position: absolute;
top: 0;
right: 0;
z-index: 10;
display: block;
padding: 5px 8px;
font-size: 12px;
color: #fff;
background-color: #767676;
border-radius: 0 4px 0 4px;
cursor: pointer;
}
.btn-clipboard:hover {
color: #000;
background-color: #dcdfe4;
}
.footer {
position: relative;
padding: 40px 0;
@ -101,13 +123,11 @@ label, legend {
.row-centered {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
align-items: center;
}
}
@ -142,6 +162,7 @@ label, legend {
margin-left: -40%;
height: 1px;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%);
background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%)
}
@ -328,7 +349,7 @@ hr {
.navbar-nav > li > a {
display: inline-block;
margin-left: 50px
margin-left: 13px
}
.navbar-nav > li:first-child > a {
@ -599,6 +620,7 @@ a:hover, a:focus {
}
.homepage-terminal-example, .homepage-code-example {
position: relative;
font-family: monospace;
background: #272b38;
color: #48d8a0;
@ -606,7 +628,8 @@ a:hover, a:focus {
padding: 30px
}
.homepage-terminal-example .text-muted {
.homepage-terminal-example .text-muted,
.homepage-code-example .text-muted {
color: #6a7490
}
@ -660,3 +683,12 @@ a:hover, a:focus {
.row-padded-small {
padding: 40px 0;
}
*.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

View file

@ -5,12 +5,13 @@ var hogan = require('hogan.js');
var template = hogan.compile(readFile('src/templates/template.mustache'));
var index = readFile('src/templates/index.partial.html');
var indexScripts = readFile('src/templates/index-scripts.partial.html');
var demo = readFile('src/templates/demo.partial.html');
var demoAssets = readFile('src/templates/demo-assets.partial.html');
var demoScripts = readFile('src/templates/demo-scripts.partial.html');
var indexHtml = template.render({assets: '', scripts: '', content: index});
var indexHtml = template.render({assets: '', scripts: indexScripts, content: index});
writeFile('index.html', indexHtml);

View file

@ -243,7 +243,11 @@
$(document).ready(function() {
var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
diff2htmlUi.draw('#line-by-line', {
inputFormat: 'json',
showFiles: true,
matching: 'lines'
});
diff2htmlUi.fileListCloseable('#line-by-line', false);
diff2htmlUi.highlightCode('#line-by-line');
@ -251,7 +255,8 @@
inputFormat: 'json',
showFiles: true,
matching: 'lines',
outputFormat: 'side-by-side'
outputFormat: 'side-by-side',
synchronisedScroll: true
});
diff2htmlUi.fileListCloseable('#side-by-side', false);
diff2htmlUi.highlightCode('#side-by-side');

View file

@ -0,0 +1,5 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script>
new Clipboard(document.getElementsByClassName("btn-clipboard"));
</script>

View file

@ -5,7 +5,7 @@
</span>
<h1 class="hero-header">Diff parser and pretty html generator</h1>
<h4 class="text-muted">Better diffs, unmatched reviews.</h4>
<a class="btn" href="demo.html">Live Demo</a>
<a class="btn btn-lg" href="demo.html">Live Demo</a>
<div class="screenshots screenshots-fan clearfix">
@ -75,9 +75,8 @@
<h3><strong>Install with Bower</strong></h3>
<p>You can install and manage diff2html's CSS and JS using Bower:</p>
<div class="homepage-code-example">
<p>
<span class="text-muted">&gt; $ bower install diff2html</span>
</p>
<p><span class="unselectable">&gt; $ </span><span class="text-muted">bower install diff2html</span></p>
<span class="btn-clipboard" data-clipboard-text="bower install diff2html" title="Copy">Copy</span>
</div>
</div>
</div>
@ -86,9 +85,8 @@
<h3><strong>Install with npm</strong></h3>
<p>You can also install diff2html using npm:</p>
<div class="homepage-code-example">
<p>
<span class="text-muted">&gt; $ npm install diff2html</span>
</p>
<p><span class="unselectable">&gt; $ </span><span class="text-muted">npm install diff2html</span></p>
<span class="btn-clipboard" data-clipboard-text="npm install diff2html" title="Copy">Copy</span>
</div>
</div>
</div>
@ -112,22 +110,133 @@
<div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
<div class="homepage-terminal-example">
<p class="m-b-md">
<span class="text-muted">&gt; $ npm install -g diff2html-cli</span><br>
diff2html cli installed!
<span class="unselectable">&gt; $ </span><span class="text-muted">npm install -g diff2html-cli</span><br>
<span class="unselectable">diff2html cli installed!</span>
</p>
<p class="m-b-md">
<span class="text-muted">&gt; $ diff2html</span><br>
Previous commit changes on your browser
<span class="unselectable">&gt; $ </span><span class="text-muted">diff2html</span><br>
<span class="unselectable">Previous commit changes on your browser</span>
</p>
<p>
<span class="text-muted">&gt; $ is that it?</span><br>
Yup, it's that simple.
<span class="unselectable">&gt; $ <span class="text-muted">is that it?</span><br>
Yup, it's that simple.</span>
</p>
</div>
</div>
</div>
<div class="row row-padded-small text-center">
<div id="users" class="row row-padded-small row-centered row-bordered">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<h3><strong>Projects using diff2html</strong></h3>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">diff2html-cli</h5>
<p class="m-b">diff2html from your terminal to the browser.</p>
<a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">Ungit</h5>
<p class="m-b">The easiest way to use git. On any platform. Anywhere.</p>
<a href="https://github.com/FredrikNoren/ungit" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">Diffy</h5>
<p class="m-b">Share your diffs and explain your ideas without committing.</p>
<a href="https://diffy.org/" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> Webpage
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">node-git</h5>
<p class="m-b">Execute Git Command by Node.js.</p>
<a href="https://github.com/liangshuai/node-git" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">diff-pane</h5>
<p class="m-b">Atom - Diff two panes.</p>
<a href="https://github.com/t-ari/diff-pane" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">node-giff</h5>
<p class="m-b">Display git diff on browser.</p>
<a href="https://github.com/do7be/node-giff" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">edgar-monitor</h5>
<p class="m-b">A module that processes new Edgar filings and sends out
notifications.</p>
<a href="https://github.com/buzzfeed-openlab/edgar-monitor" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> View GitHub
</a>
</div>
</div>
</div>
<div class="col-md-3 m-b-lg">
<div class="panel panel-default panel-profile m-b-0">
<div class="panel-body text-center">
<h5 class="panel-title">&nbsp;</h5>
<p class="m-b">Your project here.</p>
<a href="https://github.com/rtfpessoa/diff2html/issues/new" target="_blank"
class="btn btn-primary-outline btn-sm m-b">
<span class="icon icon-add-user"></span> GitHub
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-padded-small text-center">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h3><strong>Open Source</strong></h3>
<h4 class="m-b-md">diff2html is open source.
@ -135,7 +244,7 @@
find us on <a href="https://github.com/rtfpessoa/diff2html" target="_blank">GitHub</a> and
<a href="https://gitter.im/rtfpessoa/diff2html" target="_blank">Gitter</a>. Need any help?
</h4>
<a class="btn" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
<a class="btn btn-md" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
Read more in the Docs
</a>
</div>

View file

@ -33,10 +33,6 @@
<!-- Custom styles for this template -->
<link href="main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
{{#assets}}
{{{assets}}}