fixed suit block styling of dashboard graphs stuff

awx/ui/client/legacy-styles/ansible-ui.less

@@ -2107,3 +2107,14 @@ a:hover {
 .form-control:active, .form-control:focus {
     border-color: @default-link;
 }
+
+.nv-axislabel {
+  font-weight: bold !important;
+  fill: @db-graph-axis-label !important;
+  font-family: 'Open Sans' !important;
+}
+
+.nv-axis text {
+   fill: @db-graph-axis-label !important; //rgb(169, 178, 189);
+   font-family: 'Open Sans' !important;
+}

awx/ui/client/src/dashboard/counts/dashboard-counts.block.less

@@ -28,66 +28,6 @@
     transition: background-color 0.2s, border-color 0.2s;
 }
 
-@media only screen and (max-width: 710px) {
-    .DashboardCounts {
-        margin-bottom: -15px;
-    }
-
-    .DashboardCounts-buttonStyle {
-        margin-bottom: 15px;
-        width: 33%;
-        flex-basis: ~"calc(33% - 7px)";
-        max-width: ~"calc(33% - 7px)";
-        height: 96px;
-    }
-}
-
-@media only screen and (max-width: 360px) {
-    .DashboardCounts-label {
-        font-size: 10px;
-    }
-
-    .DashboardList-headerText {
-        white-space: normal;
-        line-height: 22px;
-        padding-top: 10px;
-    }
-
-    .DashboardList-timeCell {
-        white-space: normal;
-    }
-}
-
-.DashboardGraphs-filteringDropdowns {
-    display: inherit;
-}
-
-@media only screen and (max-width: 540px) {
-    .DashboardGraphs-filteringDropdowns {
-        float: left;
-        width: 100%;
-    }
-
-    .DashboardGraphs-filterLabel {
-        width: 50%;
-        float:left;
-    }
-
-    .DashboardGraphs-periodDropdown {
-        width: 50%;
-        float: left;
-    }
-
-    .DashboardList-container {
-        th {
-            width: 25%;
-            white-space: nowrap;
-        }
-    }
-}
-
-
-
 .DashboardCounts-buttonStyle:hover {
     background-color: @db-count-succ;
     border-color: @db-count-succ;
@@ -126,3 +66,23 @@
     text-transform: uppercase;
     transition: color 0.2s;
 }
+
+@media only screen and (max-width: 710px) {
+    .DashboardCounts {
+        margin-bottom: -15px;
+    }
+
+    .DashboardCounts-buttonStyle {
+        margin-bottom: 15px;
+        width: 33%;
+        flex-basis: ~"calc(33% - 7px)";
+        max-width: ~"calc(33% - 7px)";
+        height: 96px;
+    }
+}
+
+@media only screen and (max-width: 360px) {
+    .DashboardCounts-label {
+        font-size: 10px;
+    }
+}

awx/ui/client/src/dashboard/dashboard.block.less

@@ -18,24 +18,6 @@
     width: 100%;
 }
 
-.DashboardGraphs-filterDropdownItems {
-    li > a {
-        color: @default-interface-txt;
-    }
-}
-
-#status-dropdown + ul.dropdown-menu {
-    margin-left: -96px;
-}
-
-#type-dropdown + ul.dropdown-menu {
-    margin-left: -95px;
-}
-
-#period-dropdown + ul.dropdown-menu {
-    margin-left: -40px;
-}
-
 .Dashboard-list {
     border: 1px solid @default-border;
     border-radius: 5px;

awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less

@@ -28,6 +28,8 @@
     color: @default-interface-txt;
     white-space: nowrap;
     margin-right: auto;
+    margin-bottom: 20px;
+    margin-top: 5px;
 }
 
 .DashboardGraphs-graphSection {
@@ -70,17 +72,6 @@
     flex-direction: column;
 }
 
-.nv-axislabel {
-  font-weight: bold !important;
-  fill: @db-graph-axis-label !important;
-  font-family: 'Open Sans' !important;
-}
-
-.nv-axis text {
-   fill: @db-graph-axis-label !important; //rgb(169, 178, 189);
-   font-family: 'Open Sans' !important;
-}
-
 .DashboardGraphs-graphToolbar {
     display: flex;
     flex-direction: row;
@@ -141,7 +132,11 @@
 }
 
 .DashboardGraphs-filterDropdownItems--jobType {
-    margin-left: -84px;
+    margin-left: -95px;
+}
+
+.DashboardGraphs-filterDropdownItems--status {
+    margin-left: -96px;
 }
 
 .DashboardGraphs-statusFilters{
@@ -178,3 +173,31 @@
 .DashboardGraphs-statusFilterIcon{
     padding-right: 5px;
 }
+
+.DashboardGraphs-filteringDropdowns {
+    display: inherit;
+}
+
+.DashboardGraphs-filterDropdownItems {
+    li > a {
+        color: @default-interface-txt;
+    }
+}
+
+@media only screen and (max-width: 540px) {
+    .DashboardGraphs-filteringDropdowns {
+        float: left;
+        width: 100%;
+        margin-left: -10px;
+    }
+
+    .DashboardGraphs-filterLabel {
+        width: 50%;
+        float:left;
+    }
+
+    .DashboardGraphs-periodDropdown {
+        width: 50%;
+        float: left;
+    }
+}

awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html

@@ -66,7 +66,7 @@
                     </a>
 
                     <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
-                        DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="status-dropdown">
+                        DashboardGraphs-filterDropdownItems--status" role="menu" aria-labelledby="status-dropdown">
                         <li>
                             <a class="o" id="both" >All</a>
                         </li>

awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js

@@ -124,7 +124,8 @@ function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustG
                     // 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\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
+                        $('#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-chevron-down DashboardGraphs-filterIcon\"></i>\n");
                         scope.$parent.isFailed = true;
                         scope.$parent.isSuccessful = true;
@@ -134,7 +135,7 @@ function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustG
                     //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\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
+                        $('#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-chevron-down DashboardGraphs-filterIcon\"></i>\n");
                         scope.$parent.isFailed = true;
                         scope.$parent.isSuccessful = true;
@@ -143,7 +144,7 @@ function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustG
 
                     $('.o').on('click', function() {
                         var job_status = this.getAttribute('id');
-                        $('#status-dropdown').replaceWith("<a id=\"status-dropdown\" class=\"DashboardGraphs-filterDropdownText\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+
+                        $('#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-chevron-down DashboardGraphs-filterIcon\"></i>\n");
                         scope.$broadcast("jobStatusChange", job_status);
                     });

awx/ui/client/src/dashboard/lists/dashboard-list.block.less

@@ -153,3 +153,24 @@
 .DashboardList-noJobs {
     color: @list-empty-txt;
 }
+
+@media only screen and (max-width: 360px) {
+    .DashboardList-headerText {
+        white-space: normal;
+        line-height: 22px;
+        padding-top: 10px;
+    }
+
+    .DashboardList-timeCell {
+        white-space: normal;
+    }
+}
+
+@media only screen and (max-width: 540px) {
+    .DashboardList-container {
+        th {
+            width: 25%;
+            white-space: nowrap;
+        }
+    }
+}