Improve registrar area bulk change UI

#662

app/views/registrar/bulk_change/_bulk_transfer_form.html.erb

@@ -0,0 +1,35 @@
+<%= form_tag registrar_domain_transfers_path, multipart: true, class: 'form-horizontal' do %>
+    <%= render 'registrar/domain_transfers/form/api_errors' %>
+
+    <div class="form-group">
+        <div class="col-md-2 control-label">
+            <%= label_tag :batch_file %>
+        </div>
+        <div class="col-md-4">
+            <%= file_field_tag :batch_file, required: true %>
+            <span class="help-block"><%= t '.file_field_hint' %></span>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <div class="col-md-4 col-md-offset-2 text-right">
+            <button class="btn btn-warning">
+                <%= t '.submit_btn' %>
+            </button>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <div class="col-md-6">
+            <a class="btn btn-default btn-xs" role="button" data-toggle="collapse"
+               href="#bulk_change_bulk_transfer_help" aria-expanded="false"
+               aria-controls="collapseExample"><%= t '.help_btn' %>
+            </a>
+            <div class="collapse" id="bulk_change_bulk_transfer_help">
+                <div class="well">
+                    <%= t '.help' %>
+                </div>
+            </div>
+        </div>
+    </div>
+<% end %>

app/views/registrar/bulk_change/_nameserver_form.html.erb

@@ -6,7 +6,7 @@
             <%= label_tag :old_hostname %>
         </div>
 
-        <div class="col-md-5">
+        <div class="col-md-4">
             <%= text_field_tag :old_hostname, params[:old_hostname], required: true,
                                class: 'form-control' %>
         </div>
@@ -17,7 +17,7 @@
             <%= label_tag :new_hostname %>
         </div>
 
-        <div class="col-md-5">
+        <div class="col-md-4">
             <%= text_field_tag :new_hostname, params[:new_hostname], required: true,
                                class: 'form-control' %>
         </div>
@@ -28,7 +28,7 @@
             <%= label_tag :ipv4 %>
         </div>
 
-        <div class="col-md-3">
+        <div class="col-md-4">
             <%= text_area_tag :ipv4, params[:ipv4], class: 'form-control' %>
         </div>
     </div>
@@ -38,17 +38,31 @@
             <%= label_tag :ipv6 %>
         </div>
 
-        <div class="col-md-3">
+        <div class="col-md-4">
             <%= text_area_tag :ipv6, params[:ipv6], class: 'form-control' %>
             <span class="help-block"><%= t '.ip_hint' %></span>
         </div>
     </div>
 
     <div class="form-group">
-        <div class="col-md-5 col-md-offset-2 text-right">
+        <div class="col-md-4 col-md-offset-2 text-right">
             <button class="btn btn-warning">
                 <%= t '.replace_btn' %>
             </button>
         </div>
     </div>
+
+    <div class="form-group">
+        <div class="col-md-6">
+            <a class="btn btn-default btn-xs" role="button" data-toggle="collapse"
+               href="#bulk_change_nameserver_help" aria-expanded="false"
+               aria-controls="collapseExample"><%= t '.help_btn' %>
+            </a>
+            <div class="collapse" id="bulk_change_nameserver_help">
+                <div class="well">
+                    <%= t '.help' %>
+                </div>
+            </div>
+        </div>
+    </div>
 <% end %>

app/views/registrar/bulk_change/_tech_contact_form.html.erb

@@ -7,10 +7,10 @@
 
     <div class="form-group">
         <div class="col-md-2 control-label">
-            <%= label_tag :predecessor %>
+            <%= label_tag :predecessor, t('.predecessor') %>
         </div>
 
-        <div class="col-md-5">
+        <div class="col-md-4">
             <%= text_field_tag :predecessor, params[:predecessor],
                                list: :contacts,
                                required: true,
@@ -21,10 +21,10 @@
 
     <div class="form-group">
         <div class="col-md-2 control-label">
-            <%= label_tag :successor %>
+            <%= label_tag :successor, t('.successor') %>
         </div>
 
-        <div class="col-md-5">
+        <div class="col-md-4">
             <%= text_field_tag :successor, params[:successor],
                                list: :contacts,
                                required: true,
@@ -33,12 +33,25 @@
     </div>
 
     <div class="form-group">
-        <div class="col-md-5 col-md-offset-2 text-right">
+        <div class="col-md-4 col-md-offset-2 text-right">
             <button class="btn btn-warning">
                 <%= t '.submit_btn' %>
             </button>
         </div>
     </div>
+
+    <div class="form-group">
+        <div class="col-md-6">
+            <a class="btn btn-default btn-xs" role="button" data-toggle="collapse"
+               href="#bulk_change_tech_contact_help" aria-expanded="false"
+               aria-controls="collapseExample"><%= t '.help_btn' %></a>
+            <div class="collapse" id="bulk_change_tech_contact_help">
+                <div class="well">
+                    <%= t '.help' %>
+                </div>
+            </div>
+        </div>
+    </div>
 <% end %>
 
 <datalist id="contacts">

app/views/registrar/bulk_change/new.html.erb

@@ -6,8 +6,7 @@
     <h1><%= t '.header' %></h1>
 </div>
 
-<div class="row">
-    <div class="col-md-10">
+
         <ul class="nav nav-tabs">
             <li class="<%= 'active' if active_tab == :technical_contact %>">
                 <a href="#technical_contact" data-toggle="tab"><%= t '.technical_contact' %></a>
@@ -16,6 +15,10 @@
             <li class="<%= 'active' if active_tab == :nameserver %>">
                 <a href="#nameserver" data-toggle="tab"><%= t '.nameserver' %></a>
             </li>
+
+            <li class="<%= 'active' if active_tab == :bulk_transfer %>">
+                <a href="#bulk_transfer" data-toggle="tab"><%= t '.bulk_transfer' %></a>
+            </li>
         </ul>
 
         <div class="tab-content">
@@ -27,6 +30,8 @@
             <div class="tab-pane<%= ' active' if active_tab == :nameserver %>" id="nameserver">
                 <%= render 'nameserver_form' %>
             </div>
+
+            <div class="tab-pane<%= ' active' if active_tab == :bulk_transfer %>" id="bulk_transfer">
+                <%= render 'bulk_transfer_form' %>
+            </div>
         </div>
-    </div>
-</div>

app/views/registrar/domain_transfers/_form.html.erb

@@ -1,4 +1,6 @@
 <%= form_tag registrar_domain_transfers_path, multipart: true, class: 'form-horizontal' do %>
+    <%= render 'registrar/domain_transfers/form/api_errors' %>
+
     <div class="form-group">
         <div class="col-md-3 control-label">
             <%= label_tag :domain_name, nil, class: 'required' %>
@@ -30,7 +32,7 @@
     <div class="form-group">
         <div class="col-md-10 text-right">
             <button class="btn btn-warning">
-                <%= t '.transfer_btn' %>
+                <%= t '.submit_btn' %>
             </button>
         </div>
     </div>

app/views/registrar/domain_transfers/form/_batch.html.erb

@@ -1,19 +0,0 @@
-<%= form_tag registrar_domain_transfers_path, multipart: true, class: 'form-horizontal' do %>
-    <div class="form-group">
-        <div class="col-md-3 control-label">
-            <%= label_tag :batch_file %>
-        </div>
-        <div class="col-md-7">
-            <%= file_field_tag :batch_file, required: true %>
-            <span class="help-block"><%= t '.batch_file_help' %></span>
-        </div>
-    </div>
-
-    <div class="form-group">
-        <div class="col-md-10 text-right">
-            <button class="btn btn-warning">
-                <%= t '.transfer_btn' %>
-            </button>
-        </div>
-    </div>
-<% end %>

app/views/registrar/domain_transfers/new.html.erb

@@ -6,24 +6,6 @@
 
 <div class="row">
     <div class="col-md-8">
-        <ul class="nav nav-tabs">
-            <li class="active">
-                <a href="#single" data-toggle="tab"><%= t '.single' %></a>
-            </li>
-
-            <li>
-                <a href="#batch" data-toggle="tab"><%= t '.batch' %></a>
-            </li>
-        </ul>
-
-        <div class="tab-content">
-            <div class="tab-pane active" id="single">
-                <%= render 'registrar/domain_transfers/form/single' %>
-            </div>
-
-            <div class="tab-pane" id="batch">
-                <%= render 'registrar/domain_transfers/form/batch' %>
-            </div>
-        </div>
+        <%= render 'form' %>
     </div>
 </div>