Fix broken styles in Export form

Author: mshibuya

app/views/rails_admin/main/export.html.erb

@@ -2,7 +2,7 @@
 <% visible_fields = @model_config.export.with(view: self, object: @abstract_model.model.new, controller: self.controller).visible_fields %>
 <%= form_tag export_path(params.merge(all: true)), method: 'post', class: "main" do %>
   <input name="send_data" type="hidden" value="true" />
-  <fieldset id="fields_to_export">
+  <fieldset id="fields_to_export" class="mb-3">
     <legend>
       <i class="fas fa-chevron-down"></i>
       <%= t('admin.export.select') %>
@@ -19,18 +19,18 @@
         </div>
       </div>
     </div>
-    <div class="form-group control-group">
+    <div class="control-group row">
       <div class="col-sm-12">
-        <div class="well well-sm reverse-selection" rel="tooltip" style="margin: 0; cursor: pointer;" title="<%= t('admin.export.click_to_reverse_selection') %>">
-          <b>
-            <%= t('admin.export.fields_from', name: @model_config.label_plural.downcase) %>
-          </b>
+        <div class="card bg-light my-2 reverse-selection" rel="tooltip" role="button" title="<%= t('admin.export.click_to_reverse_selection') %>">
+          <div class="card-body p-2">
+            <b><%= t('admin.export.fields_from', name: @model_config.label_plural.downcase) %></b>
+          </div>
         </div>
         <div class="controls">
           <div class="row">
             <% visible_fields.select{ |f| !f.association? || f.association.polymorphic? }.each do |field| %>
               <% list = field.virtual? ? 'methods' : 'only' %>
-              <div class="checkbox col-sm-3">
+              <div class="checkbox col-sm-3 my-1">
                 <% if field.association? && field.association.polymorphic? %>
                   <label for="schema_<%= list %>_<%= field.method_name %>">
                     <%= check_box_tag "schema[#{list}][]", field.method_name, true, { id: "schema_#{list}_#{field.method_name}" } %>
@@ -55,18 +55,18 @@
     </div>
     <% visible_fields.select{ |f| f.association? && !f.association.polymorphic? }.each do |field| %>
       <% fields = field.associated_model_config.export.with(controller: self.controller, view: self, object: (associated_model = field.associated_model_config.abstract_model.model).new).visible_fields.select{ |f| !f.association? } %>
-      <div class="form-group control-group">
+      <div class="control-group row">
         <div class="col-sm-12">
-          <div class="well well-sm reverse-selection" rel="tooltip" style="margin: 0; cursor: pointer;" title="<%= t('admin.export.click_to_reverse_selection') %>">
-            <b>
-              <%= t('admin.export.fields_from_associated', name: field.label.downcase) %>
-            </b>
+          <div class="card bg-light my-2 reverse-selection" rel="tooltip" role="button" title="<%= t('admin.export.click_to_reverse_selection') %>">
+            <div class="card-body p-2">
+              <b><%= t('admin.export.fields_from_associated', name: field.label.downcase) %></b>
+            </div>
           </div>
           <div class="controls">
             <div class="row">
               <% fields.each do |associated_model_field| %>
                 <% list = associated_model_field.virtual? ? 'methods' : 'only' %>
-                <div class="checkbox col-sm-3">
+                <div class="checkbox col-sm-3 my-1">
                   <label for="schema_include_<%= field.name %>_<%= list %>_<%= associated_model_field.name %>">
                     <%= check_box_tag "schema[include][#{field.name}][#{list}][]", associated_model_field.name, true, { id: "schema_include_#{field.name}_#{list}_#{associated_model_field.name}" } %>
                     <%= associated_model_field.label %>
@@ -84,47 +84,50 @@
       <i class="fas fa-chevron-down"></i>
       <%= t('admin.export.options_for', name: 'csv') %>
     </legend>
-    <div class="form-group control-group">
+    <div class="control-group row">
       <% guessed_encoding = @abstract_model.encoding %>
-      <label class="col-sm-2 control-label" for="csv_options_encoding_to">
+      <label class="col-sm-2 col-form-label text-md-end" for="csv_options_encoding_to">
         <%= t('admin.export.csv.encoding_to') %>
       </label>
       <div class="col-sm-10 controls">
-        <% # from http://books.google.com/support/partner/bin/answer.py?answer=30990 : %>
-        <%= select_tag 'csv_options[encoding_to]', options_for_select(Encoding.name_list.sort), include_blank: true, placeholder: t('admin.misc.search'), :'data-enumeration' => true %>
-        <p class="help-block">
+        <div class="w-50">
+          <%= select_tag 'csv_options[encoding_to]', options_for_select(Encoding.name_list.sort), include_blank: true, placeholder: t('admin.misc.search'), :'data-enumeration' => true %>
+        </div>
+        <p class="form-text">
           <%= t('admin.export.csv.encoding_to_help', name: guessed_encoding) %>
         </p>
       </div>
     </div>
-    <div class="form-group control-group">
-      <label class="col-sm-2 control-label" for="csv_options_skip_header">
+    <div class="control-group row">
+      <label class="col-sm-2 col-form-label text-md-end" for="csv_options_skip_header">
         <%= t('admin.export.csv.skip_header') %>
       </label>
       <div class="col-sm-10 controls">
-        <div class="checkbox">
-          <label style="display: block;">
+        <div class="col-form-label">
+          <label>
             <%= check_box_tag 'csv_options[skip_header]', 'true' %>
           </label>
         </div>
-        <p class="help-block">
+        <p class="form-text">
           <%= t('admin.export.csv.skip_header_help') %>
         </p>
       </div>
     </div>
-    <div class="form-group control-group">
-      <label class="col-sm-2 control-label" for="csv_options_generator_col_sep">
+    <div class="control-group row">
+      <label class="col-sm-2 col-form-label text-md-end" for="csv_options_generator_col_sep">
         <%= t('admin.export.csv.col_sep') %>
       </label>
       <div class="col-sm-10 controls">
-        <%= select_tag 'csv_options[generator][col_sep]', options_for_select({ '' => t('admin.export.csv.default_col_sep'), "<comma> ','" => ',', "<semicolon> ';'" => ';', '<tabs>' => "'\t'" }), placeholder: t('admin.misc.search'), :'data-enumeration' => true %>
-        <p class="help-block">
+        <div class="w-50">
+          <%= select_tag 'csv_options[generator][col_sep]', options_for_select({ '' => t('admin.export.csv.default_col_sep'), "<comma> ','" => ',', "<semicolon> ';'" => ';', '<tabs>' => "'\t'" }), placeholder: t('admin.misc.search'), :'data-enumeration' => true %>
+        </div>
+        <p class="form-text">
           <%= t('admin.export.csv.col_sep_help', value: t('admin.export.csv.default_col_sep')) %>
         </p>
       </div>
     </div>
   </fieldset>
-  <div class="form-group form-actions">
+  <div class="form-actions row justify-content-end mb-3">
     <div class="col-sm-offset-2 col-sm-10">
       <input name="return_to" type="<%= :hidden %>" value="<%= (params[:return_to].presence || request.referer) %>" />
       <button class="btn btn-primary" name="csv" type="submit">
@@ -137,7 +140,7 @@
       <button class="btn btn-info" name="xml" type="submit">
         <%= t("admin.export.confirmation", name: 'xml') %>
       </button>
-      <button class="btn" name="_continue" type="submit">
+      <button class="btn btn-light" name="_continue" type="submit">
         <i class="fas fa-times"></i>
         <%= t("admin.form.cancel") %>
       </button>