Merge pull request #112 from rtfpessoa/fix-mobile-view

Fix mobile view
rtfpessoa · Oct 15, 2016 · 316ece4 · 316ece4
2 parents c2c253d + a6d119a
commit 316ece4
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 93 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -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">

diff --git a/docs/main.css b/docs/main.css
@@ -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%;
+}
diff --git a/docs/main.min.css b/docs/main.min.css
diff --git a/docs/url.html b/docs/url.html
@@ -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,33 +107,44 @@ <h1>Diff Prettifier <a href="#help">
           with code syntax highlight and line similarity matching for better code reviews.
         </p>
         <h2>Options:</h2>
-        <div class="diff-url-options-container">
-          <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>
-          <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>
-          <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>
-              <option value="words" selected>Words</option>
-              <option value="none">None</option>
-            </select>
-          </label>
-          <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
-            <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
-                   name="matchingMaxComparisons" value="2500"
-                   step="100" min="0"/>
-          </label>
+        <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>
+                <option value="words" selected>Words</option>
+                <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>
+          </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">

diff --git a/docs/url.js b/docs/url.js
@@ -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]);