luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix mobile view

Browse source
This commit is contained in:
Rodrigo Fernandes 2016-10-15 21:47:32 +01:00
parent c2c253d3e3
commit a6d119ac81
No known key found for this signature in database
GPG key ID: 08E3C5F38969078E
10 changed files with 106 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/index.html
View file

@ -45,7 +45,7 @@
</script> </script>
</head> </head>
<body class="swag-line template-index"> <body class="swag-line template-index">
<div class="container-overflow-wrap"> <div>
<div class="container"> <div class="container">
<nav class="navbar navbar-default navbar-tall navbar-full" role="navigation"> <nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">

26
docs/main.css
View file

@ -136,10 +136,6 @@
background: radial-gradient(ellipse at center, 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%)
} }
.container-overflow-wrap {
overflow: hidden
}
.hero { .hero {
position: relative; position: relative;
text-align: center; text-align: center;
@ -538,6 +534,10 @@ a:hover, a:focus {
user-select: none; user-select: none;
} }
.url-diff-container {
width: 980px;
}
.diff-url-wrapper { .diff-url-wrapper {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -564,19 +564,13 @@ a:hover, a:focus {
font-weight: normal; font-weight: normal;
} }
.diff-url-options-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.diff-url-options-container label {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.diff-url-options-container label select, .diff-url-options-container label select,
.diff-url-options-container label input { .diff-url-options-container label input {
display: block; display: block;
} }
/* 15 columns */
.col-md- *.col-md-15 {
width: 20%;
}

2
docs/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

17
docs/url.html
View file

@ -52,7 +52,7 @@
</script> </script>
</head> </head>
<body class="swag-line template-index"> <body class="swag-line template-index">
<div class="container-overflow-wrap"> <div>
<div class="container"> <div class="container">
<nav class="navbar navbar-default navbar-tall navbar-full" role="navigation"> <nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">
@ -107,16 +107,21 @@
with code syntax highlight and line similarity matching for better code reviews. with code syntax highlight and line similarity matching for better code reviews.
</p> </p>
<h2>Options:</h2> <h2>Options:</h2>
<div class="diff-url-options-container"> <div class="row">
<div class="col-md-2 col-xs-12 col-15">
<label title="Output format of the HTML, either line by line or side by side">Output Format <label title="Output format of the HTML, either line by line or side by side">Output Format
<select class="options-label-value" id="diff-url-options-output-format" name="outputFormat"> <select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
<option value="line-by-line" selected>Line by Line</option> <option value="line-by-line" selected>Line by Line</option>
<option value="side-by-side">Side by Side</option> <option value="side-by-side">Side by Side</option>
</select> </select>
</label> </label>
</div>
<div class=" col-md-2 col-xs-12 col-15">
<label title="Show the file list summary before the diff">File Summary <label title="Show the file list summary before the diff">File Summary
<input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/> <input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/>
</label> </label>
</div>
<div class=" col-md-2 col-xs-12 col-15">
<label title="Level of matching for the comparison algorithm">Matching Type <label title="Level of matching for the comparison algorithm">Matching Type
<select class="options-label-value" id="diff-url-options-matching" name="matching"> <select class="options-label-value" id="diff-url-options-matching" name="matching">
<option value="lines">Lines</option> <option value="lines">Lines</option>
@ -124,17 +129,23 @@
<option value="none">None</option> <option value="none">None</option>
</select> </select>
</label> </label>
</div>
<div class=" col-md-2 col-xs-12 col-15">
<label title="Similarity threshold for the matching algorithm">Words Threshold <label title="Similarity threshold for the matching algorithm">Words Threshold
<input class="options-label-value" id="diff-url-options-match-words-threshold" type="number" <input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
name="matchWordsThreshold" value="0.25" step="0.05" name="matchWordsThreshold" value="0.25" step="0.05"
min="0" max="1"/> min="0" max="1"/>
</label> </label>
<label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max Comparisons </div>
<div class=" col-md-2 col-xs-12 col-15">
<label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max
Comparisons
<input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number" <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
name="matchingMaxComparisons" value="2500" name="matchingMaxComparisons" value="2500"
step="100" min="0"/> step="100" min="0"/>
</label> </label>
</div> </div>
</div>
<br> <br>
<div class="diff-url-wrapper"> <div class="diff-url-wrapper">
<input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/> <input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>

7
docs/url.js
View file

@ -528,7 +528,7 @@ $(document).ready(function() {
function draw(req) { function draw(req) {
if (!validateUrl(req.url)) { if (!validateUrl(req.url)) {
console.error("Invalid url provided!"); console.error('Invalid url provided!');
return; return;
} }
@ -554,9 +554,9 @@ $(document).ready(function() {
var diff2htmlUi = new Diff2HtmlUI({diff: data}); var diff2htmlUi = new Diff2HtmlUI({diff: data});
if (outputFormat === 'side-by-side') { if (outputFormat === 'side-by-side') {
$container.css({'width': '1400px'}); $container.css({'min-width': '1280px'});
} else { } else {
$container.css({'width': ''}); $container.css({'width': '980px'});
} }
diff2htmlUi.draw(container, { diff2htmlUi.draw(container, {
@ -584,7 +584,6 @@ $(document).ready(function() {
window.location.search = '?diff=' + url; window.location.search = '?diff=' + url;
} }
} }
}); });
},{"whatwg-fetch":1}]},{},[2]); },{"whatwg-fetch":1}]},{},[2]);

2
docs/url.min.js vendored
View file

File diff suppressed because one or more lines are too long

22
website/main.css
View file

@ -135,10 +135,6 @@
background: radial-gradient(ellipse at center, 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%)
} }
.container-overflow-wrap {
overflow: hidden
}
.hero { .hero {
position: relative; position: relative;
text-align: center; text-align: center;
@ -537,6 +533,10 @@ a:hover, a:focus {
user-select: none; user-select: none;
} }
.url-diff-container {
width: 980px;
}
.diff-url-wrapper { .diff-url-wrapper {
display: flex; display: flex;
width: 100%; width: 100%;
@ -559,15 +559,13 @@ a:hover, a:focus {
font-weight: normal; font-weight: normal;
} }
.diff-url-options-container {
display: flex;
}
.diff-url-options-container label {
flex: 1;
}
.diff-url-options-container label select, .diff-url-options-container label select,
.diff-url-options-container label input { .diff-url-options-container label input {
display: block; display: block;
} }
/* 15 columns */
.col-md- *.col-md-15 {
width: 20%;
}

4
website/templates/pages/url/url.js
View file

@ -158,9 +158,9 @@ $(document).ready(function() {
var diff2htmlUi = new Diff2HtmlUI({diff: data}); var diff2htmlUi = new Diff2HtmlUI({diff: data});
if (outputFormat === 'side-by-side') { if (outputFormat === 'side-by-side') {
$container.css({'width': '1400px'}); $container.css({'min-width': '1280px'});
} else { } else {
$container.css({'width': ''}); $container.css({'width': '980px'});
} }
diff2htmlUi.draw(container, { diff2htmlUi.draw(container, {

15
website/templates/pages/url/url.partial.html
View file

@ -11,16 +11,21 @@
with code syntax highlight and line similarity matching for better code reviews. with code syntax highlight and line similarity matching for better code reviews.
</p> </p>
<h2>Options:</h2> <h2>Options:</h2>
<div class="diff-url-options-container"> <div class="row">
<div class="col-md-2 col-xs-12 col-15">
<label title="Output format of the HTML, either line by line or side by side">Output Format <label title="Output format of the HTML, either line by line or side by side">Output Format
<select class="options-label-value" id="diff-url-options-output-format" name="outputFormat"> <select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
<option value="line-by-line" selected>Line by Line</option> <option value="line-by-line" selected>Line by Line</option>
<option value="side-by-side">Side by Side</option> <option value="side-by-side">Side by Side</option>
</select> </select>
</label> </label>
</div>
<div class=" col-md-2 col-xs-12 col-15">
<label title="Show the file list summary before the diff">File Summary <label title="Show the file list summary before the diff">File Summary
<input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/> <input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/>
</label> </label>
</div>
<div class=" col-md-2 col-xs-12 col-15">
<label title="Level of matching for the comparison algorithm">Matching Type <label title="Level of matching for the comparison algorithm">Matching Type
<select class="options-label-value" id="diff-url-options-matching" name="matching"> <select class="options-label-value" id="diff-url-options-matching" name="matching">
<option value="lines">Lines</option> <option value="lines">Lines</option>
@ -28,17 +33,23 @@
<option value="none">None</option> <option value="none">None</option>
</select> </select>
</label> </label>
</div>
<div class=" col-md-2 col-xs-12 col-15">
<label title="Similarity threshold for the matching algorithm">Words Threshold <label title="Similarity threshold for the matching algorithm">Words Threshold
<input class="options-label-value" id="diff-url-options-match-words-threshold" type="number" <input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
name="matchWordsThreshold" value="0.25" step="0.05" name="matchWordsThreshold" value="0.25" step="0.05"
min="0" max="1"/> min="0" max="1"/>
</label> </label>
<label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max Comparisons </div>
<div class=" col-md-2 col-xs-12 col-15">
<label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max
Comparisons
<input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number" <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
name="matchingMaxComparisons" value="2500" name="matchingMaxComparisons" value="2500"
step="100" min="0"/> step="100" min="0"/>
</label> </label>
</div> </div>
</div>
<br> <br>
<div class="diff-url-wrapper"> <div class="diff-url-wrapper">
<input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/> <input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>

2
website/templates/template.mustache
View file

@ -49,7 +49,7 @@
</script> </script>
</head> </head>
<body class="swag-line template-index"> <body class="swag-line template-index">
<div class="container-overflow-wrap"> <div>
<div class="container"> <div class="container">
<nav class="navbar navbar-default navbar-tall navbar-full" role="navigation"> <nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">