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

Style Audit of Host Event Modal

Browse Source
This commit is contained in:
jaredevantabor
2017-01-27 11:57:02 -08:00
parent a467d20341
commit fd54cc7ab3
3 changed files with 161 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
awx/ui/client/src/job-detail/host-event/host-event.block.less
View File

@@ -1,150 +1,150 @@
@import "./client/src/shared/branding/colors.less"; // @import "./client/src/shared/branding/colors.less";
@import "./client/src/shared/branding/colors.default.less"; // @import "./client/src/shared/branding/colors.default.less";
@import "./client/src/shared/layouts/one-plus-two.less"; // @import "./client/src/shared/layouts/one-plus-two.less";
//
.noselect { // .noselect {
-webkit-touch-callout: none; /* iOS Safari */ // -webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */ // -webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */ // -khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */ // -moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */ // -ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently // user-select: none; /* Non-prefixed version, currently
not supported by any browser */ // not supported by any browser */
} // }
//
@media screen and (min-width: 768px){ // @media screen and (min-width: 768px){
.HostEvent .modal-dialog{ // .HostEvent .modal-dialog{
width: 700px; // width: 700px;
} // }
} // }
.HostEvent .CodeMirror{ // .HostEvent .CodeMirror{
overflow-x: hidden; // overflow-x: hidden;
} // }
.HostEvent-controls button.HostEvent-close{ // .HostEvent-controls button.HostEvent-close{
color: #FFFFFF; // color: #FFFFFF;
text-transform: uppercase; // text-transform: uppercase;
padding-left: 15px; // padding-left: 15px;
padding-right: 15px; // padding-right: 15px;
background-color: @default-link; // background-color: @default-link;
border-color: @default-link; // border-color: @default-link;
&:hover{ // &:hover{
background-color: @default-link-hov; // background-color: @default-link-hov;
border-color: @default-link-hov; // border-color: @default-link-hov;
} // }
} // }
.HostEvent-body{ // .HostEvent-body{
margin-bottom: 10px; // margin-bottom: 10px;
} // }
.HostEvent-tab { // .HostEvent-tab {
color: @btn-txt; // color: @btn-txt;
background-color: @btn-bg; // background-color: @btn-bg;
font-size: 12px; // font-size: 12px;
border: 1px solid @btn-bord; // border: 1px solid @btn-bord;
height: 30px; // height: 30px;
border-radius: 5px; // border-radius: 5px;
margin-right: 20px; // margin-right: 20px;
padding-left: 10px; // padding-left: 10px;
padding-right: 10px; // padding-right: 10px;
padding-bottom: 5px; // padding-bottom: 5px;
padding-top: 5px; // padding-top: 5px;
transition: background-color 0.2s; // transition: background-color 0.2s;
text-transform: uppercase; // text-transform: uppercase;
text-align: center; // text-align: center;
white-space: nowrap; // white-space: nowrap;
.noselect; // .noselect;
} // }
.HostEvent-tab:hover { // .HostEvent-tab:hover {
color: @btn-txt; // color: @btn-txt;
background-color: @btn-bg-hov; // background-color: @btn-bg-hov;
cursor: pointer; // cursor: pointer;
} // }
.HostEvent-tab--selected{ // .HostEvent-tab--selected{
color: @btn-txt-sel!important; // color: @btn-txt-sel!important;
background-color: @default-icon!important; // background-color: @default-icon!important;
border-color: @default-icon!important; // border-color: @default-icon!important;
} // }
.HostEvent-view--container{ // .HostEvent-view--container{
width: 100%; // width: 100%;
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
flex-wrap: nowrap; // flex-wrap: nowrap;
justify-content: space-between; // justify-content: space-between;
} // }
.HostEvent .modal-footer{ // .HostEvent .modal-footer{
border: 0; // border: 0;
margin-top: 0px; // margin-top: 0px;
padding-top: 5px; // padding-top: 5px;
} // }
.HostEvent-controls{ // .HostEvent-controls{
float: right; // float: right;
button { // button {
margin-left: 10px; // margin-left: 10px;
} // }
} // }
.HostEvent-status--ok{ // .HostEvent-status--ok{
color: @green; // color: @green;
} // }
.HostEvent-status--unreachable{ // .HostEvent-status--unreachable{
color: @unreachable; // color: @unreachable;
} // }
.HostEvent-status--changed{ // .HostEvent-status--changed{
color: @changed; // color: @changed;
} // }
.HostEvent-status--failed{ // .HostEvent-status--failed{
color: @default-err; // color: @default-err;
} // }
.HostEvent-status--skipped{ // .HostEvent-status--skipped{
color: @skipped; // color: @skipped;
} // }
.HostEvent-title{ // .HostEvent-title{
color: @default-interface-txt; // color: @default-interface-txt;
font-weight: 600; // font-weight: 600;
margin-bottom: 8px; // margin-bottom: 8px;
} // }
// .HostEvent .modal-body{ // // .HostEvent .modal-body{
// max-height: 500px; // // max-height: 500px;
// overflow-y: auto; // // overflow-y: auto;
// padding: 20px; // // padding: 20px;
// // }
// .HostEvent-nav{
// padding-top: 12px;
// padding-bottom: 12px;
// }
// .HostEvent-field{
// margin-bottom: 8px;
// flex: 0 1 12em;
// }
// .HostEvent-field--label{
// text-transform: uppercase;
// flex: 0 1 80px;
// max-width: 80px;
// font-size: 12px;
// word-wrap: break-word;
// }
// .HostEvent-field{
// .OnePlusTwo-left--detailsRow;
// }
// .HostEvent-field--content{
// word-wrap: break-word;
// max-width: 13em;
// flex: 0 1 13em;
// }
// .HostEvent-details--left, .HostEvent-details--right{
// flex: 1 1 47%;
// }
// .HostEvent-details--left{
// margin-right: 40px;
// }
// .HostEvent-details--right{
// .HostEvent-field--label{
// flex: 0 1 25em;
// }
// .HostEvent-field--content{
// max-width: 15em;
// flex: 0 1 15em;
// align-self: flex-end;
// }
// }
// .HostEvent-button:disabled {
// pointer-events: all!important;
// } // }
.HostEvent-nav{
padding-top: 12px;
padding-bottom: 12px;
}
.HostEvent-field{
margin-bottom: 8px;
flex: 0 1 12em;
}
.HostEvent-field--label{
text-transform: uppercase;
flex: 0 1 80px;
max-width: 80px;
font-size: 12px;
word-wrap: break-word;
}
.HostEvent-field{
.OnePlusTwo-left--detailsRow;
}
.HostEvent-field--content{
word-wrap: break-word;
max-width: 13em;
flex: 0 1 13em;
}
.HostEvent-details--left, .HostEvent-details--right{
flex: 1 1 47%;
}
.HostEvent-details--left{
margin-right: 40px;
}
.HostEvent-details--right{
.HostEvent-field--label{
flex: 0 1 25em;
}
.HostEvent-field--content{
max-width: 15em;
flex: 0 1 15em;
align-self: flex-end;
}
}
.HostEvent-button:disabled {
pointer-events: all!important;
}

2
awx/ui/client/src/job-results/host-event/host-event-modal.partial.html
View File

@@ -59,7 +59,7 @@
<!-- controls --> <!-- controls -->
<div class="HostEvent-controls"> <div class="HostEvent-controls">
<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close HostEvent-button" ng-show="true" >Close</button> <button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close">Close</button>
</div> </div>
</div> </div>
</div> </div>

27
awx/ui/client/src/job-results/host-event/host-event.block.less
View File

@@ -20,20 +20,14 @@
.HostEvent .CodeMirror{ .HostEvent .CodeMirror{
overflow-x: hidden; overflow-x: hidden;
} }
.HostEvent-controls button.HostEvent-close{
color: #FFFFFF; .HostEvent-close:hover{
text-transform: uppercase; color: @btn-txt;
padding-left: 15px; background-color: @btn-bg-hov;
padding-right: 15px;
background-color: @default-link;
border-color: @default-link;
&:hover{
background-color: @default-link-hov;
border-color: @default-link-hov;
}
} }
.HostEvent-body{ .HostEvent-body{
margin-bottom: 10px; margin-bottom: 20px;
} }
.HostEvent-tab { .HostEvent-tab {
color: @btn-txt; color: @btn-txt;
@@ -106,12 +100,12 @@
} }
.HostEvent .modal-body{ .HostEvent .modal-body{
max-height: 500px; max-height: 500px;
padding: 20px; padding: 0px!important;
overflow-y: auto; overflow-y: auto;
} }
.HostEvent-nav{ .HostEvent-nav{
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 20px;
} }
.HostEvent-field{ .HostEvent-field{
margin-bottom: 8px; margin-bottom: 8px;
@@ -164,10 +158,11 @@
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
font-style: normal; font-style: normal;
background-color: @default-no-items-bord;
} }
.HostEvent-numberColumnPreload { .HostEvent-numberColumnPreload {
background-color: @default-no-items-bord; background-color: @default-list-header-bg;
height: 198px; height: 198px;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
width: 30px; width: 30px;
@@ -175,7 +170,7 @@
} }
.HostEvent-numberColumn { .HostEvent-numberColumn {
background-color: @default-no-items-bord; background-color: @default-list-header-bg;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
color: #999; color: #999;