diff --git a/app/views/contact_us/contacts/_new_left.html.erb b/app/views/contact_us/contacts/_new_left.html.erb new file mode 100644 index 0000000..1d8f999 --- /dev/null +++ b/app/views/contact_us/contacts/_new_left.html.erb @@ -0,0 +1,42 @@ +<%= form_for @contact, url: contacts_path do |f| %> +<% if ContactUs.require_name %> +
+ <%= f.label(:name, _('Name'), class: 'control-label') %> + <%= f.text_field(:name, + class: "form-control", + value: current_user.nil? ? '' : current_user.name(false), + readonly: current_user.present?, + "aria-required": true) %> +
+<% end %> +
+ <%= f.label(:email, _('Email'), class: 'control-label') %> + <%= f.email_field(:email, + class: "form-control", + value: current_user.nil? ? '' : current_user.email, + readonly: current_user.present?, + "aria-required": true) %> +
+<% if ContactUs.require_subject %> +
+ <%= f.label(:subject, _('Subject')) %> + <%= f.text_field(:subject, + class: "form-control", + "aria-required": true) %> +
+<% end %> +
+ <%= f.label(:message, _('Message')) %> + <%= f.text_area(:message, + class: "form-control", + rows: 10, + "aria-required": true) %> +
+<% if !user_signed_in? then %> +
+ <%= label_tag(nil, _('Security check')) %> + <%= recaptcha_tags %> +
+<% end %> + <%= f.button(_('Submit'), class: "btn btn-default", type: "submit") %> +<% end %> \ No newline at end of file diff --git a/app/views/contact_us/contacts/_new_right.html.erb b/app/views/contact_us/contacts/_new_right.html.erb new file mode 100644 index 0000000..8d87283 --- /dev/null +++ b/app/views/contact_us/contacts/_new_right.html.erb @@ -0,0 +1,39 @@ + +
+ <%= Rails.configuration.branding[:organisation][:name] %>
+ <% [Rails.configuration.branding[:organisation][:address_line1], + Rails.configuration.branding[:organisation][:address_line2], + Rails.configuration.branding[:organisation][:address_line3], + Rails.configuration.branding[:organisation][:address_line4], + Rails.configuration.branding[:organisation][:address_country]].each do |addr_line| %> +<% if addr_line.present? %> + <%= addr_line %>
+<% end %> +<% end %> +
+<% +telephone=Rails.configuration.branding[:organisation][:telephone] +if telephone.present? %> + <%= "#{_('Helpline')} #{telephone}" %> +<% end %> +<% +email=Rails.configuration.branding[:organisation][:email] +if email.present? %> +
+ <%= _('Email') %> + "><%= email %> +
+<% end %> +<% +link=Rails.configuration.branding[:organisation][:google_maps_link] +if link.present? %> + +<% end %> \ No newline at end of file diff --git a/app/views/contact_us/contacts/new.html.erb b/app/views/contact_us/contacts/new.html.erb index c8883dd..f98ec59 100644 --- a/app/views/contact_us/contacts/new.html.erb +++ b/app/views/contact_us/contacts/new.html.erb @@ -1,86 +1,20 @@ -<% javascript "views/contacts/new_contact.js" %> -

<%= _("Contact Us") %>

-

-<%= raw _('%{application_name} is provided by the %{organisation_name}.
You can find out more about us on our website. If you would like to contact us about %{application_name}, please fill out the form below.') % {organisation_name: Rails.configuration.branding[:organisation][:name], - organisation_url: Rails.configuration.branding[:organisation][:url], - application_name: Rails.configuration.branding[:application][:name]} %> -

-
- -
- - <%= form_for @contact, url: contacts_path, html: {class: "roadmap-form"} do |f| %> -
- <% if ContactUs.require_name %> -
- <%= f.label(:name, _('Name'), class: 'required') %> - <%= f.text_field(:name, class: "left-indent required input-large", value: current_user.nil? ? '' : current_user.name(false), readonly: !current_user.nil?) %> -
- <% end %> - -
- <%= f.label(:email, _('Email'), class: 'required') %> - <%= f.text_field(:email, class: "left-indent required input-large", value: current_user.nil? ? '' : current_user.email, readonly: !current_user.nil?) %> - -
- - <% if ContactUs.require_subject %> -
- <%= f.label(:subject, _('Subject'), class: 'required') %> - <%= f.text_field(:subject, class: "left-indent required input-large") %> -
- <% end %> - -
- <%= f.label(:message, _('Message'), class: "align-top required") %> - <%= f.text_area(:message, class: "required input-large", rows: 10, style: "height: 160px;") %> -
- <% if !user_signed_in? then %> -
- <%= label_tag(nil, _('Security check'), class: "align-top required") %> -
- <%= recaptcha_tags %> -
-
- <% end %> - -
-
 
- <%= render partial: 'shared/accessible_submit_button', - locals: {id: 'create_contact_submit', - val: 'Submit', - disabled_initially: true, - tooltip: _('Fill in the required fields')} %> -
-
- <% end %> - +
+

<%= _("Contact Us") %>

+

+ <%= raw _('%{application_name} is provided by the %{organisation_name}.
You can find out more about us on our website. If you would like to contact us about %{application_name}, please fill out the form below.') % {organisation_name: Rails.configuration.branding[:organisation][:name], + organisation_url: Rails.configuration.branding[:organisation][:url], + application_name: Rails.configuration.branding[:application][:name]} %> +

- - -
-
    - <% [Rails.configuration.branding[:organisation][:name], - Rails.configuration.branding[:organisation][:address_line1], - Rails.configuration.branding[:organisation][:address_line2], - Rails.configuration.branding[:organisation][:address_line3], - Rails.configuration.branding[:organisation][:address_line4], - Rails.configuration.branding[:organisation][:address_country]].each do |addr_line| %> - - <% if addr_line %> -
  • <%= addr_line %>
    • - <% end %> - <% end %> -
- -

<%= "#{_('Helpline')} #{Rails.configuration.branding[:organisation][:telephone]}" %>

-

<%= _('Email') %> <%= Rails.configuration.branding[:organisation][:email] %>

- - -
- - +
+
+
+ <%= render :partial => "contact_us/contacts/new_left" %> +
+
+
+ <%= render :partial => "contact_us/contacts/new_right" %>
-
+
\ No newline at end of file diff --git a/app/views/static_pages/about_us.html.erb b/app/views/static_pages/about_us.html.erb index 4c50c50..ebd9579 100644 --- a/app/views/static_pages/about_us.html.erb +++ b/app/views/static_pages/about_us.html.erb @@ -2,61 +2,58 @@
-
- -
-
- -

<%= raw _("Funding bodies increasingly require their grant-holders to produce Data Management Plans(DMP), both during the bid-preparation stage and after funding has been secured. %{application_name} has been produced by the %{organisation_name} to help research teams respond to this requirement, and any expectations that their institution or others may apply.") % {:organisation_name => Rails.configuration.branding[:organisation][:name], - :application_name => Rails.configuration.branding[:application][:name]} %>

-

<%= raw _("The %{organisation_abbreviation} worked closely with research funders and universities to produce a tool that assists researchers to produce an effective data management plan (DMP) to cater for the whole lifecycle of a project, from bid-preparation stage through to completion.") % {:organisation_abbreviation => Rails.configuration.branding[:organisation][:abbreviation]} %>

-

<%= _('How the tool works') %>

-

<%= _("There are a number of templates within the tool that represent the requirements of different funders and institutions. Users are asked three questions at the outset so we can determine the appropriate template to display (e.g. the ESRC template when applying for an ESRC grant). Guidance is provided to help you interpret and answer the questions. This guidance is provided by researcher funders, universities and disciplines.") %>

-

<%= _('Getting Started') %>

-

<%= _("If you have an account please sign in and start creating or editing your DMP.") %>

-

<%= _("If you do not have a %{application_name} account, click on") % {:application_name => Rails.configuration.branding[:application][:name]} %> <%= _('Sign up') %> <%= _("on the homepage.") %>

-

<%= _("Please visit the") %> '<%= _('Help') %>' <%= _("page for guidance.") %>

-

<%= _("Additional Information") %>

-

<%= _("We are constantly improving the user interface and functionality of %{application_name}. If you would like to contribute with feedback and suggestions, please contact us by emailing") % {:application_name => Rails.configuration.branding[:application][:name]} %> <%= Rails.configuration.branding[:organisation][:email] %>. <%= _("You can also report bugs and request new features directly on") %> <%= _('GitHub') %>

-
- - + + +
+
+

<%= raw _("Funding bodies increasingly require their grant-holders to produce Data Management Plans(DMP), both during the bid-preparation stage and after funding has been secured. %{application_name} has been produced by the %{organisation_name} to help research teams respond to this requirement, and any expectations that their institution or others may apply.") % {:organisation_name => Rails.configuration.branding[:organisation][:name], + :application_name => Rails.configuration.branding[:application][:name]} %>

+

<%= raw _("The %{organisation_abbreviation} worked closely with research funders and universities to produce a tool that assists researchers to produce an effective data management plan (DMP) to cater for the whole lifecycle of a project, from bid-preparation stage through to completion.") % {:organisation_abbreviation => Rails.configuration.branding[:organisation][:abbreviation]} %>

+

<%= _('How the tool works') %>

+

<%= _("There are a number of templates within the tool that represent the requirements of different funders and institutions. Users are asked three questions at the outset so we can determine the appropriate template to display (e.g. the ESRC template when applying for an ESRC grant). Guidance is provided to help you interpret and answer the questions. This guidance is provided by researcher funders, universities and disciplines.") %>

+

<%= _('Getting Started') %>

+

<%= _("If you have an account please sign in and start creating or editing your DMP.") %>

+

<%= _("If you do not have a %{application_name} account, click on") % {:application_name => Rails.configuration.branding[:application][:name]} %> <%= _('Sign up') %> <%= _("on the homepage.") %>

+

<%= _("Please visit the") %> '<%= _('Help') %>' <%= _("page for guidance.") %>

+

<%= _("Additional Information") %>

+

<%= _("We are constantly improving the user interface and functionality of %{application_name}. If you would like to contribute with feedback and suggestions, please contact us by emailing") % {:application_name => Rails.configuration.branding[:application][:name]} %> <%= Rails.configuration.branding[:organisation][:email] %>. <%= _("You can also report bugs and request new features directly on") %> <%= _('GitHub') %>

+
+ +
+

<%= raw _('%{application_name} stories from the %{organisation_abbreviation} website') % { + :organisation_abbreviation => Rails.configuration.branding[:organisation][:abbreviation], + :application_name => Rails.configuration.branding[:application][:name] } %>

+ <% news_left = @dcc_news_feed.entries.count %> + <% @dcc_news_feed.entries.each do |entry| %> +

<%= entry.title.sanitize %>

+ <% summary = entry.summary.sanitize %> + <% summary = summary.gsub(/\A])+>/, "") %> + <% summary = summary.gsub(/\A])+>/, "") %> + <% name = summary[/\A[\s\w]*([^,])/].strip %> + <% summary = summary.gsub(/\A.*div>/, "") %> + <% summary = summary.gsub(/

.*\z/, "") %> +

<%= raw summary.strip %>

+ <% author = entry.author.blank? ? 'anonymous' : entry.author %> +

<%= _('By ') %> <%= author %> <%= _(' on ') %> <%= entry.published.strftime("%d/%m/%Y") %>

+

<%= _('Read more on the ') %><%= link_to 'DCC Website', entry.url %>

+ + <%if news_left.to_i > 1 then %> +
+ <%else%> +
+ <%end%> + <% news_left = news_left - 1 %> + <% end %>
+
\ No newline at end of file diff --git a/lib/assets/javascripts/application.js b/lib/assets/javascripts/application.js index f0fdad8..8ba5321 100644 --- a/lib/assets/javascripts/application.js +++ b/lib/assets/javascripts/application.js @@ -30,23 +30,28 @@ //= require timeago/jquery.timeago.js //= require tinymce/tinymce.min.js +//= require bootstrap/dist/js/bootstrap.min + // utils JS files //= require define.js //= require utils/debounce.js //= require utils/tinymce.js +//= require utils/validate.js +//= require utils/ariatiseForm.js // views JS files //= require views/notes/add.js //= require views/notes/show.js //= require views/notes/edit.js //= require views/notes/archive.js +//= require views/contacts/new.js // Rest of JS files //= require dmproadmap/accordions.js //= require dmproadmap/forms.js //= require dmproadmap/modals.js //= require dmproadmap/tables.js -//= require dmproadmap/tabs.js +// require dmproadmap/tabs.js //= require views/shared/login_form.js //= require views/shared/register_form.js diff --git a/lib/assets/javascripts/dmproadmap/forms.js b/lib/assets/javascripts/dmproadmap/forms.js index 0b07e36..5937729 100644 --- a/lib/assets/javascripts/dmproadmap/forms.js +++ b/lib/assets/javascripts/dmproadmap/forms.js @@ -85,7 +85,6 @@ if(err.length <= 0){ err = $(idbox).siblings("span.error-tooltip-right"); } - console.log(err.length + ' - ' + errorMessage + ' - ' + $(input).val().trim().length); // If an error element is available and the error message is not empty and the field // is not empty (unless its a required field!) @@ -97,4 +96,3 @@ $(input).addClass('red-border'); } } - diff --git a/lib/assets/javascripts/dmproadmap/tabs.js b/lib/assets/javascripts/dmproadmap/tabs.js index 31f108b..17cd9af 100644 --- a/lib/assets/javascripts/dmproadmap/tabs.js +++ b/lib/assets/javascripts/dmproadmap/tabs.js @@ -1,3 +1,4 @@ +/* $(document).ready(function(){ $(".tab-panels div.tab-panel:not(.active)").hide(); @@ -47,4 +48,5 @@ return sParameterName[1]; } } -} \ No newline at end of file +} +*/ diff --git a/lib/assets/javascripts/utils/ariatiseForm.js b/lib/assets/javascripts/utils/ariatiseForm.js new file mode 100644 index 0000000..6762df8 --- /dev/null +++ b/lib/assets/javascripts/utils/ariatiseForm.js @@ -0,0 +1,122 @@ +/* + dmproadmap.utils.ariatiseForm augmentates a HTML form by: + - Associating help text with form controls + - Adding validation state to each form group + - Adding specific attributes for user with assistive technologies. + + For example the following form : +
+
+ + +
+
+ + +
+
+ + +
+ +
+ will be augmentated as follows: +
+
+ + + +
+
+ + + +
+
+ + +
+ +
+ and any time the buttton is clicked the validation according to each type (e.g. text, email) will be triggered. An invalid result for a form-control will: + 1. Add has-error class to its form-group parent and aria-invalid="true" to the form-control + 2. Show its help-block following sibling + 3. Prevent form to be submitted +*/ +(function(ctx){ + var requiredFields=(function(selector){ + return $(selector).find('.form-control').filter('[aria-required="true"]'); + }); + var blockHelp=(function (id,type){ + var msg='Please fill out this field with a valid '+type+'.'; //TODO internationalisation + return ''; + }); + var ariaDescribedBy=(function(value){ + return { 'aria-describedby': value }; + }); + var ariaInvalid=(function(value){ + return { 'aria-invalid': value }; + }); + var validationStates={ + hasWarning: 'has-warning', + hasError: 'has-error', + hasSuccess: 'has-success' + }; + var getTypeForSubmittableElement=(function(el){ + // Reference from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form-associated_content + if($(el).is('input')){ + return $(el).attr('type'); // available types at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form__types + } + else if($(el).is('select')){ + return 'select'; + } + else if($(el).is('textarea')){ + return 'textarea'; + } + else + return 'unknown'; + }); + var isValid=(function(type, value){ + // TODO add more validation for each new type coming along by: + // 1. defining a function at dmproadmap.utils.validate + // 2. adding the case in the switch below + switch(type){ + case 'text': + case 'textarea': + return dmproadmap.utils.validate.text(value); + case 'email': + return dmproadmap.utils.validate.email(value); + default: + return false; + } + }); + var valid=(function(el){ + $(el).parent().removeClass(validationStates.hasError); + $(el).attr(ariaInvalid(false)); + $(el).next().hide(); + }); + var invalid=(function(el){ + $(el).parent().addClass(validationStates.hasError); + $(el).attr(ariaInvalid(true)); + $(el).next().show(); + }); + ctx.init=ctx.init || (function(options){ + if($ && options && options.selector){ + requiredFields(options.selector).each(function(i,el){ + $(el).attr(ariaDescribedBy('help'+i)); + $(el).after(blockHelp('help'+i, getTypeForSubmittableElement(el))); + }); + $(options.selector+' [type="submit"]').click(function(e){ + requiredFields(options.selector).each(function(i,el){ + if(isValid(getTypeForSubmittableElement(el),$(el).val())){ + valid(el); + } + else{ + e.preventDefault(); + invalid(el); + } + }); + }); + } + }); +})(define('dmproadmap.utils.ariatiseForm')); \ No newline at end of file diff --git a/lib/assets/javascripts/utils/validate.js b/lib/assets/javascripts/utils/validate.js new file mode 100644 index 0000000..5ff7c09 --- /dev/null +++ b/lib/assets/javascripts/utils/validate.js @@ -0,0 +1,24 @@ +(function(ctx){ + /* + Validates whether or not the value length is greather than zero after + removing whitespace from both ends of the string. + @param value String to verify its length + @return true if it has a length greater than zero; otherwise, false. + */ + ctx.text = ctx.text || (function(value){ + if(Object.prototype.toString.call(value) === '[object String]') + return value.trim().length > 0; + return false; + }); + /* + Validates whether or not the value matches the regular expression + for an email + @param value String the to search for a match + @return true if there is match between the email regex and the specific string; otherwise, false. + */ + ctx.email = ctx.email || (function(value){ + if(Object.prototype.toString.call(value) === '[object String]') + return /[^@\s]+@(?:[-a-z0-9]+\.)+[a-z]{2,}$/.test(value); + return false; + }); +})(define('dmproadmap.utils.validate')); \ No newline at end of file diff --git a/lib/assets/javascripts/views/contacts/new.js b/lib/assets/javascripts/views/contacts/new.js new file mode 100644 index 0000000..771a2c5 --- /dev/null +++ b/lib/assets/javascripts/views/contacts/new.js @@ -0,0 +1,3 @@ +$(document).ready(function(){ + dmproadmap.utils.ariatiseForm.init({ selector: '#new_contact_us_contact' }); +}); \ No newline at end of file diff --git a/lib/assets/javascripts/views/contacts/new_contact.js b/lib/assets/javascripts/views/contacts/new_contact.js deleted file mode 100644 index 9f2ea63..0000000 --- a/lib/assets/javascripts/views/contacts/new_contact.js +++ /dev/null @@ -1,25 +0,0 @@ -var RecaptchaOptions = { - theme : "clean" -}; - -$(document).ready(function(){ - // Run the input validations when the focus changes - $("#contact_us_contact_email").blur(function(){ - toggleFormElementError(this, validateEmail($(this).val().trim())); - }); - - $("input[type='text'], input[type='email'], textarea").change(function(e){ - var enable = ($("#contact_us_contact_name").val().trim().length > 0 && - validateEmail($("#contact_us_contact_email").val().trim()) === '' && - $("#contact_us_contact_subject").val().trim().length > 0 && - $("#contact_us_contact_message").val().trim().length > 0); - - // Disabled recaptcha since always sets enable, TODO change when we tackle https://github.com/DMPRoadmap/roadmap/issues/501 - // if($("#recaptcha-anchor")){ - // if($("#recaptcha-anchor").prop('aria-checked') != 'true'){ - // enable = false; - // } - // } - $("#create_contact_submit").attr('aria-disabled', !enable); - }); -}); diff --git a/lib/assets/stylesheets/application.scss b/lib/assets/stylesheets/application.scss index 67270bb..2dcf13e 100644 --- a/lib/assets/stylesheets/application.scss +++ b/lib/assets/stylesheets/application.scss @@ -21,16 +21,15 @@ */ @import "font-awesome"; -/* SASS Variables */ +/* Overrides to Bootstrap styling */ @import "dmproadmap"; /* These will eventually go away once Boostrap is in place */ +/* @import "dmproadmap/base"; -@import "dmproadmap/tabs"; +@import "dmproadmap/tabs"; @import "dmproadmap/accordions"; @import "dmproadmap/modals"; @import "dmproadmap/tables"; @import "dmproadmap/forms"; - -/* Overrides to Bootstrap styling */ -@import "overrides"; +*/ diff --git a/lib/assets/stylesheets/dmproadmap.scss b/lib/assets/stylesheets/dmproadmap.scss index 1b08c9e..b751bd8 100644 --- a/lib/assets/stylesheets/dmproadmap.scss +++ b/lib/assets/stylesheets/dmproadmap.scss @@ -4,23 +4,15 @@ src: font-url('GillSansLight.ttf') format('truetype'); font-weight: normal; } - +/* $black: #000; $white: #FFF; -$dark-grey: #333; -$medium-grey: #827D7E; -$light-grey: #CCC; - -$font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - - - -$primary-color: #4f5253; - $highlight-color: $black; $highlight-background-color: #F36F24; +*/ /* MESSAGES */ +/* $error-color: $white; $error-background: #990000; @@ -29,31 +21,95 @@ $tooltip-color: $white; $tooltip-background: #333; +*/ /* BUTTONS */ +/* $disabled-button-color: #808080; $cancel-button-color: #F17D04; +*/ /* HEADER STYLING */ +/* $header-height: 165px; $header-logo-width: 165px; $header-background: $white; $header-text-color: $black; +*/ /* $header-background: linear-gradient(#ED6406, #F59503); */ /* HEADER LOGO POSITIONING */ +/* $header-logo-top-margin: 20px; $header-logo-left-margin: 10px; +*/ - -/* EVERYTHING BELOW THIS LINE IS SPECIFIC TO THE BOOSTRAP 3.x IMPLEMENTATION OF ROADMAP */ -/* ------------------------------------------------------------------------------------ */ +/* EVERYTHING BELOW THIS LINE IS SPECIFIC TO THE BOOSTRAP 3.x IMPLEMENTATION OF ROADMAP */ +/* we unfortunately need to use `!important` throughout to get it to override consistently */ +/* ----------------------------------------------------------------------------------------- */ /* SASS variables */ -$body-background: $white; +$dark-grey: #333; +$medium-grey: #827D7E; +$light-grey: #CCC; + +$font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + +$primary-color: #4f5253; +$primary-reverse-color: #FFF; /* Typically used for the font color when using $primary-color as the background-color */ + +$body-background: #FFF; $header-font: "GillSansLight"; $footer-background: $body-background; $footer-color: $dark-grey; -$footer-margin-top: 40px; +$footer-margin-top: 30px; + +$tab-borders: 2px solid $primary-color; + + + +/* GENERIC PAGE STYLING */ +/* ------------------------------------------ */ +a, a:visited, a:hover, a:focus { + color: $primary-color !important; +} +footer { + margin-top: $footer-margin-top; +} + +/* GENERIC TAB STYLING */ +/* ------------------------------------------ */ +/* Make sure the active tab is the primarycolor and that it has a border */ +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + color: $primary-reverse-color !important; + background-color: $primary-color !important; + border: $tab-borders; + border-bottom: none; +} +/* make sure that inactive tabs have a border */ +.nav-tabs > li:not(.active) > a { + border: 1px solid $light-grey; + border-bottom: none; +} +/* make sure that inactive tabs become the primary color when they receive focus/hover */ +.nav-tabs > li:not(.active) > a:hover, +.nav-tabs > li:not(.active) > a:focus { + color: $primary-reverse-color !important; + background-color: $primary-color !important; + border: $tab-borders; + border-bottom: none; +} +/* Make user that the tab content is surrounded by a border and has adequate padding */ +.tab-content { + border: $tab-borders; + margin-top: -1px; + + .tab-pane { + padding: 15px 15px 25px 15px; + } +} +