External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-20 06:01:25 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fix dropdown alignment on the home view's graph

Browse Source
This commit is contained in:
gconsidine 2017-07-14 16:33:27 -04:00
parent ca38de09c3
commit 540c2ee95f
2 changed files with 72 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less
View File

@ -57,6 +57,15 @@
padding-right: 10px;
padding-left: 10px;
text-transform: uppercase;
display: inline-block;
vertical-align: middle;
height: 20px;
& > span {
display: inline-block;
vertical-align: middle;
line-height: 20px;
}
}
.DashboardGraphs-graph {
@ -80,17 +89,19 @@
}
.DashboardGraphs-filterDropdownText {
flex: initial;
background-color: @db-graph-per-dd-bg;
font-size: 10px;
text-transform: uppercase;
white-space: nowrap;
padding-right: 5px;
padding-left: 10px;
padding-left: 5px;
height: 20px;
border: 1px solid @b7grey;
border-radius: 5px;
transition: background-color 0.2s;
display: inline-block;
vertical-align: middle;
width: 100%;
}
.DashboardGraphs-filterDropdownText:hover {
@ -103,6 +114,7 @@
width: 20px;
padding-left:10px;
padding-right: 10px;
float: right;
}
.DashboardGraphs-filterDropdownItems {
@ -113,6 +125,7 @@
text-transform: uppercase;
cursor: pointer;
border-color: @d7grey;
min-width: 105px;
}
.DashboardGraphs-filterDropdownItems {
@ -125,11 +138,25 @@
.DashboardGraphs-jobTypeDropdown,
.DashboardGraphs-statusDropdown {
font-size: 10px;
display: inline-block;
padding-top:0px;
}
min-width: 105px;
width: inherit;
.DashboardGraphs-filterDropdownItems {
min-width: 0;
span {
height: 18px;
display: inline-block;
vertical-align: middle;
line-height: 18px;
float: left;
}
i {
height: 18px;
line-height: 18px;
display: inline-block;
vertical-align: middle;
}
}
.DashboardGraphs-statusFilters{
@ -169,10 +196,12 @@
.DashboardGraphs-filteringDropdowns {
display: inherit;
margin-left: 10px;
}
.DashboardGraphs-filterDropdownItems {
li > a {
text-align: left;
color: @default-interface-txt;
}
}
@ -183,18 +212,28 @@
margin-right: 0px;
}
.DashboardGraphs-filterDropdownItems {
left: 50%;
right: 35px;
}
.DashboardGraphs-filteringDropdowns {
float: left;
width: 100%;
margin-left: -10px;
margin-left: 0;
}
.DashboardGraphs-filterLabel {
margin-top: 10px;
width: 50%;
float:left;
padding-left: 0;
}
.DashboardGraphs-periodDropdown {
.DashboardGraphs-periodDropdown,
.DashboardGraphs-jobTypeDropdown,
.DashboardGraphs-statusDropdown {
margin-top: 10px;
width: 50%;
float: left;
}

32
awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js
View File

@ -122,9 +122,15 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, graphDataSe
// when the Period drop down filter is used, create a new graph based on the
$('.n').on("click", function(){
period = this.getAttribute("id");
$('#period-dropdown')
.replaceWith("<a id=\"period-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--period\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
"<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\n");
.replaceWith(`
<a id="period-dropdown" class="DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--period" role="button"
data-toggle="dropdown" data-target="#" href="/page.html">
<span>${this.text}</span>
<i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</a>`);
scope.$parent.isFailed = true;
scope.$parent.isSuccessful = true;
recreateGraph(period, job_type);
@ -133,8 +139,15 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, graphDataSe
//On click, update with new data
$('.m').on("click", function(){
job_type = this.getAttribute("id");
$('#type-dropdown').replaceWith("<a id=\"type-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--jobType\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
"<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\n");
$('#type-dropdown')
.replaceWith(`
<a id="type-dropdown" class="DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--jobType" role="button"
data-toggle="dropdown" data-target="#" href="/page.html">
<span>${this.text}</span>
<i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</a>`);
scope.$parent.isFailed = true;
scope.$parent.isSuccessful = true;
recreateGraph(period, job_type);
@ -142,8 +155,15 @@ function JobStatusGraph($window, adjustGraphSize, templateUrl, i18n, graphDataSe
$('.o').on('click', function() {
var job_status = this.getAttribute('id');
$('#status-dropdown').replaceWith("<a id=\"status-dropdown\" class=\"DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownText--status\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
"<i class=\"fa fa-angle-down DashboardGraphs-filterIcon\"></i>\n");
$('#status-dropdown')
.replaceWith(`
<a id="status-dropdown" class="DashboardGraphs-filterDropdownText DashboardGraphs-filterDropdownItems--status" role="button"
data-toggle="dropdown" data-target="#" href="/page.html">
<span>${this.text}</span>
<i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
</a>`);
scope.$broadcast("jobStatusChange", job_status);
});