Fix mobile view
This commit is contained in:
Rodrigo Fernandes
parent
c2c253d3e3
commit
a6d119ac81
10 changed files with 106 additions and 93 deletions
|
|
@ -45,7 +45,7 @@
|
|||
</script>
|
||||
</head>
|
||||
<body class="swag-line template-index">
|
||||
<div class="container-overflow-wrap">
|
||||
<div>
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">
|
||||
|
|
|
|||
|
|
@ -136,10 +136,6 @@
|
|||
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 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
|
@ -538,6 +534,10 @@ a:hover, a:focus {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.url-diff-container {
|
||||
width: 980px;
|
||||
}
|
||||
|
||||
.diff-url-wrapper {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -564,19 +564,13 @@ a:hover, a:focus {
|
|||
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 input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 15 columns */
|
||||
|
||||
.col-md- *.col-md-15 {
|
||||
width: 20%;
|
||||
}
|
||||
|
|
|
|||
2
docs/main.min.css
vendored
2
docs/main.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -52,7 +52,7 @@
|
|||
</script>
|
||||
</head>
|
||||
<body class="swag-line template-index">
|
||||
<div class="container-overflow-wrap">
|
||||
<div>
|
||||
|
||||
<div class="container">
|
||||
<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.
|
||||
</p>
|
||||
<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
|
||||
<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="side-by-side">Side by Side</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class=" col-md-2 col-xs-12 col-15">
|
||||
<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/>
|
||||
</label>
|
||||
</div>
|
||||
<div class=" col-md-2 col-xs-12 col-15">
|
||||
<label title="Level of matching for the comparison algorithm">Matching Type
|
||||
<select class="options-label-value" id="diff-url-options-matching" name="matching">
|
||||
<option value="lines">Lines</option>
|
||||
|
|
@ -124,17 +129,23 @@
|
|||
<option value="none">None</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class=" col-md-2 col-xs-12 col-15">
|
||||
<label title="Similarity threshold for the matching algorithm">Words Threshold
|
||||
<input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
|
||||
name="matchWordsThreshold" value="0.25" step="0.05"
|
||||
min="0" max="1"/>
|
||||
</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"
|
||||
name="matchingMaxComparisons" value="2500"
|
||||
step="100" min="0"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="diff-url-wrapper">
|
||||
<input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
|
||||
|
|
|
|||
|
|
@ -528,7 +528,7 @@ $(document).ready(function() {
|
|||
|
||||
function draw(req) {
|
||||
if (!validateUrl(req.url)) {
|
||||
console.error("Invalid url provided!");
|
||||
console.error('Invalid url provided!');
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -554,9 +554,9 @@ $(document).ready(function() {
|
|||
var diff2htmlUi = new Diff2HtmlUI({diff: data});
|
||||
|
||||
if (outputFormat === 'side-by-side') {
|
||||
$container.css({'width': '1400px'});
|
||||
$container.css({'min-width': '1280px'});
|
||||
} else {
|
||||
$container.css({'width': ''});
|
||||
$container.css({'width': '980px'});
|
||||
}
|
||||
|
||||
diff2htmlUi.draw(container, {
|
||||
|
|
@ -584,7 +584,6 @@ $(document).ready(function() {
|
|||
window.location.search = '?diff=' + url;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
},{"whatwg-fetch":1}]},{},[2]);
|
||||
|
|
|
|||
2
docs/url.min.js
vendored
2
docs/url.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -135,10 +135,6 @@
|
|||
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 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
|
@ -537,6 +533,10 @@ a:hover, a:focus {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.url-diff-container {
|
||||
width: 980px;
|
||||
}
|
||||
|
||||
.diff-url-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -559,15 +559,13 @@ a:hover, a:focus {
|
|||
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 input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 15 columns */
|
||||
|
||||
.col-md- *.col-md-15 {
|
||||
width: 20%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,9 +158,9 @@ $(document).ready(function() {
|
|||
var diff2htmlUi = new Diff2HtmlUI({diff: data});
|
||||
|
||||
if (outputFormat === 'side-by-side') {
|
||||
$container.css({'width': '1400px'});
|
||||
$container.css({'min-width': '1280px'});
|
||||
} else {
|
||||
$container.css({'width': ''});
|
||||
$container.css({'width': '980px'});
|
||||
}
|
||||
|
||||
diff2htmlUi.draw(container, {
|
||||
|
|
|
|||
|
|
@ -11,16 +11,21 @@
|
|||
with code syntax highlight and line similarity matching for better code reviews.
|
||||
</p>
|
||||
<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
|
||||
<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="side-by-side">Side by Side</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class=" col-md-2 col-xs-12 col-15">
|
||||
<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/>
|
||||
</label>
|
||||
</div>
|
||||
<div class=" col-md-2 col-xs-12 col-15">
|
||||
<label title="Level of matching for the comparison algorithm">Matching Type
|
||||
<select class="options-label-value" id="diff-url-options-matching" name="matching">
|
||||
<option value="lines">Lines</option>
|
||||
|
|
@ -28,17 +33,23 @@
|
|||
<option value="none">None</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class=" col-md-2 col-xs-12 col-15">
|
||||
<label title="Similarity threshold for the matching algorithm">Words Threshold
|
||||
<input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
|
||||
name="matchWordsThreshold" value="0.25" step="0.05"
|
||||
min="0" max="1"/>
|
||||
</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"
|
||||
name="matchingMaxComparisons" value="2500"
|
||||
step="100" min="0"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="diff-url-wrapper">
|
||||
<input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
</script>
|
||||
</head>
|
||||
<body class="swag-line template-index">
|
||||
<div class="container-overflow-wrap">
|
||||
<div>
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">
|
||||
|
|
|
|||
Loading…
Reference in a new issue