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

View File

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

View File

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

View File

@@ -4,14 +4,18 @@
<div id="job-detail-container" class="JobDetail-leftSide"> <div id="job-detail-container" class="JobDetail-leftSide">
<div id="job-results-panel" class="JobDetail-resultsContainer Panel"> <div id="job-results-panel" class="JobDetail-resultsContainer Panel">
<div class="JobDetail-panelHeader"> <div class="JobDetail-panelHeader">
<a class="JobDetail-panelHeaderText" ng-show="lessStatus" href="" ng-click="toggleLessStatus()"> <div class="JobDetail-expandContainer">
RESULTS<i class="JobDetail-expandArrow fa fa-caret-left"></i> <a class="JobDetail-panelHeaderText" ng-show="lessStatus" href="" ng-click="toggleLessStatus()">
</a> RESULTS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
<a class="JobDetail-panelHeaderText" ng-show="!lessStatus" href="" ng-click="toggleLessStatus()"> </a>
RESULTS<i class="JobDetail-expandArrow fa fa-caret-down"></i> <a class="JobDetail-panelHeaderText" ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">
</a> RESULTS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
<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> </a>
<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 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>
<div class="form-horizontal JobDetail-resultsDetails" role="form" id="job-status-form"> <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 id="job-detail-panel" class="JobDetail-resultsContainer Panel">
<div class="JobDetail-panelHeader"> <div class="JobDetail-panelHeader">
<a class="JobDetail-panelHeaderText" ng-show="lessDetail" href="" ng-click="toggleLessDetail()"> <div class="JobDetail-expandContainer">
DETAILS<i class="JobDetail-expandArrow fa fa-caret-left"></i> <a class="JobDetail-panelHeaderText" ng-show="lessDetail" href="" ng-click="toggleLessDetail()">
</a> DETAILS<i class="JobDetail-expandArrow fa fa-caret-left"></i>
<a class="JobDetail-panelHeaderText" ng-show="!lessDetail" href="" ng-click="toggleLessDetail()"> </a>
DETAILS<i class="JobDetail-expandArrow fa fa-caret-down"></i> <a class="JobDetail-panelHeaderText" ng-show="!lessDetail" href="" ng-click="toggleLessDetail()">
</a> DETAILS<i class="JobDetail-expandArrow fa fa-caret-down"></i>
</a>
</div>
</div> </div>
<div id="job-detail-details"> <div id="job-detail-details">
@@ -362,13 +368,14 @@
</div> </div>
<div class="JobDetail-panelHeader"> <div class="JobDetail-panelHeader">
<a class="JobDetail-panelHeaderText" ng-show="lessEvents" href="" ng-click="toggleLessEvents()"> <div class="JobDetail-expandContainer">
EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-left"></i> <a class="JobDetail-panelHeaderText" ng-show="lessEvents" href="" ng-click="toggleLessEvents()">
</a> EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-left"></i>
<a class="JobDetail-panelHeaderText" ng-show="!lessEvents" href="" ng-click="toggleLessEvents()"> </a>
EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-down"></i> <a class="JobDetail-panelHeaderText" ng-show="!lessEvents" href="" ng-click="toggleLessEvents()">
</a> EVENT SUMMARY<i class="JobDetail-expandArrow fa fa-caret-down"></i>
</a>
</div>
</div> </div>
<div id="events-summary"> <div id="events-summary">
<div id="hosts-summary-section" class="section"> <div id="hosts-summary-section" class="section">
@@ -387,14 +394,6 @@
</div> </div>
</div> </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"> <div class="table-header">
<table class="table table-condensed"> <table class="table table-condensed">
<thead> <thead>

View File

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