From e97cab73bdfbec75b412b787427d293031dce039 Mon Sep 17 00:00:00 2001 From: John Pinto Date: Tue, 15 Apr 2025 09:52:07 +0100 Subject: [PATCH 1/5] Add border and arrow for dropdown fields. Contributed by @gjacob24 of DCC DMPonline. The changes: - Replaced Selection_tag classes incorrectly set with 'form-control' to 'form-select'. Co-authored-by: gjacob24 --- .../registrations/_personal_details.html.erb | 4 ++-- app/views/layouts/modal_search/README.md | 4 ++-- app/views/org_admin/users/edit.html.erb | 4 ++-- app/views/plans/_download_form.html.erb | 16 ++++++++-------- app/views/plans/new.html.erb | 2 +- .../_new_edit_question_option_based.html.erb | 2 +- .../research_outputs/licenses/_form.html.erb | 2 +- .../repositories/_search.html.erb | 4 ++-- .../super_admin/users/_confirm_merge.html.erb | 2 +- app/views/super_admin/users/edit.html.erb | 4 ++-- 10 files changed, 22 insertions(+), 22 deletions(-) diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb index 7dd7840985..2381eac624 100644 --- a/app/views/devise/registrations/_personal_details.html.erb +++ b/app/views/devise/registrations/_personal_details.html.erb @@ -45,7 +45,7 @@ options_from_collection_for_select(departments, "id", "name", dept_id), include_blank: true, disabled: departments.count === 0, - class: "form-control") %> + class: "form-select") %> <% end %> @@ -55,7 +55,7 @@ <%= f.label(:language_id, _('Language'), class: 'form-label') %> <%= select_tag("user[language_id]", options_from_collection_for_select(@languages, "id", "name", lang_id), - class: "form-control") %> + class: "form-select") %> <% end %> diff --git a/app/views/layouts/modal_search/README.md b/app/views/layouts/modal_search/README.md index 74b5fa2f33..b7bb10fce4 100644 --- a/app/views/layouts/modal_search/README.md +++ b/app/views/layouts/modal_search/README.md @@ -138,7 +138,7 @@ Example definition of the :filters content: <%= select_tag :"research_output[subject_filter]", options_for_select(ResearchOutputPresenter.selectable_subjects), include_blank: _("- Select a subject area -"), - class: "form-control", + class: "form-select", title: by_subject_tooltip, data: { toggle: "tooltip", placement: "bottom" } %> @@ -147,7 +147,7 @@ Example definition of the :filters content: <%= select_tag :"research_output[type_filter]", options_for_select(ResearchOutputPresenter.selectable_repository_types), include_blank: _("- Select a repository type -"), - class: "form-control", + class: "form-select", title: by_type_tooltip, data: { toggle: "tooltip", placement: "bottom" } %> diff --git a/app/views/org_admin/users/edit.html.erb b/app/views/org_admin/users/edit.html.erb index 83a9ae2616..3dff021f2d 100644 --- a/app/views/org_admin/users/edit.html.erb +++ b/app/views/org_admin/users/edit.html.erb @@ -32,7 +32,7 @@ <%= select_tag(:department_id, options_from_collection_for_select(@departments, "id", "name", dept_id), include_blank: true, - class: "form-control", + class: "form-select", name: 'user[department_id]') %> <% end %> @@ -44,7 +44,7 @@ <%= select_tag(:org_admin_user_language_id, options_from_collection_for_select(Language.sorted_by_abbreviation, "id", "name", lang_id), disabled: true, - class: "form-control", name: 'org_admin_user[language_id]') %> + class: "form-select", name: 'org_admin_user[language_id]') %> <% end %> diff --git a/app/views/plans/_download_form.html.erb b/app/views/plans/_download_form.html.erb index 5100a71b5a..ea93c49b81 100644 --- a/app/views/plans/_download_form.html.erb +++ b/app/views/plans/_download_form.html.erb @@ -7,7 +7,7 @@
<%= select_tag :format, options_for_select(Settings::Template::VALID_FORMATS, :pdf), - class: 'form-control', "aria-labelledby": "format" %> + class: 'form-select', "aria-labelledby": "format" %>
@@ -17,7 +17,7 @@ <% if @phase_options.length > 1 %>
<%= label_tag(:phase_id, _("Select phase to download"), class: 'form-label') %> - <%= select_tag(:phase_id, options_for_select(@phase_options, @phase_options[0])) %> + <%= select_tag(:phase_id, options_for_select(@phase_options, @phase_options[0]), class: 'form-select') %>
<% else %> <%= hidden_field_tag(:phase_id, @phase_options[0][1]) %> @@ -77,14 +77,14 @@ <%= select_tag "export[formatting][font_face]", options_for_select(Settings::Template::VALID_FONT_FACES, @export_settings.formatting[:font_face]), - class: 'form-control', + class: 'form-select', "data-default": @plan.template.settings(:export).formatting[:font_face] %>
<%= label_tag "export[formatting][font_size]", _('Size') + " (pt)", class: 'form-label' %> <%= select_tag "export[formatting][font_size]", options_for_select(Settings::Template::VALID_FONT_SIZE_RANGE.to_a, @export_settings.formatting[:font_size]), - class: 'form-control', + class: 'form-select', "data-default": @plan.template.settings(:export).formatting[:font_size] %>
@@ -94,7 +94,7 @@ <%= select_tag "export[formatting][margin][top]", options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a, @export_settings.formatting[:margin][:top]), - class: 'form-control', + class: 'form-select', "data-default": @plan.template.settings(:export).formatting[:margin][:top] %>
@@ -103,7 +103,7 @@ <%= select_tag "export[formatting][margin][bottom]", options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a, @export_settings.formatting[:margin][:bottom]), - class: 'form-control', + class: 'form-select', "data-default": @plan.template.settings(:export).formatting[:margin][:bottom] %>
@@ -112,7 +112,7 @@ <%= select_tag "export[formatting][margin][left]", options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a, @export_settings.formatting[:margin][:left]), - class: 'form-control', + class: 'form-select', "data-default": @plan.template.settings(:export).formatting[:margin][:left] %>
@@ -121,7 +121,7 @@ <%= select_tag "export[formatting][margin][right]", options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a, @export_settings.formatting[:margin][:right]), - class: 'form-control', + class: 'form-select', "data-default": @plan.template.settings(:export).formatting[:margin][:right] %>
diff --git a/app/views/plans/new.html.erb b/app/views/plans/new.html.erb index d1b0af4de5..c9838b70dd 100644 --- a/app/views/plans/new.html.erb +++ b/app/views/plans/new.html.erb @@ -107,7 +107,7 @@
<%= select_tag(:plan_template_id, "", name: 'plan[template_id]', - class: 'form-control', 'aria-labelledby': 'template-selection') %> + class: 'form-select', 'aria-labelledby': 'template-selection') %>
diff --git a/app/views/questions/_new_edit_question_option_based.html.erb b/app/views/questions/_new_edit_question_option_based.html.erb index b399720b85..9650644c64 100644 --- a/app/views/questions/_new_edit_question_option_based.html.erb +++ b/app/views/questions/_new_edit_question_option_based.html.erb @@ -34,7 +34,7 @@ options_html.html_safe, { multiple: question.question_format.multiselectbox?, include_blank: question.question_format.dropdown?, - class: 'form-control' }) %> + class: 'form-select' }) %> <% end %>
<% if question.option_comment_display %> diff --git a/app/views/research_outputs/licenses/_form.html.erb b/app/views/research_outputs/licenses/_form.html.erb index 5fa570d01c..70fe0a21a6 100644 --- a/app/views/research_outputs/licenses/_form.html.erb +++ b/app/views/research_outputs/licenses/_form.html.erb @@ -16,7 +16,7 @@ show_preferred = selected.nil? || (selected != 0 && preferred_licenses.map { |ar options = show_preferred ? preferred_licenses : presenter.complete_licenses guidance = show_preferred ? preferred_guidance : default_guidance -args = { include_blank: _("- Please select one -"), selected: selected, class: "form-control", +args = { include_blank: _("- Please select one -"), selected: selected, class: "form-select", aria: { label: _('Initial license') } } args[:data] = { remote: true, url: plan_license_selection_path(research_output.plan), method: :get } if show_preferred %> diff --git a/app/views/research_outputs/repositories/_search.html.erb b/app/views/research_outputs/repositories/_search.html.erb index 1b79b93ff4..3fdf14a4b9 100644 --- a/app/views/research_outputs/repositories/_search.html.erb +++ b/app/views/research_outputs/repositories/_search.html.erb @@ -10,7 +10,7 @@ <%= select_tag :"research_output[subject_filter]", options_for_select(ResearchOutputPresenter.selectable_subjects), include_blank: _("- Select a subject area -"), - class: "form-control", + class: "form-select", aria: { label: _('Select a subject area') }, title: by_subject_tooltip, data: { toggle: "tooltip", placement: "bottom" } %> @@ -20,7 +20,7 @@ <%= select_tag :"research_output[type_filter]", options_for_select(ResearchOutputPresenter.selectable_repository_types), include_blank: _("- Select a repository type -"), - class: "form-control", + class: "form-select", aria: { label: _('Select a repository type') }, title: by_type_tooltip, data: { toggle: "tooltip", placement: "bottom" } %> diff --git a/app/views/super_admin/users/_confirm_merge.html.erb b/app/views/super_admin/users/_confirm_merge.html.erb index fd10e63262..c8423ff55b 100644 --- a/app/views/super_admin/users/_confirm_merge.html.erb +++ b/app/views/super_admin/users/_confirm_merge.html.erb @@ -8,7 +8,7 @@ - <%= select_tag(:merge_id, options_from_collection_for_select(@users, "id", "email"), class: "form-control") %> + <%= select_tag(:merge_id, options_from_collection_for_select(@users, "id", "email"), class: "form-select") %>
<%= submit_tag( _("Merge"), class: 'btn btn-secondary', style: 'margin-top: 8px;', data: { confirm: "placeholder" }) %> diff --git a/app/views/super_admin/users/edit.html.erb b/app/views/super_admin/users/edit.html.erb index 8d1a3ab7ee..d4dc76902b 100644 --- a/app/views/super_admin/users/edit.html.erb +++ b/app/views/super_admin/users/edit.html.erb @@ -42,7 +42,7 @@ <%= select_tag(:department_id, options_from_collection_for_select(@departments, "id", "name", dept_id), include_blank: true, - class: "form-control", + class: "form-select", name: 'user[department_id]') %>
<% end %> @@ -53,7 +53,7 @@ <%= f.label(:language_id, _('Language'), class: 'form-label') %> <%= select_tag(:super_admin_user_language_id, options_from_collection_for_select(Language.sorted_by_abbreviation, "id", "name", lang_id), - class: "form-control", name: 'user[language_id]') %> + class: "form-select", name: 'user[language_id]') %> <% end %> From 36ba6aa5041ad7d24a64ab0114bc97877afbcb85 Mon Sep 17 00:00:00 2001 From: John Pinto Date: Thu, 1 May 2025 10:34:57 +0100 Subject: [PATCH 2/5] Adjust layout of dropdown and fieldset elements in download page. Contributed by @gjacob24 of DCC DMPonline. Changes: - Adjusts the layout and displays the 'optional plan components' and 'select phase to download' side by side for multi-phase plans. Co-authored-by: gjacob24 --- CHANGELOG.md | 1 + app/views/plans/_download_form.html.erb | 97 +++++++++++++------------ 2 files changed, 51 insertions(+), 47 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 10ac385335..2dc442e2b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ # Changelog +- Adjustments to style of select tags and plan download layout [#3509](https://github.com/DMPRoadmap/roadmap/pull/3509) - Fix failing eslint workflow / upgrade `actions/checkout` & `actions/setup-node` to v3 [#3503](https://github.com/DMPRoadmap/roadmap/pull/3503) - Fix rendering of `confirm_merge` partial [#3515](https://github.com/DMPRoadmap/roadmap/pull/3515) diff --git a/app/views/plans/_download_form.html.erb b/app/views/plans/_download_form.html.erb index ea93c49b81..7c53f680f4 100644 --- a/app/views/plans/_download_form.html.erb +++ b/app/views/plans/_download_form.html.erb @@ -2,7 +2,6 @@ download_coversheet_tickbox_checked = Rails.configuration.x.plans.download_coversheet_tickbox_checked || false %> <%= form_tag(plan_export_path(@plan), method: :get, target: '_blank', id: 'download_form') do |f| %> -

<%= _('Format') %>

@@ -10,57 +9,63 @@ class: 'form-select', "aria-labelledby": "format" %>
-
-

<%= _("Download settings") %>

- <%= hidden_field_tag 'export[form]', true %> - <% if @phase_options.length > 1 %> -
- <%= label_tag(:phase_id, _("Select phase to download"), class: 'form-label') %> - <%= select_tag(:phase_id, options_for_select(@phase_options, @phase_options[0]), class: 'form-select') %> +
+
+

<%= _("Download settings") %>

- <% else %> - <%= hidden_field_tag(:phase_id, @phase_options[0][1]) %> - <% end %> -
- <%= _("Optional plan components") %> -
- <%= label_tag 'export[project_details]', class:'form-check-label' do %> - <%= check_box_tag 'export[project_details]', true, download_coversheet_tickbox_checked %> - <%= _('project details coversheet') %> - <% end %> -
-
- <%= label_tag 'export[question_headings]', class:'form-check-label' do %> - <%= check_box_tag 'export[question_headings]', true, true %> - <%= _('question text and section headings') %> - <% end %> -
-
- <%= label_tag 'export[unanswered_questions]', class:'form-check-label' do %> - <%= check_box_tag 'export[unanswered_questions]', true, true %> - <%= _('unanswered questions') %> - <% end %> -
- <% if @plan.research_outputs.any? %> -
- <%= label_tag 'export[research_outputs]', class:'form-check-label' do %> - <%= check_box_tag 'export[research_outputs]', true, true %> - <%= _('research outputs') %> +
+
+
+
+ <%= _("Optional plan components") %> +
+ <%= label_tag 'export[project_details]', class:'form-check-label' do %> + <%= check_box_tag 'export[project_details]', true, download_coversheet_tickbox_checked %> + <%= _('project details coversheet') %> + <% end %> +
+
+ <%= label_tag 'export[question_headings]', class:'form-check-label' do %> + <%= check_box_tag 'export[question_headings]', true, true %> + <%= _('question text and section headings') %> + <% end %> +
+
+ <%= label_tag 'export[unanswered_questions]', class:'form-check-label' do %> + <%= check_box_tag 'export[unanswered_questions]', true, true %> + <%= _('unanswered questions') %> + <% end %> +
+ <% if @plan.research_outputs.any? %> +
+ <%= label_tag 'export[research_outputs]', class:'form-check-label' do %> + <%= check_box_tag 'export[research_outputs]', true, true %> + <%= _('research outputs') %> + <% end %> +
<% end %> -
- <% end %> - <% if @plan.template.customization_of.present? %> -
- <%= label_tag 'export[custom_sections]', class:'form-check-label' do %> - <%= check_box_tag 'export[custom_sections]', true, false %> - <%= _('supplementary section(s) not requested by funding organisation') %> + <% if @plan.template.customization_of.present? %> +
+ <%= label_tag 'export[custom_sections]', class:'form-check-label' do %> + <%= check_box_tag 'export[custom_sections]', true, false %> + <%= _('supplementary section(s) not requested by funding organisation') %> + <% end %> +
<% end %> +
+
+ <%= hidden_field_tag 'export[form]', true %> + <% if @phase_options.length > 1 %> +
+ <%= label_tag(:phase_id, _("Select phase to download"), class: 'form-label') %> + <%= select_tag(:phase_id, options_for_select(@phase_options, @phase_options[0]), class: 'form-select') %>
+ <% else %> + <%= hidden_field_tag(:phase_id, @phase_options[0][1]) %> <% end %> - +
-

<%= _('PDF formatting') %>

@@ -87,7 +92,6 @@ class: 'form-select', "data-default": @plan.template.settings(:export).formatting[:font_size] %>
-
<%= label_tag "export[formatting][margin][top]", _('Top'), class: 'form-label' %> @@ -126,7 +130,6 @@
- <%= button_tag(sanitize(_("Download Plan (new window)%{open_in_new_window_text}") % { open_in_new_window_text: _('Opens in new window') }, tags: %w{ span em }), class: "btn btn-primary has-new-window-popup-info", From 3246659b7543fdad4806be93c7e2615d6950b465 Mon Sep 17 00:00:00 2001 From: aaronskiba Date: Thu, 24 Apr 2025 11:51:46 -0600 Subject: [PATCH 3/5] Additional `form-control` to `form-select` changes - This changes expand upon commit 87ddbb0ddb62073beadf3256115988d09e0a8b09 --- app/views/guidances/new_edit.html.erb | 2 +- app/views/org_admin/questions/_form.html.erb | 2 +- app/views/plans/_project_details.html.erb | 4 ++-- app/views/research_outputs/_form.html.erb | 4 ++-- app/views/super_admin/notifications/_form.html.erb | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/views/guidances/new_edit.html.erb b/app/views/guidances/new_edit.html.erb index e2109152e1..d250c9ccae 100644 --- a/app/views/guidances/new_edit.html.erb +++ b/app/views/guidances/new_edit.html.erb @@ -34,7 +34,7 @@ end <%= f.label _('Guidance group'), for: :guidance_group_id, class: 'form-label' %> <%= f.collection_select(:guidance_group_id, GuidanceGroup.where(org_id: current_user.org_id).order("name ASC"), - :id, :name, {prompt: false}, {multiple: false, 'data-toggle': 'tooltip', title: _('Select which group this guidance relates to.'), class: 'form-control', 'aria-required': true})%> + :id, :name, {prompt: false}, {multiple: false, 'data-toggle': 'tooltip', title: _('Select which group this guidance relates to.'), class: 'form-select', 'aria-required': true})%>
<%= f.label :published do %> diff --git a/app/views/org_admin/questions/_form.html.erb b/app/views/org_admin/questions/_form.html.erb index 5d715390d1..2db4529dda 100644 --- a/app/views/org_admin/questions/_form.html.erb +++ b/app/views/org_admin/questions/_form.html.erb @@ -32,7 +32,7 @@ :title, question.question_format_id), {}, - class: "form-control question_format", + class: "form-select question_format", 'data-toggle': 'tooltip', 'data-html': true, title: _("You can choose from:
  • - text area (large box for paragraphs);
  • - text field (for a short answer);
  • - checkboxes where options are presented in a list and multiple values can be selected;
  • - radio buttons where options are presented in a list but only one can be selected;
  • - dropdown like this box - only one option can be selected;
  • - multiple select box allows users to select several options from a scrollable list, using the CTRL key;
") diff --git a/app/views/plans/_project_details.html.erb b/app/views/plans/_project_details.html.erb index a147190a43..48eada3e92 100644 --- a/app/views/plans/_project_details.html.erb +++ b/app/views/plans/_project_details.html.erb @@ -50,7 +50,7 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm include_blank: _("- Please select one -"), selected: form.object.research_domain_id }, - { class: "form-control" } %> + { class: "form-select" } %>
<% end %> @@ -171,7 +171,7 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm include_blank: _("- Please select one -"), selected: form.object.funding_status }, - { class: "form-control" } %> + { class: "form-select" } %> <%= form.fields_for :grant, plan.grant do |grant_fields| %>
diff --git a/app/views/research_outputs/_form.html.erb b/app/views/research_outputs/_form.html.erb index 6a6c15f51f..7b3a016e89 100644 --- a/app/views/research_outputs/_form.html.erb +++ b/app/views/research_outputs/_form.html.erb @@ -23,7 +23,7 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man include_blank: _("- Please select one -"), selected: (research_output.output_type.present? ? research_output.output_type : "" ) }, { - class: "form-control", + class: "form-select", aria: { required: true, label: _("Research output type") }, data: { remote: true, url: plan_output_type_selection_path(plan), method: :get } } %> @@ -140,7 +140,7 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man <%= f.label(:access, _("Initial access level"), class: "form-label") %> <%= f.select :access, options_for_select(presenter.selectable_access_types, f.object.access), { selected: f.object.access }, - { class: "form-control" } %> + { class: "form-select" } %>
diff --git a/app/views/super_admin/notifications/_form.html.erb b/app/views/super_admin/notifications/_form.html.erb index d99b0f700e..dc9178d739 100644 --- a/app/views/super_admin/notifications/_form.html.erb +++ b/app/views/super_admin/notifications/_form.html.erb @@ -16,7 +16,7 @@ <%= f.select :level, Notification.levels.keys.map { |l| [l.humanize, l] }, { value: @notification.level }, - { class: 'form-control', + { class: 'form-select', data: { toggle: 'tooltip', html: true }, title: _('Info: Simple information message, displayed in blue.
Warning: warning message, for signaling something unusual, displayed in orange.
Danger: error message, for anything critical, displayed in red') } %> From 72c251977af5513ca9947b6ae753132a8a6d4deb Mon Sep 17 00:00:00 2001 From: aaronskiba Date: Thu, 24 Apr 2025 14:46:49 -0600 Subject: [PATCH 4/5] Improve styling consistency between headings - This change improves the styling/positioning between the "Optional plan components" and "Select phase to download" headings. - Added "form-control" class to "Optional plan components" heading to match "Select phase to download" stylings - Replaced `` element with a `label_tag`+ `form-label` class to again improve consistency between the two headings. - Note, the added `label_tag` doesn't associate with any specific form control, so the first paramater is left empty. --- app/views/plans/_download_form.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/plans/_download_form.html.erb b/app/views/plans/_download_form.html.erb index 7c53f680f4..b5a08182a7 100644 --- a/app/views/plans/_download_form.html.erb +++ b/app/views/plans/_download_form.html.erb @@ -16,9 +16,9 @@
-
+
- <%= _("Optional plan components") %> + <%= label_tag('', _("Optional plan components"), class: 'form-label') %>
<%= label_tag 'export[project_details]', class:'form-check-label' do %> <%= check_box_tag 'export[project_details]', true, download_coversheet_tickbox_checked %> From 32773709dfc4fca9733d2d35d7f9614881cd6578 Mon Sep 17 00:00:00 2001 From: aaronskiba Date: Thu, 1 May 2025 13:16:58 -0600 Subject: [PATCH 5/5] Fix accessibility and preserve aligned headings - Commit 72c251977af5513ca9947b6ae753132a8a6d4deb improved the alignment between the 'Optional plan components' and 'Select phase to download' headings. However, the change from to an unreferenced label_tag() hurt the accessibility. - This change puts back the tag and uses class: 'col-form-label' for both of the aforementioned headings to maintain stylistic consistency between the two elements. - `.col-form-label` overrides styling to maintain consistent alignment with