From a6529dd78804531d48bde20f9dca02dd199c96ac Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Wed, 4 May 2016 13:55:58 -0400 Subject: [PATCH] fixed suit block styling of dashboard graphs stuff --- awx/ui/client/legacy-styles/ansible-ui.less | 11 +++ .../counts/dashboard-counts.block.less | 80 +++++-------------- .../client/src/dashboard/dashboard.block.less | 18 ----- .../graphs/dashboard-graphs.block.less | 47 ++++++++--- .../graphs/dashboard-graphs.partial.html | 2 +- .../job-status/job-status-graph.directive.js | 7 +- .../dashboard/lists/dashboard-list.block.less | 21 +++++ 7 files changed, 92 insertions(+), 94 deletions(-) diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index efeda91fdd..be9b73db0f 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/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; +} diff --git a/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less b/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less index cd563cfff3..d9a85ed444 100644 --- a/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less +++ b/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; + } +} diff --git a/awx/ui/client/src/dashboard/dashboard.block.less b/awx/ui/client/src/dashboard/dashboard.block.less index 286ee0c406..75d9525040 100644 --- a/awx/ui/client/src/dashboard/dashboard.block.less +++ b/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; diff --git a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less index 3ef1d00c45..f191e26be8 100644 --- a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less +++ b/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; + } +} diff --git a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html index 62e8ffe02d..0c18724e42 100644 --- a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html +++ b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html @@ -66,7 +66,7 @@