External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 01:17:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

fixed layout issues with form scheduler

Browse Source
This commit is contained in:
John Mitchell
2016-02-12 12:00:26 -05:00
parent f8550a478b
commit 8ad62b6669
2 changed files with 109 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
awx/ui/client/src/scheduler/schedulerForm.partial.html
View File

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

2
awx/ui/client/src/scheduler/schedulertime.block.less
View File

@@ -14,7 +14,7 @@ span.ui-spinner.ui-widget.ui-widget-content.ui-corner-all {
.SchedulerTime-separator { .SchedulerTime-separator {
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
margin-top: 2px; margin-top: 3px;
} }
.SchedulerTime-utc { .SchedulerTime-utc {