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

fixed suit block styling of dashboard graphs stuff

Browse Source
This commit is contained in:
John Mitchell 2016-05-04 13:55:58 -04:00
parent 6b5bf5e755
commit a6529dd788
7 changed files with 92 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
awx/ui/client/legacy-styles/ansible-ui.less
View File

@ -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;
}

80
awx/ui/client/src/dashboard/counts/dashboard-counts.block.less
View File

@ -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;
}
}

18
awx/ui/client/src/dashboard/dashboard.block.less
View File

@ -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;

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

@ -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;
}
}

2
awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html
View File

@ -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>

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

@ -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);
});

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

@ -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;
}
}
}