Skip to content

Commit

Permalink
Merge pull request #1473 from alphagov/date-input-corrections
Browse files Browse the repository at this point in the history 
Update date input components
  • Loading branch information
@AgaDufrat
AgaDufrat authored Sep 20, 2024
2 parents 6907de9 + 58b64d5 commit 0b45cdc
Show file tree
Hide file tree
Showing 4 changed files with 209 additions and 154 deletions.
176 changes: 102 additions & 74 deletions app/views/campaign_requests/_request_details.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,87 +73,115 @@
</div>

<div class="form-group">
<span class="form-label">
<%= r.label :start_date do %>
Start date of campaign site<abbr title="required">*</abbr>
<% end %>
</span>

<br>

<span class="govuk-date-input__item">
<%= r.label :start_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :start_day, required: false, value: r.object.start_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "start-day" %>
</span>

<span class="govuk-date-input__item">
<%= r.label :start_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :start_month, required: false, value: r.object.start_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "start-month" %>
</span>

<span class="govuk-date-input__item">
<%= r.label :start_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :start_year, required: false, value: r.object.start_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "start-year" %>
</span>
<p class="help-block">
Once your site is live, you should allow time for testing before driving traffic to it. We advise leaving 1-2 days for no-cost campaigns, and at least a week for paid advertising campaigns.
</p>
<fieldset class="govuk-fieldset" role="group" aria-describedby="start-date-hint">
<span class="form-label">
<%= r.label :start_date do %>
Start date of campaign site<abbr title="required">*</abbr>
<% end %>
</span>

<div id="start-date-hint" class="govuk-hint">
For example, 27 3 2007
</div>

<div class="govuk-date-input" id="start-date">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :start_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :start_day, required: false, value: r.object.start_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "start-day", inputmode: "numeric" %>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :start_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :start_month, required: false, value: r.object.start_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "start-month", inputmode: "numeric" %>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :start_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :start_year, required: false, value: r.object.start_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "start-year", inputmode: "numeric" %>
</div>
</div>
</div>
<p class="help-block">
Once your site is live, you should allow time for testing before driving traffic to it. We advise leaving 1-2 days for no-cost campaigns, and at least a week for paid advertising campaigns.
</p>
</fieldset>
</div>

<div class="form-group">
<span class="form-label">
<%= r.label :end_date do %>
Proposed end date of campaign site<abbr title="required">*</abbr>
<% end %>
</span>

<br>

<span class="govuk-date-input__item">
<%= r.label :end_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :end_day, required: false, value: r.object.end_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "end-day" %>
</span>

<span class="govuk-date-input__item">
<%= r.label :end_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :end_month, required: false, value: r.object.end_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "end-month" %>
</span>

<span class="govuk-date-input__item">
<%= r.label :end_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :end_year, required: false, value: r.object.end_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "end-year" %>
</span>

<fieldset class="govuk-fieldset" role="group" aria-describedby="end-date-hint">
<span class="form-label">
<%= r.label :end_date do %>
Proposed end date of campaign site<abbr title="required">*</abbr>
<% end %>
</span>

<div id="start-date-hint" class="govuk-hint">
For example, 27 3 2007
</div>

<div class="govuk-date-input" id="end-date">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :end_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :end_day, required: false, value: r.object.end_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "end-day", inputmode: "numeric" %>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :end_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :end_month, required: false, value: r.object.end_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "end-month", inputmode: "numeric" %>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :end_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :end_year, required: false, value: r.object.end_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "end-year", inputmode: "numeric" %>
</div>
</div>
</div>
</fieldset>
</div>

<div class="form-group">
<span class="form-label">
<%= r.label :development_start_date do %>
Site build to commence on<abbr title="required">*</abbr>
<% end %>
</span>

<br>

<span class="govuk-date-input__item">
<%= r.label :development_start_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :development_start_day, required: false, value: r.object.development_start_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "development-start-day" %>
</span>

<span class="govuk-date-input__item">
<%= r.label :development_start_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :development_start_month, required: false, value: r.object.development_start_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "development-start-month" %>
</span>

<span class="govuk-date-input__item">
<%= r.label :development_start_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :development_start_year, required: false, value: r.object.development_start_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "development-start-year" %>
</span>

<fieldset class="govuk-fieldset" role="group" aria-describedby="development-start-date-hint">
<span class="form-label">
<%= r.label :development_start_date do %>
Site build to commence on<abbr title="required">*</abbr>
<% end %>
</span>

<div id="development-start-date-hint" class="govuk-hint">
For example, 27 3 2007
</div>

<div class="govuk-date-input" id="development-start-date">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :development_start_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :development_start_day, required: false, value: r.object.development_start_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "development-start-day", inputmode: "numeric" %>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :development_start_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :development_start_month, required: false, value: r.object.development_start_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "development-start-month", inputmode: "numeric" %>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :development_start_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :development_start_year, required: false, value: r.object.development_start_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "development-start-year", inputmode: "numeric" %>
</div>
</div>
</div>
<p class="help-block">
We expect the website to go live within 1 month of approval
</p>
</fieldset>
</div>
<p class="help-block">
We expect the website to go live within 1 month of approval
</p>

<div class="form-group">
<span class="form-label">
Expand Down
54 changes: 33 additions & 21 deletions app/views/content_advice_requests/_request_details.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,30 +51,42 @@
</fieldset>

<%= f.fields_for :time_constraint do |r| %>
<fieldset>
<legend>
<span>Time constraints</span>
</legend>

<fieldset class="govuk-fieldset" role="group">
<div class="form-group">
<h4>
<%= "Is there a date you need to have a response by?" %>
</h4>
<fieldset class="govuk-fieldset" role="group" aria-describedby="needed-by-date-hint">
<legend>
<span>Time constraints</span>
</legend>
<span class="form-label">
<%= r.label :needed_by_date do %>
Is there a date you need to have a response by?
<% end %>
</span>

<span class="govuk-date-input__item">
<%= r.label :needed_by_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :needed_by_day, required: false, value: r.object.needed_by_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-day" %>
</span>
<div id="start-date-hint" class="govuk-hint">
For example, 27 3 2007
</div>

<span class="govuk-date-input__item">
<%= r.label :needed_by_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :needed_by_month, required: false, value: r.object.needed_by_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-month" %>
</span>

<span class="govuk-date-input__item">
<%= r.label :needed_by_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :needed_by_year, required: false, value: r.object.needed_by_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "needed-by-year" %>
</span>
<div class="govuk-date-input" id="needed-by-date">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :needed_by_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :needed_by_day, required: false, value: r.object.needed_by_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-day", inputmode: "numeric" %>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :needed_by_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :needed_by_month, required: false, value: r.object.needed_by_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-month", inputmode: "numeric" %>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :needed_by_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :needed_by_year, required: false, value: r.object.needed_by_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "needed-by-year", inputmode: "numeric" %>
</div>
</div>
</fieldset>
</div>

<div class="form-group">
Expand Down
45 changes: 20 additions & 25 deletions app/views/remove_user_requests/_request_details.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,44 +31,39 @@
</div>

<%= f.fields_for :time_constraint do |r| %>

<h4>
<%= "MUST NOT be removed BEFORE" %>
</h4>

<div id="date-hint" class="govuk-hint">
For example, 27 3 2007
</div>

<div class="form-group">
<fieldset class="govuk-fieldset" role="group" aria-describedby="not-before-date-hint">
<span class="form-label">
<%= r.label :not_before_date do %>
MUST NOT be removed BEFORE
<% end %>
</span>

<div class="govuk-date-input" id="not-before-date-input">

<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :not_before_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :not_before_day, required: false, value: r.object.not_before_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-day" %>
</div>
<div id="not-before-date-hint" class="govuk-hint">
For example, 27 3 2007
</div>

<div class="govuk-date-input" id="not-before-date">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :not_before_day, "Day", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :not_before_day, required: false, value: r.object.not_before_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-day", inputmode: "numeric" %>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :not_before_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :not_before_month, required: false, value: r.object.not_before_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-month" %>
<%= r.label :not_before_month, "Month", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :not_before_month, required: false, value: r.object.not_before_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-month", inputmode: "numeric" %>
</div>
</div>

<div class="govuk-date-input__item">
<div class="govuk-form-group">
<%= r.label :not_before_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :not_before_year, required: false, value: r.object.not_before_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "not-before-year" %>
<%= r.label :not_before_year, "Year", class: "govuk-label govuk-date-input__label" %>
<%= r.text_field :not_before_year, required: false, value: r.object.not_before_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "not-before-year", inputmode: "numeric" %>
</div>
</div>

</div>

</fieldset>
</div>

<% end %>

<div class="form-group">
Expand Down
Loading

0 comments on commit 0b45cdc

Please sign in to comment.