fixed layout issues with form scheduler

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

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,6 +247,8 @@
on the on the
</label> </label>
</div> </div>
<div class="RepeatFrequencyOptions-inputGroup
RepeatFrequencyOptions-inputGroup--halves">
<select name="monthlyOccurrence" <select name="monthlyOccurrence"
id="monthlyOccurrence" id="monthlyOccurrence"
ng-model="$parent.monthlyOccurrence" ng-model="$parent.monthlyOccurrence"
@@ -256,11 +267,13 @@
class="form-control input-sm" > class="form-control input-sm" >
</select> </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,6 +284,8 @@
on on
</label> </label>
</div> </div>
<div class="RepeatFrequencyOptions-inputGroup
RepeatFrequencyOptions-inputGroup--halvesWithNumber">
<select name="yearlyMonth" <select name="yearlyMonth"
id="yearlyMonth" id="yearlyMonth"
ng-model="$parent.yearlyMonth" ng-model="$parent.yearlyMonth"
@@ -282,13 +297,14 @@
</select> </select>
<input name="yearlyMonthDay" <input name="yearlyMonthDay"
id="yearlyMonthDay" id="yearlyMonthDay"
sch-spinner="scheduler_form" sch-spinner="scheduler_form_new"
class="scheduler-spinner class="scheduler-spinner
SpinnerInput" SpinnerInput"
ng-model="$parent.yearlyMonthDay" ng-model="$parent.yearlyMonthDay"
min="1" max="31" min="1" max="31"
ng-change="resetError('scheduler_yearlyMonthDay_error')" 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,6 +326,10 @@
on the on the
</label> </label>
</div> </div>
<div
class="RepeatFrequencyOptions-inputGroup
RepeatFrequencyOptions-inputGroup--thirds"
>
<select name="yearlyOccurrence" <select name="yearlyOccurrence"
id="yearlyOccurrence" id="yearlyOccurrence"
ng-model="$parent.yearlyOccurrence" ng-model="$parent.yearlyOccurrence"
@@ -316,7 +337,8 @@
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-yearlyOccurence
RepeatFrequencyOptions-thirdSelect"
> >
</select> </select>
<select name="yearlyWeekDay" <select name="yearlyWeekDay"
@@ -325,7 +347,8 @@
ng-options="w.name for w in weekdays" 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-thirdSelect"
> >
</select> </select>
<select name="yearlyOtherMonth" <select name="yearlyOtherMonth"
@@ -333,9 +356,11 @@
ng-model="$parent.yearlyOtherMonth" ng-model="$parent.yearlyOtherMonth"
ng-options="m.name for m in months" ng-options="m.name for m in months"
ng-disabled="yearlyRepeatOption != 'other'" ng-disabled="yearlyRepeatOption != 'other'"
class="form-control input-sm"> class="form-control input-sm
RepeatFrequencyOptions-thirdSelect">
</select> </select>
</div> </div>
</div>
<div class="form-group <div class="form-group
RepeatFrequencyOptions-week RepeatFrequencyOptions-week
RepeatFrequencyOptions-formGroup" RepeatFrequencyOptions-formGroup"
@@ -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>

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 {