Adjustments to style of select tags and plan download layout

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)
 - Remove Auto-Generated TinyMCE Skins and Add `public/tinymce/skins/` to `.gitignore` [#3466](https://github.com/DMPRoadmap/roadmap/pull/3466)

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") %>
     </div>
     <% 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") %>
     </div>
   <% end %>
 

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})%>
       </div>
       <div class="form-check">
         <%= f.label :published do %>

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" } %>
   </span>
@@ -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" } %>
   </span>

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:<ul><li>- text area (large box for paragraphs);</li> <li>- text field (for a short answer);</li> <li>- checkboxes where options are presented in a list and multiple values can be selected;</li> <li>- radio buttons where options are presented in a list but only one can be selected;</li> <li>- dropdown like this box - only one option can be selected;</li> <li>- multiple select box allows users to select several options from a scrollable list, using the CTRL key;</li></ul>")

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]') %>
       </div>
       <% 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]') %>
         </div>
       <% end %>
 

app/views/plans/_download_form.html.erb

@@ -2,65 +2,70 @@
  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| %>
-
   <h2><%= _('Format') %></h2>
   <div class="row">
     <div class="form-control mb-3 col-sm-2">
       <%= select_tag :format, options_for_select(Settings::Template::VALID_FORMATS, :pdf),
-                     class: 'form-control', "aria-labelledby": "format" %>
+                     class: 'form-select', "aria-labelledby": "format" %>
     </div>
   </div>
-
   <div id="download-settings">
-    <h2><%= _("Download settings") %></h2>
-    <%= hidden_field_tag 'export[form]', true %>
-    <% if @phase_options.length > 1 %>
-      <div class="form-control mb-5">
-        <%= label_tag(:phase_id, _("Select phase to download"), class: 'form-label') %>
-        <%= select_tag(:phase_id, options_for_select(@phase_options, @phase_options[0])) %>
+    <div class="row">
+      <div class="col-12">
+        <h2><%= _("Download settings") %></h2>
       </div>
-    <% else %>
-      <%= hidden_field_tag(:phase_id, @phase_options[0][1]) %>
-    <% end %>
-    <fieldset>
-      <legend><%= _("Optional plan components") %></legend>
-      <div class="form-check">
-        <%= 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 %>
-      </div>
-      <div class="form-check">
-        <%= label_tag 'export[question_headings]', class:'form-check-label' do %>
-          <%= check_box_tag 'export[question_headings]', true, true %>
-          <%= _('question text and section headings') %>
-        <% end %>
-      </div>
-      <div class="form-check">
-        <%= label_tag 'export[unanswered_questions]', class:'form-check-label' do %>
-          <%= check_box_tag 'export[unanswered_questions]', true, true %>
-          <%= _('unanswered questions') %>
-        <% end %>
-      </div>
-      <% if @plan.research_outputs.any? %>
-        <div class="form-check">
-          <%= label_tag 'export[research_outputs]', class:'form-check-label' do %>
-            <%= check_box_tag 'export[research_outputs]', true, true %>
-            <%= _('research outputs') %>
+    </div>
+    <div class="row">
+      <div class="form-control col-sm-12 col-lg-6">
+        <fieldset>
+          <legend class="col-form-label"><%= _("Optional plan components") %></legend>
+          <div class="form-check">
+            <%= 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 %>
+          </div>
+          <div class="form-check">
+            <%= label_tag 'export[question_headings]', class:'form-check-label' do %>
+              <%= check_box_tag 'export[question_headings]', true, true %>
+              <%= _('question text and section headings') %>
+            <% end %>
+          </div>
+          <div class="form-check">
+            <%= label_tag 'export[unanswered_questions]', class:'form-check-label' do %>
+              <%= check_box_tag 'export[unanswered_questions]', true, true %>
+              <%= _('unanswered questions') %>
+            <% end %>
+          </div>
+          <% if @plan.research_outputs.any? %>
+            <div class="form-check">
+              <%= label_tag 'export[research_outputs]', class:'form-check-label' do %>
+                <%= check_box_tag 'export[research_outputs]', true, true %>
+                <%= _('research outputs') %>
+              <% end %>
+            </div>
           <% end %>
-        </div>
-      <% end %>
-      <% if @plan.template.customization_of.present? %>
-        <div class="form-check">
-          <%= 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? %>
+            <div class="form-check">
+              <%= 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 %>
+            </div>
           <% end %>
+        </fieldset>
+      </div>
+      <%= hidden_field_tag 'export[form]', true %>
+      <% if @phase_options.length > 1 %>
+        <div class="form-control col-sm-12 col-lg-6">
+          <%= label_tag(:phase_id, _("Select phase to download"), class: 'col-form-label') %>
+          <%= select_tag(:phase_id, options_for_select(@phase_options, @phase_options[0]), class: 'form-select') %>
         </div>
+      <% else %>
+        <%= hidden_field_tag(:phase_id, @phase_options[0][1]) %>
       <% end %>
-    </fieldset>
+    </div>
   </div>
-
   <div id="pdf-formatting" class="py-3">
     <h2><%= _('PDF formatting') %></h2>
     <div class="d-flex flex-row">
@@ -77,24 +82,23 @@
         <%= 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] %>
       </div>
       <div class="form-control mb-3 px-2 col-sm-2">
         <%= 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] %>
       </div>
-
       <div class="form-control mb-3 px-2 col-sm-1">
         <%= label_tag "export[formatting][margin][top]", _('Top'),
                       class: 'form-label' %>
         <%= 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] %>
       </div>
       <div class="form-control mb-3 px-2 col-sm-1">
@@ -103,7 +107,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] %>
       </div>
       <div class="form-control mb-3 px-2 col-sm-1">
@@ -112,7 +116,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] %>
       </div>
       <div class="form-control mb-3 px-2 col-sm-1">
@@ -121,12 +125,11 @@
         <%= 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] %>
       </div>
     </div>
   </div>
-
   <%= button_tag(sanitize(_("Download Plan <em class=\"sr-only\">(new window)</em><span class=\"new-window-popup-info\">%{open_in_new_window_text}</span>") % { open_in_new_window_text: _('Opens in new window') },
         tags: %w{ span em }),
       class: "btn btn-primary has-new-window-popup-info",

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" } %>
     </div>
   </div>
 <% 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" } %>
     </div>
     <%= form.fields_for :grant, plan.grant do |grant_fields| %>
       <div class="col-lg-12">

app/views/plans/new.html.erb

@@ -107,7 +107,7 @@
         <div class="form-control mb-3 row">
           <div class="col-md-6">
             <%= select_tag(:plan_template_id, "<option value=\"\">#{_('Please select a template')}</option>", name: 'plan[template_id]',
-                           class: 'form-control', 'aria-labelledby': 'template-selection') %>
+                           class: 'form-select', 'aria-labelledby': 'template-selection') %>
           </div>
           <div class="col-md-6">
             <span id="multiple-templates">

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 %>
 <div class="form-control mb-3">
 <% if question.option_comment_display %><!-- Comment text area for option_based questions -->

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" } %>
       </span>
     </div>
   </div>

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
 %>

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" } %>

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: _('<strong>Info:</strong> Simple information message, displayed in blue.<br/><strong>Warning:</strong> warning message, for signaling something unusual, displayed in orange.<br/><strong>Danger:</strong> error message, for anything critical, displayed in red') } %>
     </div>
   </div>

app/views/super_admin/users/_confirm_merge.html.erb

@@ -8,7 +8,7 @@
       <span class="input-group-text" id="search-addon">
         <span class="fas fa-magnifying-glass" aria-hidden="true"></span>
       </span>
-    <%= 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") %>
     </div>
   </div>
   <%= submit_tag( _("Merge"), class: 'btn btn-secondary', style: 'margin-top: 8px;', data: { confirm: "placeholder" }) %>

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]') %>
       </div>
       <% 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]') %>
         </div>
       <% end %>