diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index c8f034cc32..1f643a2226 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/awx/ui/client/legacy-styles/forms.less @@ -206,6 +206,7 @@ input[type='radio']:checked:before { font-weight: normal; font-size: small; padding-right:5px; + width: 100%; } .Form-buttons{ diff --git a/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less new file mode 100644 index 0000000000..6b046d8a42 --- /dev/null +++ b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less @@ -0,0 +1,134 @@ +/** @define RepeatFrequencyOptions */ + +.RepeatFrequencyOptions { + width: ~"calc(100% + 21px)"; + padding: 20px; + border-left: 5px solid #e8e8e8; + margin-left: -20px; + padding-left: 17px; + padding-right: 0px; + padding-top: 0px; + padding-bottom: 0px; + align-items: flex-start; +} + +.RepeatFrequencyOptions-formGroup { + padding-right: 0px; +} + +@media (min-width: 901px) { + .RepeatFrequencyOptions-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: ~"calc(33% - 32px)"; + margin-right: 50px; + } + + .RepeatFrequencyOptions-formGroup:nth-child(3n+3) { + flex: 0 0 auto; + margin-bottom: 25px; + margin-right: 0px; + } +} + +@media (min-width: 651px) and (max-width: 900px) { + .RepeatFrequencyOptions-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: ~"calc(50% - 25px)"; + margin-right: 50px; + } + + .RepeatFrequencyOptions-formGroup:nth-child(2n+2) { + flex: 0 0 auto; + margin-bottom: 25px; + margin-right: 0px; + } +} + +@media (max-width: 650px) { + .RepeatFrequencyOptions-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: 100%; + margin-right: 0px; + } +} + +.RepeatFrequencyOptions-label { + width: 100%; + margin-top: -2px; + text-transform: uppercase; + font-weight: bold; + color: #848992; + font-size: 13px; + margin-left: -20px; + border-left: 5px solid #e8e8e8; + padding-left: 15px; + padding-bottom: 15px; +} + +.RepeatFrequencyOptions-weekButtonContainer { + width: 100%; +} + +.RepeatFrequencyOptions-weekButtonGroup { + height: 27px; + width: 100%; + display: flex; +} + +.RepeatFrequencyOptions-weekButton { + height: 27px; + padding-top: 2px; + padding-right: 4px; + padding-left: 4px; + flex: 1; +} + +.RepeatFrequencyOptions-everyGroup { + display: flex; + flex-wrap: wrap; + align-items: baseline; +} + +.RepeatFrequencyOptions-inlineLabel { + font-weight: normal; + color: #848992; + text-transform: uppercase; + flex: initial; + width: 54px; + margin-left: 10px; + font-size: 13px; +} + +.RepeatFrequencyOptions-occurencesGroup { + width: 100%; +} + +.RepeatFrequencyOptions-radioLabel { + margin-top: 0px; + margin-bottom: 5px; +} + +.RepeatFrequencyOptions-everyLabel { + margin-top: 2px; +} + +.RepeatFrequencyOptions-spacedSelect { + margin-bottom: 10px; +} + +.RepeatFrequencyOptions-subFormBorderFixer { + height: 25px; + width: 5px; + background: #ffffff; + margin-left: -20px; + margin-top: -25px; + margin-right: 50px; +} + +.RepeatFrequencyOptions-monthlyOccurence, +.RepeatFrequencyOptions-yearlyOccurence { + text-transform: capitalize; +} diff --git a/awx/ui/client/src/scheduler/schedulerEdit.controller.js b/awx/ui/client/src/scheduler/schedulerEdit.controller.js index b23836f98a..4dcdf4ccf5 100644 --- a/awx/ui/client/src/scheduler/schedulerEdit.controller.js +++ b/awx/ui/client/src/scheduler/schedulerEdit.controller.js @@ -19,6 +19,8 @@ export default ['$compile', '$state', '$stateParams', 'EditSchedule', 'Wait', '$ Wait('stop'); }); + $scope.isEdit = true; + $scope.hideForm = true; $scope.formCancel = function() { diff --git a/awx/ui/client/src/scheduler/schedulerForm.block.less b/awx/ui/client/src/scheduler/schedulerForm.block.less new file mode 100644 index 0000000000..9cba269e75 --- /dev/null +++ b/awx/ui/client/src/scheduler/schedulerForm.block.less @@ -0,0 +1,44 @@ +/** @define SchedulerForm */ + +.SchedulerForm-formGroup { + padding-right: 0px; +} + +@media (min-width: 901px) { + .SchedulerForm-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: ~"calc(33% - 32px)"; + margin-right: 50px; + } + + .SchedulerForm-formGroup:nth-child(3n+3) { + flex: 0 0 auto; + margin-bottom: 25px; + margin-right: 0px; + } +} + +@media (min-width: 651px) and (max-width: 900px) { + .SchedulerForm-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: ~"calc(50% - 25px)"; + margin-right: 50px; + } + + .SchedulerForm-formGroup:nth-child(2n+2) { + flex: 0 0 auto; + margin-bottom: 25px; + margin-right: 0px; + } +} + +@media (max-width: 650px) { + .SchedulerForm-formGroup { + flex: 0 0 auto; + margin-bottom: 25px; + width: 100%; + margin-right: 0px; + } +} diff --git a/awx/ui/client/src/scheduler/schedulerForm.partial.html b/awx/ui/client/src/scheduler/schedulerForm.partial.html index 6c545ab941..038192c675 100644 --- a/awx/ui/client/src/scheduler/schedulerForm.partial.html +++ b/awx/ui/client/src/scheduler/schedulerForm.partial.html @@ -1,6 +1,7 @@