From 8ad62b666978c1735f8196c7ffc6c8ae1aff569a Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Fri, 12 Feb 2016 12:00:26 -0500
Subject: [PATCH] fixed layout issues with form scheduler

---
 .../src/scheduler/schedulerForm.partial.html  | 187 ++++++++++--------
 .../src/scheduler/schedulertime.block.less    |   2 +-
 2 files changed, 109 insertions(+), 80 deletions(-)

diff --git a/awx/ui/client/src/scheduler/schedulerForm.partial.html b/awx/ui/client/src/scheduler/schedulerForm.partial.html
index af503a49ce..29ce37a2f5 100644
--- a/awx/ui/client/src/scheduler/schedulerForm.partial.html
+++ b/awx/ui/client/src/scheduler/schedulerForm.partial.html
@@ -12,7 +12,7 @@
 
                 <form class="form Form"
                     role="form"
-                    name="scheduler_form"
+                    name="scheduler_form_new"
                     novalidate>
 
                     <div class="form-group SchedulerForm-formGroup">
@@ -22,13 +22,15 @@
                         </label>
                         <input
                             type="text"
-                            class="form-control input-sm"
+                            class="form-control input-sm
+                                Form-textInput"
+                            ng-class="{'RepeatFrequencyOptions-nameBorderErrorFix': scheduler_form_new.$dirty && scheduler_form_new.schedulerName.$error.required}"
                             name="schedulerName"
                             id="schedulerName"
                             ng-model="schedulerName" required
                             placeholder="Schedule name">
                         <div class="error"
-                            ng-show="scheduler_form.schedulerName.$dirty && scheduler_form.schedulerName.$error.required">
+                            ng-show="scheduler_form_new.$dirty && scheduler_form_new.schedulerName.$error.required">
                             A schedule name is required.
                         </div>
                     </div>
@@ -40,9 +42,10 @@
                                 (mm/dd/yyyy)
                             </span>
                         </label>
-                        <div class="input-group">
+                        <div class="input-group Form-inputGroup">
                             <input type="text"
-                                class="form-control input-sm"
+                                class="form-control input-sm
+                                    Form-textInput"
                                 name="schedulerStartDt"
                                 id="schedulerStartDt"
                                 ng-model="schedulerStartDt"
@@ -52,7 +55,8 @@
                                 ng-change="scheduleTimeChange()" >
                                 <span class="input-group-btn">
                                     <button
-                                        class="btn btn-default btn-sm"
+                                        class="btn btn-default btn-sm
+                                            Form-inputButton Form-lookupButton"
                                         type="button"
                                         ng-click="showCalendar('schedulerStartDt')">
                                         <i class="fa fa-calendar"></i>
@@ -80,7 +84,7 @@
                         <div class="input-group SchedulerTime">
                             <input name="schedulerStartHour"
                                 id="schedulerStartHour"
-                                sch-spinner="scheduler_form"
+                                sch-spinner="scheduler_form_new"
                                 class="scheduler-time-spinner
                                     ScheduleTime-input SpinnerInput"
                                 ng-model="schedulerStartHour"
@@ -94,7 +98,7 @@
                             </span>
                             <input name="schedulerStartMinute"
                                 id="schedulerStartMinute"
-                                sch-spinner="scheduler_form"
+                                sch-spinner="scheduler_form_new"
                                 class="scheduler-time-spinner
                                     SchedulerTime-input SpinnerInput"
                                 ng-model="schedulerStartMinute"
@@ -108,7 +112,7 @@
                             </span>
                             <input name="schedulerStartSecond"
                                 id="schedulerStartSecond"
-                                sch-spinner="scheduler_form"
+                                sch-spinner="scheduler_form_new"
                                 class="scheduler-time-spinner
                                     SchedulerTime-input SpinnerInput"
                                 ng-model="schedulerStartSecond"
@@ -137,6 +141,7 @@
                     <div class="form-group SchedulerForm-formGroup"
                         ng-show="schedulerShowTimeZone">
                         <label class="Form-inputLabel">
+                            <span class="red-text">*</span>
                             Local Time Zone
                         </label>
                         <select
@@ -150,6 +155,7 @@
                     </div>
                     <div class="form-group SchedulerForm-formGroup">
                         <label class="Form-inputLabel">
+                            <span class="red-text">*</span>
                             Repeat frequency
                         </label>
                         <select name="schedulerFrequency"
@@ -174,11 +180,12 @@
                             ng-if="schedulerShowInterval">
                             <label class="Form-inputLabel
                                 RepeatFrequencyOptions-everyLabel">
+                                <span class="red-text">*</span>
                                 Every
                             </label>
                             <input name="schedulerInterval"
                                 id="schedulerInterval"
-                                sch-spinner="scheduler_form"
+                                sch-spinner="scheduler_form_new"
                                 class="scheduler-spinner
                                     SpinnerInput"
                                 ng-model="$parent.schedulerInterval"
@@ -202,6 +209,7 @@
                             <div class="radio
                                 RepeatFrequencyOptions-radioLabel">
                                 <label class="Form-inputLabel">
+                                    <span class="red-text">*</span>
                                     <input type="radio" value="day"
                                         ng-model="$parent.monthlyRepeatOption"
                                         ng-change="monthlyRepeatChange()"
@@ -213,7 +221,7 @@
                             <input
                                 name="monthDay"
                                 id="monthDay"
-                                sch-spinner="scheduler_form"
+                                sch-spinner="scheduler_form_new"
                                 class="scheduler-spinner SpinnerInput"
                                 ng-model="$parent.monthDay"
                                 min="1" max="31"
@@ -229,6 +237,7 @@
                             <div class="radio
                                 RepeatFrequencyOptions-radioLabel">
                                 <label class="Form-inputLabel">
+                                    <span class="red-text">*</span>
                                     <input type="radio"
                                         value="other"
                                         ng-model="$parent.monthlyRepeatOption"
@@ -238,29 +247,33 @@
                                     on the
                                 </label>
                             </div>
-                            <select name="monthlyOccurrence"
-                                id="monthlyOccurrence"
-                                ng-model="$parent.monthlyOccurrence"
-                                ng-options="o.name for o in occurrences"
-                                ng-disabled="monthlyRepeatOption != 'other'"
-                                class="form-control input-sm
-                                    RepeatFrequencyOptions-spacedSelect
-                                    RepeatFrequencyOptions-monthlyOccurence"
-                            >
-                            </select>
-                            <select name="monthlyWeekDay"
-                                id="monthlyWeekDay"
-                                ng-model="$parent.monthlyWeekDay"
-                                ng-options="w.name for w in weekdays"
-                                ng-disabled="monthlyRepeatOption != 'other'"
-                                class="form-control input-sm" >
-                            </select>
+                            <div class="RepeatFrequencyOptions-inputGroup
+                                RepeatFrequencyOptions-inputGroup--halves">
+                                <select name="monthlyOccurrence"
+                                    id="monthlyOccurrence"
+                                    ng-model="$parent.monthlyOccurrence"
+                                    ng-options="o.name for o in occurrences"
+                                    ng-disabled="monthlyRepeatOption != 'other'"
+                                    class="form-control input-sm
+                                        RepeatFrequencyOptions-spacedSelect
+                                        RepeatFrequencyOptions-monthlyOccurence"
+                                >
+                                </select>
+                                <select name="monthlyWeekDay"
+                                    id="monthlyWeekDay"
+                                    ng-model="$parent.monthlyWeekDay"
+                                    ng-options="w.name for w in weekdays"
+                                    ng-disabled="monthlyRepeatOption != 'other'"
+                                    class="form-control input-sm" >
+                                </select>
+                            </div>
                         </div>
                         <div class="form-group
                             RepeatFrequencyOptions-formGroup"
                             ng-if="schedulerFrequency && schedulerFrequency.value == 'yearly'">
                             <div class="radio
                                 RepeatFrequencyOptions-radioLabel">
+                                <span class="red-text">*</span>
                                 <label class="Form-inputLabel">
                                     <input type="radio"
                                         value="month"
@@ -271,24 +284,27 @@
                                     on
                                 </label>
                             </div>
-                            <select name="yearlyMonth"
-                                id="yearlyMonth"
-                                ng-model="$parent.yearlyMonth"
-                                ng-options="m.name for m in months"
-                                ng-disabled="yearlyRepeatOption != 'month'"
-                                class="form-control input-sm
-                                    RepeatFrequencyOptions-spacedSelect"
-                            >
-                            </select>
-                            <input name="yearlyMonthDay"
-                                id="yearlyMonthDay"
-                                sch-spinner="scheduler_form"
-                                class="scheduler-spinner
-                                    SpinnerInput"
-                                ng-model="$parent.yearlyMonthDay"
-                                min="1" max="31"
-                                ng-change="resetError('scheduler_yearlyMonthDay_error')"
-                            >
+                            <div class="RepeatFrequencyOptions-inputGroup
+                                RepeatFrequencyOptions-inputGroup--halvesWithNumber">
+                                <select name="yearlyMonth"
+                                    id="yearlyMonth"
+                                    ng-model="$parent.yearlyMonth"
+                                    ng-options="m.name for m in months"
+                                    ng-disabled="yearlyRepeatOption != 'month'"
+                                    class="form-control input-sm
+                                        RepeatFrequencyOptions-spacedSelect"
+                                >
+                                </select>
+                                <input name="yearlyMonthDay"
+                                    id="yearlyMonthDay"
+                                    sch-spinner="scheduler_form_new"
+                                    class="scheduler-spinner
+                                        SpinnerInput"
+                                    ng-model="$parent.yearlyMonthDay"
+                                    min="1" max="31"
+                                    ng-change="resetError('scheduler_yearlyMonthDay_error')"
+                                >
+                            </div>
                             <div class="error"
                                 ng-show="$parent.scheduler_yearlyMonthDay_error">
                                 The day must be between 1 and 31.
@@ -300,6 +316,7 @@
                             <div class="radio
                                 RepeatFrequencyOptions-radioLabel">
                                 <label class="Form-inputLabel">
+                                    <span class="red-text">*</span>
                                     <input type="radio"
                                         value="other"
                                         ng-model="$parent.yearlyRepeatOption"
@@ -309,32 +326,40 @@
                                     on the
                                 </label>
                             </div>
-                            <select name="yearlyOccurrence"
-                                id="yearlyOccurrence"
-                                ng-model="$parent.yearlyOccurrence"
-                                ng-options="o.name for o in occurrences"
-                                ng-disabled="yearlyRepeatOption != 'other'"
-                                class="form-control input-sm
-                                    RepeatFrequencyOptions-spacedSelect
-                                    RepeatFrequencyOptions-yearlyOccurence"
+                            <div
+                                class="RepeatFrequencyOptions-inputGroup
+                                    RepeatFrequencyOptions-inputGroup--thirds"
                             >
-                            </select>
-                            <select name="yearlyWeekDay"
-                                id="yearlyWeekDay"
-                                ng-model="$parent.yearlyWeekDay"
-                                ng-options="w.name for w in weekdays"
-                                ng-disabled="yearlyRepeatOption != 'other'"
-                                class="form-control input-sm
-                                    RepeatFrequencyOptions-spacedSelect"
-                            >
-                            </select>
-                            <select name="yearlyOtherMonth"
-                                id="yearlyOtherMonth"
-                                ng-model="$parent.yearlyOtherMonth"
-                                ng-options="m.name for m in months"
-                                ng-disabled="yearlyRepeatOption != 'other'"
-                                class="form-control input-sm">
-                            </select>
+                                <select name="yearlyOccurrence"
+                                    id="yearlyOccurrence"
+                                    ng-model="$parent.yearlyOccurrence"
+                                    ng-options="o.name for o in occurrences"
+                                    ng-disabled="yearlyRepeatOption != 'other'"
+                                    class="form-control input-sm
+                                        RepeatFrequencyOptions-spacedSelect
+                                        RepeatFrequencyOptions-yearlyOccurence
+                                        RepeatFrequencyOptions-thirdSelect"
+                                >
+                                </select>
+                                <select name="yearlyWeekDay"
+                                    id="yearlyWeekDay"
+                                    ng-model="$parent.yearlyWeekDay"
+                                    ng-options="w.name for w in weekdays"
+                                    ng-disabled="yearlyRepeatOption != 'other'"
+                                    class="form-control input-sm
+                                        RepeatFrequencyOptions-spacedSelect
+                                        RepeatFrequencyOptions-thirdSelect"
+                                >
+                                </select>
+                                <select name="yearlyOtherMonth"
+                                    id="yearlyOtherMonth"
+                                    ng-model="$parent.yearlyOtherMonth"
+                                    ng-options="m.name for m in months"
+                                    ng-disabled="yearlyRepeatOption != 'other'"
+                                    class="form-control input-sm
+                                        RepeatFrequencyOptions-thirdSelect">
+                                </select>
+                            </div>
                         </div>
                         <div class="form-group
                             RepeatFrequencyOptions-week
@@ -417,6 +442,7 @@
                             RepeatFrequencyOptions-formGroup"
                             ng-if="schedulerShowInterval">
                             <label class="Form-inputLabel">
+                                <span class="red-text">*</span>
                                 End
                             </label>
                             <div>
@@ -435,12 +461,13 @@
                             RepeatFrequencyOptions-formGroup"
                             ng-if="schedulerEnd && schedulerEnd.value == 'after'">
                             <label class="Form-inputLabel">
+                                <span class="red-text">*</span>
                                 Occurrence(s)
                             </label>
                                 <input
                                     ng-name="schedulerOccurrenceCount"
                                     ng-id="schedulerOccurrenceCount"
-                                    sch-spinner="scheduler_form"
+                                    sch-spinner="scheduler_form_new"
                                     class="scheduler-spinner
                                         SpinnerInput"
                                     ng-model="$parent.schedulerOccurrenceCount"
@@ -454,7 +481,7 @@
                             </div>
                         </div>
                         <div class="form-group RepeatFrequencyOptions-formGroup"
-                            ng-show="schedulerEnd && schedulerEnd.value == 'on'">
+                            ng-if="schedulerEnd && schedulerEnd.value == 'on'">
                             <label class="Form-inputLabel">
                                 <span class="red-text">*</span>
                                 End Date
@@ -462,18 +489,20 @@
                                     (mm/dd/yyyy)
                                 </span>
                             </label>
-                            <div class="input-group">
+                            <div class="input-group Form-inputGroup">
                                 <input type="text"
                                     name="schedulerEndDt"
                                     id="schedulerEndDt"
-                                    class="form-control input-sm"
-                                    ng-model="schedulerEndDt"
+                                    class="form-control input-sm
+                                        Form-textInput"
+                                    ng-model="$parent.schedulerEndDt"
                                     sch-date-picker
                                     data-min-today="true"
                                     placeholder="mm/dd/yyyy"
-                                    ng-change="resetError('scheduler_endDt_error')">
+                                    ng-change="$parent.resetError('scheduler_endDt_error')">
                                 <span class="input-group-btn">
-                                    <button class="btn btn-default btn-sm"
+                                    <button class="btn btn-default btn-sm
+                                        Form-inputButton Form-lookupButton"
                                         type="button"
                                         ng-click="showCalendar('schedulerEndDt')"
                                     >
@@ -534,7 +563,7 @@
                 </form>
                 <div class="SchedulerFormDetail-container
                     SchedulerFormDetail-container--error"
-                    ng-show="!schedulerIsValid">
+                    ng-show="!schedulerIsValid && scheduler_form_new.$dirty">
                     <p class="SchedulerFormDetail-errorText">
                         The scheduler options are invalid or incomplete.
                     </p>
diff --git a/awx/ui/client/src/scheduler/schedulertime.block.less b/awx/ui/client/src/scheduler/schedulertime.block.less
index 981641003e..4843da5f16 100644
--- a/awx/ui/client/src/scheduler/schedulertime.block.less
+++ b/awx/ui/client/src/scheduler/schedulertime.block.less
@@ -14,7 +14,7 @@ span.ui-spinner.ui-widget.ui-widget-content.ui-corner-all {
 .SchedulerTime-separator {
     margin-left: 3px;
     margin-right: 3px;
-    margin-top: 2px;
+    margin-top: 3px;
 }
 
 .SchedulerTime-utc {