Update result-column layout

jojoee · Apr 3, 2016 · 9e70d65 · 9e70d65
1 parent d0d6ec3
commit 9e70d65
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/css/style.css b/css/style.css
@@ -86,6 +86,9 @@ body {
         width: 5%;
         color: #fff;
         background-color: #b10e88; }
+      #second-screen .tbl-content td:last-child > .result {
+        max-height: 240px;
+        overflow: hidden; }
 
 .result-warning {
   background-color: orange !important; }

diff --git a/js/main.js b/js/main.js
@@ -186,24 +186,38 @@ function issuePopup() {
     $outputBody.innerHTML = '';
   }
 
-  function addToOutputTable(no, url, result) {
+  function addToOutputTable(no, url, result, isUrl) {
     var html = '<tr id="url-' + no + '">';
     html += '<td>' + no + '</td>';
-    html += '<td>' + url + '</td>';
-    html += '<td>' + result + '</td>';
+
+    if (isUrl) {
+      html += '<td><a href="' + url + '" target="_blank">' + url + '</td>';
+
+    } else {
+      html += '<td>' + url + '</td>';  
+    }
+
+    html += '<td><div class="result">' + result + '</div></td>';
     html += '</tr>';
 
     $outputBody.innerHTML += html;
   }
 
+  function addUrlToOutputTable(no, url, result) {
+    addToOutputTable(no, url, result, true);
+  }
+
   function updateOutputTable(no, statusCssClass, result) {
     var $e = document.getElementById('url-' + no);
     var $columns = $e.getElementsByTagName('td');
     var $status = $columns[0];
     var $result = $columns[2];
 
     $status.classList.add(statusCssClass);
-    $result.innerHTML = result;
+
+    // this line is not good, need improvements
+    // seem duplicate with line 200
+    $result.innerHTML = '<div class="result">' + result + '</div>';
   }
 
   /*================================================================ APP
@@ -273,7 +287,7 @@ function issuePopup() {
       nUrls++;
 
       if (isURL(url)) {
-        addToOutputTable(i, url, '');
+        addUrlToOutputTable(i, url, '');
         fetchUrl(i, urls[i]);
 
       } else {

diff --git a/sass/style.scss b/sass/style.scss
@@ -158,6 +158,14 @@ body {
         color: $white;
         background-color: $accent-color2;
       }
+
+      &:last-child {
+
+        > .result {
+          max-height: 240px;
+          overflow: hidden;
+        }
+      }
     }
   }
 }