From: Heekyoung, Oh <heekyoung.oh@samsung.com>
Date: Fri, 28 Apr 2017 00:35:57 +0000 (+0900)
Subject: [TIC-Web] bug fixed. re-arranged the table-cell items.
X-Git-Tag: v20170428~3
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=e0752884eb0aec6a94ae055aab184b71ec469f4d;p=archive%2F20170607%2Ftools%2Ftic.git

[TIC-Web] bug fixed. re-arranged the table-cell items.

- bug fixed.
- re-arranged the table-cell items.
- and show resposively

Change-Id: I7eb271ada101f4d40479463d1e764012ae0158e5
Signed-off-by: Heekyoung, Oh <heekyoung.oh@samsung.com>
---

diff --git a/public/src/css/style.css b/public/src/css/style.css
index 8da8c7a..c1cca7f 100644
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -172,27 +172,22 @@ body {
 }
 .job-status-ready {
     font-size: 2vh;
-    display: table-cell;
 }
 .job-status-done {
     font-size: 2vh;
     color: #337ab7;
-    display: table-cell;
 }
 .job-status-cancel {
     font-size: 2vh;
     color: #2d2222;
-    display: table-cell;
 }
 .job-status-failed {
     font-size: 2vh;
     color: #e05151;
-    display: table-cell;
 }
 .job-status-inprogress {
     font-size: 2vh;
     color: #2aa730;
-    display: table-cell;
 }
 #tic-job-list {
     height: calc(100vh - 285px);
@@ -214,7 +209,6 @@ body {
     padding: 3px 7px;
     font-size: 12px;
     font-weight: bold;
-    line-height: 1;
     color: #fff;
     text-align: center;
     white-space: nowrap;
@@ -271,59 +265,52 @@ body {
 	100% { opacity: 1.0 }
 }
 
-.empty_job_table_row > td {
-    height: 40px;
+.empty_job_table_row {
+    padding: 8px 0px 8px 0px;
+    text-align: left;
     overflow: hidden;
+    margin: 0px;
 }
 .job_table_row {
     width: 100%;
+    margin: 0px;
+    padding: 8px 0px 8px 0px;
+    text-align: center;
+    text-overflow: ellipsis;
+    display: inline-block;
 }
 .extended_job_table_row {
     border: 1px solid #eee;
     border-radius: 3px;
-    line-height: 12vh;
-    overflow: scroll;
-    font-size: 12px;
     background-color: rgba(13, 19, 14, 0.71);
     color: #ddd;
+    font-size: 12px;
     text-align: left;
-}
-td.extended_job_table_container > div {
-    width: 100%;
-    height: 100%;
-    text-align: left;
+    text-overflow: ellipsis;
     overflow: auto;
     white-space: pre;
-    font-size: 1em;
-    text-overflow: ellipsis;
-}
-td.extended_job_table_container {
+    width: 100%;
     height: 13vh;
-}
-tr.extended_job_table_row:hover {
-    background-color: rgba(13, 19, 14, 0.71);
-}
-tr.extended_job_table_row:hover td {
-    background-color: rgba(13, 19, 14, 0.71);
+    margin: 0px;
+    padding: 4px;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 .tic-job-table {
     height: calc(100vh - 285px);
     width: 100%;
     text-align: center;
-    table-layout: fixed;
-}
-.tic-job-table thead {
-    width: 100%;
-    min-width: 480px;
-    display: block;
 }
-.tic-job-table tbody {
-    min-width: 480px;
-    display: block;
+.tic-job-table-body {
     overflow-y: auto;
     overflow-x: hidden;
     height: calc(100vh - 323px);
 }
+.tic-job-table-body, .tic-job-table-header {
+    width: 100%;
+    min-width: 480px;
+    display: block;
+}
 .tic-job-table ::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
@@ -333,52 +320,20 @@ tr.extended_job_table_row:hover td {
   background-color: rgb(193, 193, 193);
   -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
 }
-.tic-job-table th {
-    height: 38px;
+.tic-job-table-header {
+    margin: 0px;
+    padding: 7px 0px 7px 0px;
     white-space: nowrap;
-    vertical-align: middle;
     background-color: rgba(51, 122, 183, 0.12);
     color: steelblue;
-}
-.tic-job-table th, .tic-job-table td {
     width: 100%;
     text-overflow: ellipsis;
     text-align: center;
+    font-weight: bold;
 }
-.tic-job-table th:nth-child(1),
-.tic-job-table td:nth-child(1) {
-    width: 71px;
-    min-width: 71px;
-}
-.tic-job-table th:nth-child(2),
-.tic-job-table td:nth-child(2) {
-    width: 100px;
-    min-width: 100px;
-}
-.tic-job-table th:nth-child(3),
-.tic-job-table td:nth-child(3) {
-    width: 100px;
-    min-width: 100px;
-}
-.tic-job-table th:nth-child(4),
-.tic-job-table td:nth-child(4) {
-    width: 180px;
-    min-width: 180px;
-}
-.tic-job-table th:nth-child(5),
-.tic-job-table td:nth-child(5) {
-    width: 300px;
-    min-width: 300px;
-}
-.tic-job-table th:nth-child(6),
-.tic-job-table td:nth-child(6) {
-    width: 120px;
-    min-width: 120px;
-}
-.tic-job-table th:nth-child(7),
-.tic-job-table td:nth-child(7) {
-    width: 120px;
-    min-width: 120px;
+.tic-job-table-body {
+    text-align: center;
+    margin: 0px;
 }
 
 #tic-job-list-pagination {
diff --git a/public/src/index.html b/public/src/index.html
index 119b0e6..6434e13 100644
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -247,22 +247,20 @@
                                 <div id="tic-job-list">
                                     <div id="tic-job-list-content">
                                         <div>
-                                            <table class="table table-hover table-bordered ui-responsive tic-job-table" id="tic-job-table">
-                                                <thead>
-                                                    <tr class="filters text-center">
-                                                        <th>#</th>
-                                                        <th>Status</th>
-                                                        <th>Image</th>
-                                                        <th>Image Size</th>
-                                                        <th>Updated</th>
-                                                        <th>Action</th>
-                                                        <th>KS</th>
-                                                        <th>Log</th>
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                </tbody>
-                                            </table>
+                                            <div class="container tic-job-table" id="tic-job-table">
+                                                <div class="row tic-job-table-header">
+                                                    <div class="col-md-1 col-sm-1">#</div>
+                                                    <div class="col-md-1 col-sm-1">Status</div>
+                                                    <div class="col-md-2 col-sm-2">Image</div>
+                                                    <div class="col-md-1 col-sm-1">Image Size</div>
+                                                    <div class="col-md-3 col-sm-3">Updated</div>
+                                                    <div class="col-md-2 col-sm-2">Action</div>
+                                                    <div class="col-md-1 col-sm-1">KS</div>
+                                                    <div class="col-md-1 col-sm-1">Log</div>
+                                                </div>
+                                                <div class="row tic-job-table-body" id="tic-job-table-body">
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
diff --git a/public/src/js/page/job.js b/public/src/js/page/job.js
index 9d978ff..095fd96 100644
--- a/public/src/js/page/job.js
+++ b/public/src/js/page/job.js
@@ -78,7 +78,7 @@ define([
 
         function _updateView (arrJobs) {
             logger.info('_updateView');
-            var targetTableBody = $('#tic-job-table > tbody');
+            var targetTableBody = $('#tic-job-table-body');
             targetTableBody.empty();
             var targetId;
 
@@ -91,7 +91,7 @@ define([
                     if (value.getJobStatus() === JOB_STATUS_INPROGRESS) {
                         Util.POST(AppConfig.EVENT.JOB.JOB_READ_LOG + value.getJobId())
                         .then(function (line) {
-                            targetId = '#extended_job_table_row_' + value.getJobId() + ' > td > div';
+                            targetId = '#extended_job_table_row_' + value.getJobId();
                             $(targetId).append(line);
                         });
                     }
diff --git a/public/src/js/widget/JobLog.js b/public/src/js/widget/JobLog.js
index 1a3d349..3c4851c 100644
--- a/public/src/js/widget/JobLog.js
+++ b/public/src/js/widget/JobLog.js
@@ -45,7 +45,7 @@ define([
 
         // table extended row
         logViewId = 'extended_job_table_row_' + this.jobId;
-        logViewElem = $('[id='+logViewId+'] > td > div');
+        logViewElem = $('[id='+logViewId+']');
         logViewElem.append(this.template);
         logViewElem.animate({
             scrollTop: logViewElem.prop('scrollHeight')
diff --git a/public/src/js/widget/JobTableEmptyItem.js b/public/src/js/widget/JobTableEmptyItem.js
index 7fd95fc..390c999 100644
--- a/public/src/js/widget/JobTableEmptyItem.js
+++ b/public/src/js/widget/JobTableEmptyItem.js
@@ -26,7 +26,9 @@ define([
     'use strict';
 
     var strEmptyRow = [
-        '<tr id="job_table_row_<%= rowNum %>" class="empty_job_table_row"></tr>'
+        '<div id="job_table_row_<%= rowNum %>" class="empty_job_table_row row">',
+            '<div class="col-lg-12 col-md-12 col-sm-12">There is no data.</div>',
+        '</div>'
     ];
 
     var JobTableEmptyItem = function () {
diff --git a/public/src/js/widget/JobTableItem.js b/public/src/js/widget/JobTableItem.js
index b7ff0bf..7707c67 100644
--- a/public/src/js/widget/JobTableItem.js
+++ b/public/src/js/widget/JobTableItem.js
@@ -26,35 +26,31 @@ define([
     'use strict';
 
     var strRow = [
-        '<tr id="job_table_row_<%= jobNum %>" class="job_table_row">',
-            '<td><%= jobNum %></td>',
-            '<td class="<%= classJobStatus %>" title="<%= jobStatus %>"></td>',
-            '<td><a class="tic-job-list-btn btndownload <%= classJobImageDownload %>" href="<%= jobImagePath %>" title="<%= jobImageName %>">Download</a></td>',
-            '<td><%= jobImageSize %></td>',
-            '<td><%= jobUptime %></td>',
-            '<td><a class="tic-job-list-btn btncancel <%= classJobCancel %>" data-jobid="<%= jobNum %>" data-jobpid="<%= jobPid %>" data-jobstatus="<%= jobStatusValue %>" title="Cancel">Cancel</a></td>',
-            '<td><a class="tic-job-list-btn <%= classJobKsPath %>" href="<%= jobKsPath %>" title="Kickstarter File">KS</a></td>',
-            '<td><a class="tic-job-list-btn btnbiglog" data-link="<%= jobLogPath %>" data-jobid="<%= jobNum %>" title="Log">Log</a></td>',
-        '</tr>'
+        '<div id="job_table_row_<%= jobNum %>" class="row job_table_row">',
+            '<div class="col-md-1 col-sm-1"><%= jobNum %></div>',
+            '<div class="col-md-1 col-sm-1 <%= classJobStatus %>" title="<%= jobStatus %>"></div>',
+            '<div class="col-md-2 col-sm-2"><a class="tic-job-list-btn btndownload <%= classJobImageDownload %>" href="<%= jobImagePath %>" title="<%= jobImageName %>">Download</a></div>',
+            '<div class="col-md-1 col-sm-1"><%= jobImageSize %></div>',
+            '<div class="col-md-3 col-sm-3"><%= jobUptime %></div>',
+            '<div class="col-md-2 col-sm-2"><a class="tic-job-list-btn btncancel <%= classJobCancel %>" data-jobid="<%= jobNum %>" data-jobpid="<%= jobPid %>" data-jobstatus="<%= jobStatusValue %>" title="Cancel">Cancel</a></div>',
+            '<div class="col-md-1 col-sm-1"><a class="tic-job-list-btn <%= classJobKsPath %>" href="<%= jobKsPath %>" title="Kickstarter File">KS</a></div>',
+            '<div class="col-md-1 col-sm-1"><a class="tic-job-list-btn btnbiglog" data-link="<%= jobLogPath %>" data-jobid="<%= jobNum %>" title="Log">Log</a></div>',
+        '</div>'
     ];
 
     var strExtendedRow = [
-        '<tr id="job_table_row_<%= jobNum %>">',
-            '<td><%= jobNum %></td>',
-            '<td class="<%= classJobStatus %>" title="<%= jobStatus %>"></td>',
-            '<td><a class="tic-job-list-btn btndownload btnnotactive">Download</a></td>',
-            '<td><%= jobImageSize %></td>',
-            '<td><%= jobUptime %></td>',
-            '<td><a class="tic-job-list-btn btncancel <%= classJobCancel %>" data-jobid="<%= jobNum %>" data-jobpid="<%= jobPid %>" data-jobstatus="<%= jobStatusValue %>" title="Cancel">Cancel</a></td>',
-            '<td><a class="tic-job-list-btn <%= classJobKsPath %>" href="<%= jobKsPath %>" title="Kickstarter File">KS</a></td>',
-            '<td><a class="tic-job-list-btn btnbiglog btnbiglogex" data-link="<%= jobLogPath %>" data-jobid="<%= jobNum %>" title="Log">Log</a></td>',
-        '</tr>',
-        '<tr id="extended_job_table_row_<%= jobNum %>" class="extended_job_table_row">',
-            '<td colspan="10" class="extended_job_table_container">',
-                '<div>',
-                '</div>',
-            '</td>',
-        '</tr>'
+        '<div id="job_table_row_<%= jobNum %>" class="row job_table_row">',
+            '<div class="col-md-1 col-sm-1"><%= jobNum %></div>',
+            '<div class="col-md-1 col-sm-1 <%= classJobStatus %>" title="<%= jobStatus %>"></div>',
+            '<div class="col-md-2 col-sm-2"><a class="tic-job-list-btn btndownload btnnotactive">Download</a></div>',
+            '<div class="col-md-1 col-sm-1"><%= jobImageSize %></div>',
+            '<div class="col-md-3 col-sm-3"><%= jobUptime %></div>',
+            '<div class="col-md-2 col-sm-2"><a class="tic-job-list-btn btncancel <%= classJobCancel %>" data-jobid="<%= jobNum %>" data-jobpid="<%= jobPid %>" data-jobstatus="<%= jobStatusValue %>" title="Cancel">Cancel</a></div>',
+            '<div class="col-md-1 col-sm-1"><a class="tic-job-list-btn <%= classJobKsPath %>" href="<%= jobKsPath %>" title="Kickstarter File">KS</a></div>',
+            '<div class="col-md-1 col-sm-1"><a class="tic-job-list-btn btnbiglog btnbiglogex" data-link="<%= jobLogPath %>" data-jobid="<%= jobNum %>" title="Log">Log</a></div>',
+        '</div>',
+        '<div id="extended_job_table_row_<%= jobNum %>" class="row extended_job_table_row">',
+        '</div>'
     ];
 
     var JOB_STATUS_INPROGRESS = 'INPROGRESS';