mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 02:50:02 -03:30
2.0 style changes
More work on status area of job detail page. It now collapses perfectly as viewport size shrinks.
This commit is contained in:
Chris Houseknecht
parent
6930057d32
commit
5ee176e451
@ -530,7 +530,6 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
|
||||
$('#tasks-table-detail').mCustomScrollbar("update");
|
||||
$('#hosts-table-detail').height(150);
|
||||
$('#hosts-table-detail').mCustomScrollbar("update");
|
||||
//height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height();
|
||||
height = $(window).height() - $('#main-menu-container .navbar').outerHeight();
|
||||
if (height > 15) {
|
||||
// there's a bunch of white space at the bottom, let's use it
|
||||
|
||||
@ -136,26 +136,33 @@
|
||||
|
||||
#job-status-form {
|
||||
label {
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
.control-label {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
padding-left: 15px;
|
||||
}
|
||||
hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
.more-or-less {
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#started-time,
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
display: inline-block;
|
||||
}
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -247,10 +254,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
#search_all_hosts_name {
|
||||
font-size: 14px;
|
||||
padding-left: 3px;
|
||||
padding-right: 20px;
|
||||
#summary-search-section {
|
||||
.remove-left-padding {
|
||||
padding-left: 0;
|
||||
}
|
||||
label {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 6px;
|
||||
}
|
||||
#search_all_hosts_name {
|
||||
width: 100%;
|
||||
padding-left: 3px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#event-help-link {
|
||||
@ -367,9 +386,20 @@ svg text.percent{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#job-status-form .more-or-less {
|
||||
text-align: left;
|
||||
#job-detail-container {
|
||||
#job-status-form {
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
display: block;
|
||||
}
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,56 +20,54 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-horizontal" id="job-status-form">
|
||||
<div class="form-horizontal" role="form" id="job-status-form">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-md-1 col-sm-2 control-label">Status</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<label class="col-md-2 col-sm-2 col-xs-3 control-label">Status</label>
|
||||
<div class="col-md-10 col-sm-10 col-xs-9">
|
||||
<i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }} {{ job_status.explanation }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-md-1 col-sm-2 control-label">Started</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<span ng-show="job_status.started">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</span>
|
||||
<span ng-show="job_status.finished" id="finished-time">Finished {{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}</span>
|
||||
<span ng-show="job_status.finished" id="elapsed-time">Elapsed {{ job_status.elapsed }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="lessStatus">
|
||||
<div class="col-md-1 col-sm-2 more-or-less">
|
||||
<a href="" ng-click="toggleLessStatus()">more...</a>
|
||||
<label class="col-md-2 col-sm-2 col-xs-3 control-label">Started</label>
|
||||
<div class="col-md-10 col-sm-10 col-xs-9">
|
||||
<div ng-show="job_status.started" id="started-time">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</div>
|
||||
<div ng-show="job_status.finished" id="finished-time">Finished {{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}</div>
|
||||
<div ng-show="job_status.finished" id="elapsed-time">Elapsed {{ job_status.elapsed }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-show="!lessStatus">
|
||||
<label class="col-md-1 col-sm-2 control-label">Template</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<label class="col-md-2 col-sm-2 col-xs-3 control-label">Template</label>
|
||||
<div class="col-md-10 col-sm-10 col-xs-9">
|
||||
<a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-show="!lessStatus">
|
||||
<label class="col-md-1 col-sm-2 control-label">Project</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<label class="col-md-2 col-sm-2 col-xs-3 control-label">Project</label>
|
||||
<div class="col-md-10 col-sm-10 col-xs-9">
|
||||
<a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-show="!lessStatus">
|
||||
<label class="col-md-1 col-sm-2 control-label">Inventory</label>
|
||||
<div class="col-md-11 col-sm-10">
|
||||
<label class="col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
|
||||
<div class="col-md-10 col-sm-10 col-xs-9">
|
||||
<a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="!lessStatus">
|
||||
<div class="col-md-1 col-sm-2 more-or-less">
|
||||
<a href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 more-or-less">
|
||||
<a ng-show="lessStatus" href="" ng-click="toggleLessStatus()">more...</a>
|
||||
<a ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="job-detail-tables">
|
||||
@ -179,33 +177,36 @@
|
||||
<div id="hide-summary-button" style="display: hidden;">
|
||||
<a href="" class="btn btn-xs btn-primary" ng-click="toggleSummary('hide')" aw-tool-tip="Hide summary" data-placement="top"><i class="fa fa-arrow-circle-right fa-lg"></i></a>
|
||||
</div>
|
||||
|
||||
<div id="summary-search-section" class="section">
|
||||
<div class="header">
|
||||
<div class="title">Filter Hosts</div>
|
||||
<div class="title">Filter</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
|
||||
<form class="form-inline" id="job-filter-form">
|
||||
<div class="col-sm-7 col-xs-7 remove-left-padding">
|
||||
<div style="position:relative;">
|
||||
<input type="text" class="input-sm form-control" id="search_all_hosts_name" ng-model="search_all_hosts_name"
|
||||
placeholder="Host Name" ng-disabled="searchAllDisabled" ng-keypress="allHostNameKeyPress($event)" />
|
||||
placeholder="Host Name" ng-disabled="searchAllDisabled" ng-keypress="allHostNameKeyPress($event)" />
|
||||
<div id="search-all-input-icons">
|
||||
<a class="search-icon" ng-show="searchAllHostsEnabled" ng-click="searchAllByHost()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="!searchAllHostsEnabled" ng-click="search_all_hosts_name=''; searchAllByHost()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
|
||||
<div style="padding-top: 5px;">
|
||||
<label class="small-label">Show</label>
|
||||
<div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
|
||||
<button class="btn btn-xs btn-primary active">All</button>
|
||||
<button class="btn btn-xs btn-default">Failed</button>
|
||||
</div>
|
||||
<div class="col-sm-5 col-xs-5 remove-left-padding">
|
||||
<label>Status</label>
|
||||
<div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
|
||||
<button class="btn btn-xs btn-primary active">All</button>
|
||||
<button class="btn btn-xs btn-default">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style="display:block; clear:both; width:100%; height:1px; margin-top:55px; margin-bottom:20px;">
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div id="hosts-summary-section" class="section job_summary">
|
||||
<div class="header">
|
||||
<div class="title">Host Summary</div>
|
||||
@ -215,8 +216,7 @@
|
||||
<div class="table-header">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Host</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Completed Tasks
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Completed Tasks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hosts-summary-table" class="table-detail" aw-custom-scroll data-on-total-scroll="HostSummaryOnTotalScroll"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user