From e0752884eb0aec6a94ae055aab184b71ec469f4d Mon Sep 17 00:00:00 2001 From: "Heekyoung, Oh" Date: Fri, 28 Apr 2017 09:35:57 +0900 Subject: [PATCH] [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 --- public/src/css/style.css | 103 +++++++++--------------------- public/src/index.html | 30 ++++----- public/src/js/page/job.js | 4 +- public/src/js/widget/JobLog.js | 2 +- public/src/js/widget/JobTableEmptyItem.js | 4 +- public/src/js/widget/JobTableItem.js | 48 +++++++------- 6 files changed, 71 insertions(+), 120 deletions(-) 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 @@
- - - - - - - - - - - - - - - -
#StatusImageImage SizeUpdatedActionKSLog
+
+
+
#
+
Status
+
Image
+
Image Size
+
Updated
+
Action
+
KS
+
Log
+
+
+
+
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 = [ - '' + '
', + '
There is no data.
', + '
' ]; 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 = [ - '', - '<%= jobNum %>', - '', - 'Download', - '<%= jobImageSize %>', - '<%= jobUptime %>', - 'Cancel', - 'KS', - 'Log', - '' + '
', + '
<%= jobNum %>
', + '
', + '
Download
', + '
<%= jobImageSize %>
', + '
<%= jobUptime %>
', + '
Cancel
', + '
KS
', + '
Log
', + '
' ]; var strExtendedRow = [ - '', - '<%= jobNum %>', - '', - 'Download', - '<%= jobImageSize %>', - '<%= jobUptime %>', - 'Cancel', - 'KS', - 'Log', - '', - '', - '', - '
', - '
', - '', - '' + '
', + '
<%= jobNum %>
', + '
', + '
Download
', + '
<%= jobImageSize %>
', + '
<%= jobUptime %>
', + '
Cancel
', + '
KS
', + '
Log
', + '
', + '
', + '
' ]; var JOB_STATUS_INPROGRESS = 'INPROGRESS'; -- 2.7.4