- bug fixed.
- re-arranged the table-cell items.
- and show resposively
Change-Id: I7eb271ada101f4d40479463d1e764012ae0158e5
Signed-off-by: Heekyoung, Oh <heekyoung.oh@samsung.com>
}
.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);
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
- line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
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;
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 {
<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>
function _updateView (arrJobs) {
logger.info('_updateView');
- var targetTableBody = $('#tic-job-table > tbody');
+ var targetTableBody = $('#tic-job-table-body');
targetTableBody.empty();
var targetId;
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);
});
}
// 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')
'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 () {
'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';