From fd54cc7ab380e42f32a8a40fd41c55312e25d915 Mon Sep 17 00:00:00 2001 From: jaredevantabor Date: Fri, 27 Jan 2017 11:57:02 -0800 Subject: [PATCH] Style Audit of Host Event Modal --- .../host-event/host-event.block.less | 298 +++++++++--------- .../host-event/host-event-modal.partial.html | 2 +- .../host-event/host-event.block.less | 27 +- 3 files changed, 161 insertions(+), 166 deletions(-) diff --git a/awx/ui/client/src/job-detail/host-event/host-event.block.less b/awx/ui/client/src/job-detail/host-event/host-event.block.less index eafa9678fd..9b31b74e87 100644 --- a/awx/ui/client/src/job-detail/host-event/host-event.block.less +++ b/awx/ui/client/src/job-detail/host-event/host-event.block.less @@ -1,150 +1,150 @@ -@import "./client/src/shared/branding/colors.less"; -@import "./client/src/shared/branding/colors.default.less"; -@import "./client/src/shared/layouts/one-plus-two.less"; - -.noselect { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Chrome/Safari/Opera */ - -khtml-user-select: none; /* Konqueror */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - not supported by any browser */ -} - -@media screen and (min-width: 768px){ - .HostEvent .modal-dialog{ - width: 700px; - } -} -.HostEvent .CodeMirror{ - overflow-x: hidden; -} -.HostEvent-controls button.HostEvent-close{ - color: #FFFFFF; - text-transform: uppercase; - padding-left: 15px; - padding-right: 15px; - background-color: @default-link; - border-color: @default-link; - &:hover{ - background-color: @default-link-hov; - border-color: @default-link-hov; - } -} -.HostEvent-body{ - margin-bottom: 10px; -} -.HostEvent-tab { - color: @btn-txt; - background-color: @btn-bg; - font-size: 12px; - border: 1px solid @btn-bord; - height: 30px; - border-radius: 5px; - margin-right: 20px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 5px; - padding-top: 5px; - transition: background-color 0.2s; - text-transform: uppercase; - text-align: center; - white-space: nowrap; - .noselect; -} -.HostEvent-tab:hover { - color: @btn-txt; - background-color: @btn-bg-hov; - cursor: pointer; -} -.HostEvent-tab--selected{ - color: @btn-txt-sel!important; - background-color: @default-icon!important; - border-color: @default-icon!important; -} -.HostEvent-view--container{ - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; -} -.HostEvent .modal-footer{ - border: 0; - margin-top: 0px; - padding-top: 5px; -} -.HostEvent-controls{ - float: right; - button { - margin-left: 10px; - } -} -.HostEvent-status--ok{ - color: @green; -} -.HostEvent-status--unreachable{ - color: @unreachable; -} -.HostEvent-status--changed{ - color: @changed; -} -.HostEvent-status--failed{ - color: @default-err; -} -.HostEvent-status--skipped{ - color: @skipped; -} -.HostEvent-title{ - color: @default-interface-txt; - font-weight: 600; - margin-bottom: 8px; -} -// .HostEvent .modal-body{ -// max-height: 500px; -// overflow-y: auto; -// padding: 20px; +// @import "./client/src/shared/branding/colors.less"; +// @import "./client/src/shared/branding/colors.default.less"; +// @import "./client/src/shared/layouts/one-plus-two.less"; +// +// .noselect { +// -webkit-touch-callout: none; /* iOS Safari */ +// -webkit-user-select: none; /* Chrome/Safari/Opera */ +// -khtml-user-select: none; /* Konqueror */ +// -moz-user-select: none; /* Firefox */ +// -ms-user-select: none; /* Internet Explorer/Edge */ +// user-select: none; /* Non-prefixed version, currently +// not supported by any browser */ +// } +// +// @media screen and (min-width: 768px){ +// .HostEvent .modal-dialog{ +// width: 700px; +// } +// } +// .HostEvent .CodeMirror{ +// overflow-x: hidden; +// } +// .HostEvent-controls button.HostEvent-close{ +// color: #FFFFFF; +// text-transform: uppercase; +// padding-left: 15px; +// padding-right: 15px; +// background-color: @default-link; +// border-color: @default-link; +// &:hover{ +// background-color: @default-link-hov; +// border-color: @default-link-hov; +// } +// } +// .HostEvent-body{ +// margin-bottom: 10px; +// } +// .HostEvent-tab { +// color: @btn-txt; +// background-color: @btn-bg; +// font-size: 12px; +// border: 1px solid @btn-bord; +// height: 30px; +// border-radius: 5px; +// margin-right: 20px; +// padding-left: 10px; +// padding-right: 10px; +// padding-bottom: 5px; +// padding-top: 5px; +// transition: background-color 0.2s; +// text-transform: uppercase; +// text-align: center; +// white-space: nowrap; +// .noselect; +// } +// .HostEvent-tab:hover { +// color: @btn-txt; +// background-color: @btn-bg-hov; +// cursor: pointer; +// } +// .HostEvent-tab--selected{ +// color: @btn-txt-sel!important; +// background-color: @default-icon!important; +// border-color: @default-icon!important; +// } +// .HostEvent-view--container{ +// width: 100%; +// display: flex; +// flex-direction: row; +// flex-wrap: nowrap; +// justify-content: space-between; +// } +// .HostEvent .modal-footer{ +// border: 0; +// margin-top: 0px; +// padding-top: 5px; +// } +// .HostEvent-controls{ +// float: right; +// button { +// margin-left: 10px; +// } +// } +// .HostEvent-status--ok{ +// color: @green; +// } +// .HostEvent-status--unreachable{ +// color: @unreachable; +// } +// .HostEvent-status--changed{ +// color: @changed; +// } +// .HostEvent-status--failed{ +// color: @default-err; +// } +// .HostEvent-status--skipped{ +// color: @skipped; +// } +// .HostEvent-title{ +// color: @default-interface-txt; +// font-weight: 600; +// margin-bottom: 8px; +// } +// // .HostEvent .modal-body{ +// // max-height: 500px; +// // overflow-y: auto; +// // 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; -} diff --git a/awx/ui/client/src/job-results/host-event/host-event-modal.partial.html b/awx/ui/client/src/job-results/host-event/host-event-modal.partial.html index 279e3672eb..6087115e45 100644 --- a/awx/ui/client/src/job-results/host-event/host-event-modal.partial.html +++ b/awx/ui/client/src/job-results/host-event/host-event-modal.partial.html @@ -59,7 +59,7 @@
- +
diff --git a/awx/ui/client/src/job-results/host-event/host-event.block.less b/awx/ui/client/src/job-results/host-event/host-event.block.less index 218792a477..6ae8f66c27 100644 --- a/awx/ui/client/src/job-results/host-event/host-event.block.less +++ b/awx/ui/client/src/job-results/host-event/host-event.block.less @@ -20,20 +20,14 @@ .HostEvent .CodeMirror{ overflow-x: hidden; } -.HostEvent-controls button.HostEvent-close{ - color: #FFFFFF; - text-transform: uppercase; - padding-left: 15px; - padding-right: 15px; - background-color: @default-link; - border-color: @default-link; - &:hover{ - background-color: @default-link-hov; - border-color: @default-link-hov; - } + +.HostEvent-close:hover{ + color: @btn-txt; + background-color: @btn-bg-hov; } + .HostEvent-body{ - margin-bottom: 10px; + margin-bottom: 20px; } .HostEvent-tab { color: @btn-txt; @@ -106,12 +100,12 @@ } .HostEvent .modal-body{ max-height: 500px; - padding: 20px; + padding: 0px!important; overflow-y: auto; } .HostEvent-nav{ padding-top: 12px; - padding-bottom: 12px; + padding-bottom: 20px; } .HostEvent-field{ margin-bottom: 8px; @@ -164,10 +158,11 @@ border-radius: 5px; border: 1px solid #ccc; font-style: normal; + background-color: @default-no-items-bord; } .HostEvent-numberColumnPreload { - background-color: @default-no-items-bord; + background-color: @default-list-header-bg; height: 198px; border-right: 1px solid #ccc; width: 30px; @@ -175,7 +170,7 @@ } .HostEvent-numberColumn { - background-color: @default-no-items-bord; + background-color: @default-list-header-bg; border-right: 1px solid #ccc; border-bottom-left-radius: 5px; color: #999;