Fixes from PR review: panel title alignment, cleanup stale code, add color alias for toggle button

This commit is contained in:
Jared Tabor 2016-03-02 11:54:06 -08:00
parent 78baabf676
commit 295c6b7db5
5 changed files with 39 additions and 36 deletions

View File

@ -202,7 +202,6 @@
}
#job_plays, #job_tasks {
// height: 150px;
overflow-y: auto;
overflow-x: none;
}
@ -319,10 +318,6 @@
text-overflow: ellipsis;
}
#tasks-table-detail {
// height: 150px;
}
#play-section {
.table-detail {
height: 150px;

View File

@ -12,6 +12,13 @@
height: 30px;
}
.JobDetail-expandContainer{
flex: 1;
margin: 0px;
line-height: 30px;
white-space: nowrap;
}
.JobDetail-panelHeaderText{
color: @default-interface-txt;
flex: 1 0 auto;
@ -94,7 +101,7 @@
.JobDetail-tableToggle.active{
background-color: @default-link;
border: 1px solid @default-link;
color: #eeeeee;
color: @toggle-selected-text;
}
.JobDetail-tableToggle--left{

View File

@ -842,7 +842,6 @@ export default
$('.overlay').hide();
$('#summary-button').hide();
$('#hide-summary-button').hide();
// $('#job-detail-container').css({ "width": "58.33333333%", "padding-right": "7px" });
$('#job-summary-container .job_well').css({
'box-shadow': 'none',
'height': 'auto'

View File

@ -4,14 +4,18 @@
<div id="job-detail-container" class="JobDetail-leftSide">
<div id="job-results-panel" class="JobDetail-resultsContainer Panel">
<div class="JobDetail-panelHeader">
<a class="JobDetail-panelHeaderText" ng-show="lessStatus" href="" ng-click="toggleLessStatus()">
RESULTS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
</a>
<a class="JobDetail-panelHeaderText" ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">
RESULTS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
</a>
<button id="submit-action" class="List-actionButton JobDetail-launchButton" data-placement="top" mode="all" ng-click="relaunchJob()" aw-tool-tip="Start a job using this template" data-original-title="" title=""><i class="fa fa-rocket"></i> </button>
<button id="delete-action" class="List-actionButton List-actionButton--delete JobDetail-launchButton" data-placement="top" ng-click="deleteJobTemplate(job_template.id, job_template.name)" aw-tool-tip="Delete template" data-original-title="" title=""><i class="fa fa-trash-o"></i> </button>
<div class="JobDetail-expandContainer">
<a class="JobDetail-panelHeaderText" ng-show="lessStatus" href="" ng-click="toggleLessStatus()">
RESULTS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
</a>
<a class="JobDetail-panelHeaderText" ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">
RESULTS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
</a>
</div>
<div class="JobDetail-actions">
<button id="submit-action" class="List-actionButton JobDetail-launchButton" data-placement="top" mode="all" ng-click="relaunchJob()" aw-tool-tip="Start a job using this template" data-original-title="" title=""><i class="fa fa-rocket"></i> </button>
<button id="delete-action" class="List-actionButton List-actionButton--delete JobDetail-launchButton" data-placement="top" ng-click="deleteJobTemplate(job_template.id, job_template.name)" aw-tool-tip="Delete template" data-original-title="" title=""><i class="fa fa-trash-o"></i> </button>
</div>
</div>
<div class="form-horizontal JobDetail-resultsDetails" role="form" id="job-status-form">
@ -150,12 +154,14 @@
<div id="job-detail-panel" class="JobDetail-resultsContainer Panel">
<div class="JobDetail-panelHeader">
<a class="JobDetail-panelHeaderText" ng-show="lessDetail" href="" ng-click="toggleLessDetail()">
DETAILS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
</a>
<a class="JobDetail-panelHeaderText" ng-show="!lessDetail" href="" ng-click="toggleLessDetail()">
DETAILS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
</a>
<div class="JobDetail-expandContainer">
<a class="JobDetail-panelHeaderText" ng-show="lessDetail" href="" ng-click="toggleLessDetail()">
DETAILS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
</a>
<a class="JobDetail-panelHeaderText" ng-show="!lessDetail" href="" ng-click="toggleLessDetail()">
DETAILS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
</a>
</div>
</div>
<div id="job-detail-details">
@ -362,13 +368,14 @@
</div>
<div class="JobDetail-panelHeader">
<a class="JobDetail-panelHeaderText" ng-show="lessEvents" href="" ng-click="toggleLessEvents()">
EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-left"></i>
</a>
<a class="JobDetail-panelHeaderText" ng-show="!lessEvents" href="" ng-click="toggleLessEvents()">
EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-down"></i>
</a>
<div class="JobDetail-expandContainer">
<a class="JobDetail-panelHeaderText" ng-show="lessEvents" href="" ng-click="toggleLessEvents()">
EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-left"></i>
</a>
<a class="JobDetail-panelHeaderText" ng-show="!lessEvents" href="" ng-click="toggleLessEvents()">
EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-down"></i>
</a>
</div>
</div>
<div id="events-summary">
<div id="hosts-summary-section" class="section">
@ -387,14 +394,6 @@
</div>
</div>
</div>
<!-- <div class="row legend-row">
<div class="col-md-12">
<div class="legend"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
</div>
</div> -->
<div class="table-header">
<table class="table table-condensed">
<thead>

View File

@ -161,6 +161,9 @@
@db-graph-axis: @default-border;
@db-graph-axis-label: @default-interface-txt;
//job detail
@toggle-selected-text: #eeeeee;
// panel
@panel-bg: @default-bg;
@panel-border: @default-border;