From 540c2ee95f761a8c377743faea0799601b3935ae Mon Sep 17 00:00:00 2001 From: gconsidine Date: Fri, 14 Jul 2017 16:33:27 -0400 Subject: [PATCH 1/3] Fix dropdown alignment on the home view's graph --- .../graphs/dashboard-graphs.block.less | 53 ++++++++++++++++--- .../job-status/job-status-graph.directive.js | 32 ++++++++--- 2 files changed, 72 insertions(+), 13 deletions(-) diff --git a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less index 3f18d18ae9..60a4715990 100644 --- a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less +++ b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less @@ -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; } diff --git a/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js b/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js index 1d8b1c980c..23a4489b4b 100644 --- a/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js +++ b/awx/ui/client/src/home/dashboard/graphs/job-status/job-status-graph.directive.js @@ -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(""+this.text+ - "\n"); + .replaceWith(` + + ${this.text} + + `); + 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(""+this.text+ - "\n"); + + $('#type-dropdown') + .replaceWith(` + + ${this.text} + + `); + 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(""+this.text+ - "\n"); + + $('#status-dropdown') + .replaceWith(` + + ${this.text} + + `); + scope.$broadcast("jobStatusChange", job_status); }); From 1ddb984b0265d7955b404e87a221627847d95cc0 Mon Sep 17 00:00:00 2001 From: gconsidine Date: Fri, 14 Jul 2017 16:51:37 -0400 Subject: [PATCH 2/3] Adjust margin and font color --- .../src/home/dashboard/graphs/dashboard-graphs.block.less | 2 +- .../client/src/home/dashboard/lists/dashboard-list.block.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less index 60a4715990..dc8dd4356e 100644 --- a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less +++ b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less @@ -85,7 +85,7 @@ .DashboardGraphs-filterDropdownText:hover, .DashboardGraphs-filterDropdownText:focus, .DashboardGraphs-filterDropdownText:active { - color: @db-graph-per-dd-txt; + color: @default-data-txt; } .DashboardGraphs-filterDropdownText { diff --git a/awx/ui/client/src/home/dashboard/lists/dashboard-list.block.less b/awx/ui/client/src/home/dashboard/lists/dashboard-list.block.less index c6b11557f3..749878527f 100644 --- a/awx/ui/client/src/home/dashboard/lists/dashboard-list.block.less +++ b/awx/ui/client/src/home/dashboard/lists/dashboard-list.block.less @@ -143,6 +143,7 @@ .DashboardList-noJobs { color: @list-empty-txt; + margin-top: 20px; } @media only screen and (max-width: 360px) { From cb48da2e0519c42ca4413cceca9c722af606096c Mon Sep 17 00:00:00 2001 From: gconsidine Date: Fri, 14 Jul 2017 17:02:01 -0400 Subject: [PATCH 3/3] Add minor style adjustments for hover highlight on li --- .../dashboard/graphs/dashboard-graphs.block.less | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less index dc8dd4356e..fb9c513852 100644 --- a/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less +++ b/awx/ui/client/src/home/dashboard/graphs/dashboard-graphs.block.less @@ -112,7 +112,7 @@ color: @db-graph-per-dd-icon; font-size: 12px; width: 20px; - padding-left:10px; + padding-left: 10px; padding-right: 10px; float: right; } @@ -125,7 +125,11 @@ text-transform: uppercase; cursor: pointer; border-color: @d7grey; - min-width: 105px; + min-width: 115px; + + a > span { + float: none; + } } .DashboardGraphs-filterDropdownItems { @@ -139,8 +143,8 @@ .DashboardGraphs-statusDropdown { font-size: 10px; display: inline-block; - padding-top:0px; - min-width: 105px; + padding-top: 0px; + min-width: 115px; width: inherit; span { @@ -226,7 +230,7 @@ .DashboardGraphs-filterLabel { margin-top: 10px; width: 50%; - float:left; + float: left; padding-left: 0; }