diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index 8869fa3a7a..8f3c678c6b 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/awx/ui/client/legacy-styles/forms.less @@ -1,9 +1,9 @@ /********************************************* * Copyright (c) 2016 Ansible, Inc. * - * lists.less + * Forms.less * - * custom styles for generated lists + * custom styles for generated forms * */ diff --git a/awx/ui/client/src/forms/LicenseForm.js b/awx/ui/client/src/forms/LicenseForm.js index 0b53574caa..672144d210 100644 --- a/awx/ui/client/src/forms/LicenseForm.js +++ b/awx/ui/client/src/forms/LicenseForm.js @@ -17,8 +17,9 @@ export default name: 'license', well: false, + editTitle: "License", - licensetabs: [{ + licenseTabs: [{ name: 'license', label: 'License' }, { diff --git a/awx/ui/client/src/management-jobs/list/list.partial.html b/awx/ui/client/src/management-jobs/list/list.partial.html index 7e8fb31e45..4a42a0a48d 100644 --- a/awx/ui/client/src/management-jobs/list/list.partial.html +++ b/awx/ui/client/src/management-jobs/list/list.partial.html @@ -1,3 +1,3 @@
-
+
diff --git a/awx/ui/client/src/management-jobs/management-jobs.list.js b/awx/ui/client/src/management-jobs/management-jobs.list.js index 77da124746..0c5f3cefff 100644 --- a/awx/ui/client/src/management-jobs/management-jobs.list.js +++ b/awx/ui/client/src/management-jobs/management-jobs.list.js @@ -10,6 +10,7 @@ export default function(){ iterator: 'configure_job', index: false, hover: true, + listTitle: 'Management Jobs', fields: { name: { @@ -22,7 +23,7 @@ export default function(){ } }, actions: { - + }, fieldActions: { submit: { diff --git a/awx/ui/client/src/partials/license.html b/awx/ui/client/src/partials/license.html index 4e616a112a..c83f858354 100644 --- a/awx/ui/client/src/partials/license.html +++ b/awx/ui/client/src/partials/license.html @@ -1,4 +1,4 @@ -
-
+
+
diff --git a/awx/ui/client/src/setup-menu/setup-item.block.less b/awx/ui/client/src/setup-menu/setup-item.block.less index e0437816c8..473432d6d2 100644 --- a/awx/ui/client/src/setup-menu/setup-item.block.less +++ b/awx/ui/client/src/setup-menu/setup-item.block.less @@ -1,103 +1,73 @@ /** @define SetupItem */ @import '../shared/branding/colors.less'; +@import '../shared/branding/colors.default.less'; .SetupItem { + background-color: @panel-bg; + border-radius: 5px; + border: 1px solid @btn-bord; + min-height: 110px; + padding: 20px; + margin-top: 20px; + transition: background-color 0.2s; +} - @icon-small-size: 2.4rem; - @icon-large-size: 3.4rem; +.SetupItem:hover { + background-color: @btn-bg-hov; +} - &--aside { - padding-bottom: @vertical-basis / 2; +.SetupItem-title{ + font-size: 14px; + color: #848992; + text-align: center; + margin-bottom: 15px; + font-weight: 600; + text-transform: uppercase; +} + +.SetupItem-description{ + font-size: 12px; + color: #848992; + text-align: center; +} + +@media (min-width: 1179px) { + .SetupItem { + width: ~"calc(25% - 20px)"; + margin-right: 20px; } - @vertical-basis: 1.4rem; - - padding: @vertical-basis 0; - - display: block; - - color: black; - transition: background-color 0.15s ease-in-out; - background-color: white; - - &:hover, &:focus, &:active { - color: black; - - .SetupItem-title { - text-decoration: underline; - } - } - - &--hoverable { - &:hover { - background-color: lighten(@ansible-red, 28%); - } - } - - &-icon { - - &--aside { - align-self: flex-start; - margin-top: 3px; - } - - // For some reason, credentials - // icon is taking up more space - // than it should; need to adjust - // it manually to line it up with - // others - &--credentials { - width: 4.3rem; - margin-left: -0.8rem; - } - - // HACK: IE11 does not respect a fluid height for svg - // elements; explicitly setting for now - svg { - max-height: 33px; - } - - flex: none; // do not let the flex container adjust this width! - width: @icon-large-size; - align-self: center; - } - - &--noIcon { - margin-left: @icon-large-size + 1.4rem; // 1.4rem comes from Media-figure margin - } - - &--button { - border: 0; - text-align: left; - outline: none; - .SetupItem-icon { - // width: 100%; - } - } - - // flexbox bug in firefox: you can't make a button display:flex - // https://github.com/philipwalton/flexbugs#9-button-elements-cant-be-flex-containers - &-firefoxFlexButtonFix { - display: flex; - } - - &-title { - &--aside { - font-size: 1.9rem; - padding-bottom: 5px; - } - font-size: 2.8rem; - padding-bottom: 0.4rem; - margin: 0; - } - - &-description { - &--aside { - font-size: 1.2rem; - } - color: black; - font-size: 1.4rem; - margin: 0; + .SetupItem :nth-child(4n+4) { + margin-right: 0px; + } +} + +@media (min-width: 901px) and (max-width: 1178px) { + .SetupItem { + width: ~"calc(33% - 11px)"; + margin-right: 20px; + } + + .SetupItem:nth-child(3n+3) { + margin-right: 0px; + } +} + +@media (min-width: 616px) and (max-width: 900px) { + .SetupItem { + width: ~"calc(50% - 10px)"; + margin-right: 20px; + } + + .SetupItem:nth-child(2n+2) { + margin-right: 0px; + } +} + +@media (max-width: 615px) { + .SetupItem { + width: 100%; + margin-right: 0px; } } diff --git a/awx/ui/client/src/setup-menu/setup-menu.block.less b/awx/ui/client/src/setup-menu/setup-menu.block.less index bb5bccaec5..b830582139 100644 --- a/awx/ui/client/src/setup-menu/setup-menu.block.less +++ b/awx/ui/client/src/setup-menu/setup-menu.block.less @@ -6,8 +6,9 @@ .SetupMenu { width: 100%; margin-left: 0; - + display: flex; + flex-wrap: wrap; @media screen and (max-width: @menu-breakpoint) { - margin-left: -1rem; + margin-left: 0px; } } diff --git a/awx/ui/client/src/setup-menu/setup-menu.partial.html b/awx/ui/client/src/setup-menu/setup-menu.partial.html index 469eed33c3..bbba41d143 100644 --- a/awx/ui/client/src/setup-menu/setup-menu.partial.html +++ b/awx/ui/client/src/setup-menu/setup-menu.partial.html @@ -1,84 +1,52 @@
- - +
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js index 81b248c00d..00b865b827 100644 --- a/awx/ui/client/src/shared/form-generator.js +++ b/awx/ui/client/src/shared/form-generator.js @@ -1487,8 +1487,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat if (this.form.licenseTabs) { html += "