diff --git a/app/views/plans/_plan_details.html.erb b/app/views/plans/_plan_details.html.erb index 9ed400a..541b97b 100644 --- a/app/views/plans/_plan_details.html.erb +++ b/app/views/plans/_plan_details.html.erb @@ -196,117 +196,117 @@
-

<%= _('This plan is based on:')%>

+

<%= _('This plan is based on:')%>

-

- <% if based_on.org != plan.template.org %> - <%= _('A version of ') %> "<%= based_on.title %>" <%= based_on.title.downcase.end_with?('template') ? '' : _('template') %><%= _(' that has been customised by ') %> <%= plan.template.org.name %> - <% else %> - <%= _('The')%> "<%= plan.template.title %>" <%= (plan.template.is_default ? _('generic template') : plan.template.title.downcase.end_with?('template') ? '' : _('template')) %> <%= _(' provided by ') %><%= plan.template.org.name %> - <% end %> -

+

+ <% if based_on.org != plan.template.org %> + <%= _('A version of ') %> "<%= based_on.title %>" <%= based_on.title.downcase.include?(_('template')) ? '' : _('template') %><%= _(' that has been customised by ') %> <%= plan.template.org.name %> + <% else %> + <%= _('The')%> "<%= plan.template.title %>" <%= (plan.template.is_default ? _('generic template') : plan.template.title.downcase.include?(_('template')) ? '' : _('template')) %> <%= _(' provided by ') %><%= plan.template.org.name %> + <% end %> +

- + <% phases = plan.template.phases %> - <% if phases.count == 1 %> - <% phases.each do |phase| %> -
- <%= link_to _('Answer questions'), edit_plan_phase_path(plan,phase), :class => 'btn btn-primary' %> - <%= _('Export') %> -
- <%= render :partial => "plans/export", locals: {plan: plan, phase: phases[0] } %> -
-

<%= raw phase.description %>

- <% if phase.sections.any? %> - - - - - - - - - <% phase.sections.each do |section| %> - - - - - <%end%> - -
<%= _('Sections')%><%= _('Questions')%>
-

<%= section.title %>

- 		- <% if section.questions.any? %> -
    - <% section.questions.each do |ques|%> -
  • - <%= raw ques.text %> -
    • - <%end%> -
- <%end%> -
- <%end%> - <%end%> + <% if phases.count == 1 %> + <% phases.each do |phase| %> +
+ <%= link_to _('Answer questions'), edit_plan_phase_path(plan,phase), :class => 'btn btn-primary' %> + <%= _('Export') %> +
+ <%= render :partial => "plans/export", locals: {plan: plan, phase: phases[0] } %> +
+

<%= raw phase.description %>

+ <% if phase.sections.any? %> + + + + + + + + + <% phase.sections.each do |section| %> + + + + + <%end%> + +
<%= _('Sections')%><%= _('Questions')%>
+

<%= section.title %>

+ 		+ <% if section.questions.any? %> +
    + <% section.questions.each do |ques|%> +
  • + <%= raw ques.text %> +
    • + <%end%> +
+ <%end%> +
+ <%end%> + <%end%> <%else%> -
- <%= raw plan.template.description %> -
- <% phases.each do |phase| %> -
-
-
- -

<%= phase.title %>

- -
-
-
-
- <%= link_to _('Answer questions'), edit_plan_phase_path(plan,phase), :class => 'btn btn-primary' %> - <%= _('Export') %> -
- <%= render :partial => "plans/export", locals: {plan: plan, phase: phase} %> -
-

<%= raw phase.description %> -

+
+ <%= raw plan.template.description %> +
+ <% phases.each do |phase| %> +
+
+
+ +

<%= phase.title %>

+ +
+
+
+
+ <%= link_to _('Answer questions'), edit_plan_phase_path(plan,phase), :class => 'btn btn-primary' %> + <%= _('Export') %> +
+ <%= render :partial => "plans/export", locals: {plan: plan, phase: phase} %> +
+

<%= raw phase.description %> +

- <% if phase.sections.any? %> - - - - - - - - - <% phase.sections.each do |section| %> - - - - - <%end%> - -
<%= _('Sections')%><%= _('Questions')%>
-

<%= section.title %>

- 		- <% if section.questions.any? %> -
    - <% section.questions.each do |ques|%> -
  • - - <%= raw ques.text %> -
    • - <%end%> -
- <%end%> -
- <%end%> -
-
-
-
- <%end%> + <% if phase.sections.any? %> + + + + + + + + + <% phase.sections.each do |section| %> + + + + + <%end%> + +
<%= _('Sections')%><%= _('Questions')%>
+

<%= section.title %>

+ 		+ <% if section.questions.any? %> +
    + <% section.questions.each do |ques|%> +
  • + - <%= raw ques.text %> +
    • + <%end%> +
+ <%end%> +
+ <%end%> +
+
+
+
+ <%end%> diff --git a/app/views/plans/new.html.erb b/app/views/plans/new.html.erb index 085a34a..0c95111 100644 --- a/app/views/plans/new.html.erb +++ b/app/views/plans/new.html.erb @@ -1,4 +1,4 @@ -<% javascript "create_plan.js" %> +<% javascript "plans/create_plan.js" %>

<%= _('Create a new plan') %>

@@ -19,7 +19,7 @@ -
+
<%= _('If applying for funding, state the title exactly as in the proposal.') %>
@@ -74,7 +74,11 @@
- + + + <%= render partial: 'shared/accessible_submit_button', + locals: {id: 'create_plan_submit', val: 'Create Plan', disabled_initially: false} %> + <% end %>
diff --git a/app/views/shared/_accessible_submit_button.html.erb b/app/views/shared/_accessible_submit_button.html.erb new file mode 100644 index 0000000..0d65712 --- /dev/null +++ b/app/views/shared/_accessible_submit_button.html.erb @@ -0,0 +1,26 @@ + + + + + \ No newline at end of file diff --git a/config/application.rb b/config/application.rb index 0a0551f..5859929 100644 --- a/config/application.rb +++ b/config/application.rb @@ -75,7 +75,7 @@ config.assets.precompile += %w(jquery-accessible-autocomplet-list-aria.js) config.assets.precompile += %w(export_configure.js) config.assets.precompile += %w(toolbar.js) - config.assets.precompile += %w(create_plan.js) + config.assets.precompile += %w(plans/create_plan.js) config.assets.precompile += %w(admin.js) config.assets.precompile += %w(admin.css) diff --git a/lib/assets/javascripts/create_plan.js b/lib/assets/javascripts/create_plan.js deleted file mode 100644 index c3a8cb5..0000000 --- a/lib/assets/javascripts/create_plan.js +++ /dev/null @@ -1,69 +0,0 @@ -$(document).ready(function(){ - // Form submit button is disabled until all requirements are met - $(".form-submit").prop("disabled", true).prop("aria-disabled", true); - $("#available-templates").hide(); - - // retrieve the template options and toggle the submit button on page reload - handleComboboxChange(); - handleCheckboxClick("org", $("#plan_no_org").prop("checked")); - handleCheckboxClick("funder", $("#plan_no_funder").prop("checked")); - - // When the hidden org and funder id fields change toogle the submit button - $("#plan_org_id, #plan_funder_id").change(function(){ - handleComboboxChange(); - }); - - // Make sure the checkbox is unchecked if we're entering text - $(".js-combobox").keyup(function(){ - var whichOne = $(this).prop('id').split('_')[1]; - $("#plan_no_" + whichOne).prop("checked", false); - }); - - // If the user clicks the no Org/Funder checkbox disable the dropdown - // and hide clear button - $("#plan_no_org, #plan_no_funder").click(function(){ - var whichOne = $(this).prop('id').split('_')[2]; - handleCheckboxClick(whichOne, this.checked); - }); -}); - -// Only display the submit button if the user has made each decision -// ------------------------------------------------------------- -function handleComboboxChange(){ - // If the (no_org checkbox is checked OR an org was selected) AND - // (no_funder checkbox is checked OR a funder was selected) - var retrieve = ($("#plan_no_org").prop("checked") || - $("#plan_org_id").val().trim().length > 0) && - ($("#plan_no_funder").prop("checked") || - $("#plan_funder_id").val().trim().length > 0); - - if(retrieve){ - $(".form-submit").prop('disabled', false).prop("aria-disabled", false); - - // If the templates section isn't available then submit the form to find the template options - if($("#available_templates").html() == undefined){ - if(!$("#plan_template_id").val()){ - $("form").submit(); - } - } - - }else{ - $("#available-templates").fadeOut(); - $("#plan_template_id").val(""); - - $(".form-submit").prop('disabled', true).prop("aria-disabled", true); - } -} - -// Clear the combobox and disable it if the box was checked -// ------------------------------------------------------------- -function handleCheckboxClick(name, checked){ - $("#plan_" + name + "_name").prop("disabled", checked); - if(checked){ - $("#plan_" + name + "_name").val(""); - $("#plan_" + name + "_id").val("").change(); - $("#plan_" + name + "_name").siblings(".combobox-clear-button").hide(); - }else{ - $(".form-submit").prop('disabled', true).prop("aria-disabled", true); - } -} diff --git a/lib/assets/javascripts/plans/create_plan.js b/lib/assets/javascripts/plans/create_plan.js new file mode 100644 index 0000000..4e3a652 --- /dev/null +++ b/lib/assets/javascripts/plans/create_plan.js @@ -0,0 +1,71 @@ +$(document).ready(function(){ + $("#available-templates").hide(); + + // retrieve the template options and toggle the submit button on page reload + handleComboboxChange(); + handleCheckboxClick("org", $("#plan_no_org").prop("checked")); + handleCheckboxClick("funder", $("#plan_no_funder").prop("checked")); + + // When the hidden org and funder id fields change toogle the submit button + $("#plan_org_id, #plan_funder_id").change(function(){ + handleComboboxChange(); + }); + + // Make sure the checkbox is unchecked if we're entering text + $(".js-combobox").keyup(function(){ + var whichOne = $(this).prop('id').split('_')[1]; + $("#plan_no_" + whichOne).prop("checked", false); + }); + + // If the user clicks the no Org/Funder checkbox disable the dropdown + // and hide clear button + $("#plan_no_org, #plan_no_funder").click(function(){ + var whichOne = $(this).prop('id').split('_')[2]; + handleCheckboxClick(whichOne, this.checked); + }); +}); + +// Only display the submit button if the user has made each decision +// ------------------------------------------------------------- +function handleComboboxChange(){ + // If the (no_org checkbox is checked OR an org was selected) AND + // (no_funder checkbox is checked OR a funder was selected) + var retrieve = ($("#plan_no_org").prop("checked") || + $("#plan_org_id").val().trim().length > 0) && + ($("#plan_no_funder").prop("checked") || + $("#plan_funder_id").val().trim().length > 0); + + if(retrieve){ + $("#create_plan_submit").attr('clickable', 'true'); + // $(".form-submit").prop('disabled', false).prop("aria-disabled", false); + + // If the templates section isn't available then submit the form to find the template options + if($("#available_templates").html() == undefined){ + if(!$("#plan_template_id").val()){ + $("form").submit(); + } + } + + }else{ + $("#available-templates").fadeOut(); + $("#plan_template_id").val(""); + + $("#create_plan_submit").attr('clickable', 'false'); + //$(".form-submit").prop('disabled', true).prop("aria-disabled", true); + } +} + +// Clear the combobox and disable it if the box was checked +// ------------------------------------------------------------- +function handleCheckboxClick(name, checked){ + $("#plan_" + name + "_name").prop("disabled", checked); + + if(checked){ + $("#plan_" + name + "_name").val(""); + $("#plan_" + name + "_id").val("").change(); + $("#plan_" + name + "_name").siblings(".combobox-clear-button").hide(); + }else{ + $("#create_plan_submit").attr('clickable', 'false'); + //$(".form-submit").prop('disabled', true).prop("aria-disabled", true); + } +} diff --git a/lib/assets/stylesheets/dmproadmap.scss b/lib/assets/stylesheets/dmproadmap.scss index 453bf4e..cc5eeef 100644 --- a/lib/assets/stylesheets/dmproadmap.scss +++ b/lib/assets/stylesheets/dmproadmap.scss @@ -4,6 +4,7 @@ $header-font: "GillSansLight"; $white: #FFF; +$dark-grey: #333; $primary-color: #F49700; $disabled-button-color: #CCC; @@ -15,6 +16,15 @@ @extend .fa-#{$icon}:before; } +.arrow-left { + display: inline-block; + width: 0; + height: 0; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + border-right: 12px solid $dark-grey; +} + .main_header { margin-bottom: 20px; } @@ -39,6 +49,7 @@ text-decoration: none; float: left; /* positions the legend within the fieldset box */ + padding-top: 20px; border-bottom: none; } @@ -74,10 +85,32 @@ -moz-border-radius: 10px; border-radius: 10px; } - input.form-submit:disabled { + input.form-submit[clickable='false'] { background-color: $disabled-button-color; } - + + input.form-submit:focus + [role="tooltip"] { + display: inline-block; + } + + .submit-tooltip { + display: none; + margin-left: 5px; + + .arrow-left { + vertical-align: middle; + margin-right: -5px; + } + .submit-tooltip-msg { + color: $white; + background-color: $dark-grey; + padding: 5px 5px 8px 5px; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + } + } } }