PC-27: Update styles for Quote items

Author: PivtoranisV

app/admin/quotes.rb

@@ -34,8 +34,8 @@
 
   form html: { class: 'quote-form' } do |f|
     f.inputs do
-      f.input :customer, as: :select, collection: Customer.pluck(:company_name, :id)
-      f.input :user, as: :select, collection: User.order(:name).pluck(:name, :id)
+      f.input :customer, as: :select, collection: Customer.pluck(:company_name, :id), input_html: { class: 'custom-select' }
+      f.input :user, as: :select, collection: User.order(:name).pluck(:name, :id), input_html: { class: 'custom-select' }
       f.input :categories, as: :check_boxes,
                            collection: Category.enabled.order(:name).pluck(:name, :id),
                            wrapper_html: { class: 'categories-wrapper' }
@@ -90,7 +90,7 @@
       )
 
       qf.input :price, as: :number, input_html: { min: 0, readonly: true, value: qf.object.price || 0, class: 'read-only-price' }, hint: 'Price will be calculated automatically based on Pricing parameters'
-      qf.input :discount, as: :number, input_html: { min: 0 }
+      qf.input :discount, as: :number, input_html: { min: 0, class: 'discount-input' }
       qf.input :final_price, as: :number, input_html: { min: 0, readonly: true, value: qf.object.final_price || 0, class: 'read-only-price' }, hint: 'Final price will be calculated automatically based on Discount'
 
       qf.template.concat(

app/assets/stylesheets/active_admin.scss

@@ -256,7 +256,8 @@ span.category-name-field {
   margin-bottom: 0.5rem;
 }
 
-label.item-name-label {
+label.item-name-label,
+label.category-name-label {
   padding-left: 10px;
   width: 20%;
   float: left;
@@ -292,4 +293,14 @@ ol li:last-child a.has_many_remove {
   display: none;
 }
 
-@import 'active_admin/forms/select';
+.param-input {
+  margin-left: 8px;
+  padding: 5.8px;
+  border: 1px solid #c9d0d6 !important;
+}
+
+.discount-input {
+  width: 30% !important;
+}
+
+@import 'active_admin/forms/select';

app/assets/stylesheets/active_admin/forms/_select.scss

@@ -1,6 +1,6 @@
 $select-image-arrow-dark-url: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZmlsbDogcmdiYSgwLCAwLCAwLCAxKTt0cmFuc2Zvcm06IDttc0ZpbHRlcjo7Ij48cGF0aCBkPSJNMTYuMjkzIDkuMjkzIDEyIDEzLjU4NiA3LjcwNyA5LjI5M2wtMS40MTQgMS40MTRMMTIgMTYuNDE0bDUuNzA3LTUuNzA3eiI+PC9wYXRoPjwvc3ZnPg==';
 $select-border-color: #c9d0d6;
-$select-background-color: #FFF;
+$select-background-color: #fff;
 $select-focus-border-color: #99a2aa;
 
 form.filter_form {
@@ -68,12 +68,18 @@ form.filter_form {
   background: #e6e6e6 !important;
 }
 
-
-// qoute items
+// quote items
 .quote-parameters-container {
   display: flex;
 }
 
+.quote-parameter-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 10px;
+}
+
 .quote-item-header-wrapper {
   margin-bottom: 1rem;
   display: flex;
@@ -95,4 +101,9 @@ form.filter_form {
 
 .quote-parameters-preview {
   padding-left: 0.4rem;
-}
+}
+
+.custom-select {
+  padding: 4px;
+  width: 30%;
+}

app/views/admin/quotes/_quote_item_parameters.html.erb

@@ -1,49 +1,47 @@
 <div class="quote-parameter-wrapper">
   <% if fixed_parameters.present? %>
     <div class="quote-params-block">
-      <strong>Fixed Parameters:</strong>
       <ul>
         <% fixed_parameters.each do |name, value| %>
-          <li><strong><%= name %></strong>: <%= value %></li>
+          <li><%= name %>: <%= value %></li>
         <% end %>
       </ul>
     </div>
   <% end %>
   <% if open_parameters_label.present? %>
     <div class="quote-params-block">
-      <strong>Open Parameters:</strong>
       <ul>
         <% open_parameters_label.each do |label| %>
-          <li><%= label %>
-            <input type="number"
-            name="quote[quote_items_attributes][NEW_RECORD][open_param_values][<%= label %>]"
-            class="quote-open-param-input"
-            step="any"
-            min="0"
-            value="<%= open_param_values[label].presence || '' %>"
-            style="margin-left: 5px;" />
+          <li>
+            <label>
+              <%= label %>
+              <input type="number"
+                     name="quote[quote_items_attributes][NEW_RECORD][open_param_values][<%= label %>]"
+                     class="quote-open-param-input param-input"
+                     value="<%= open_param_values[label].presence || '' %>" />
+            </label>
           </li>
         <% end %>
       </ul>
     </div>
   <% end %>
   <% if select_parameters.present? %>
     <div class="quote-params-block">
-      <strong>Select Options:</strong>
       <ul>
         <% select_parameters.each do |sel_name, data| %>
           <li>
-            <label><%= sel_name %>:</label>
-            <select name="quote[quote_items_attributes][NEW_RECORD][select_param_values][<%= sel_name %>]" 
-                  class="quote-select-param-input"
-                  style="margin-left: 5px;">
-              <option value="">— Select —</option>
-              <% data['options'].each do |label, val| %>
-                <option value="<%= val %>" <%= 'selected' if select_param_values[sel_name].to_s == val.to_s %>>
-                <%= label %> (<%= val %>)
-              </option>
-                <% end %>
-              </select>
+            <label>
+              <%= sel_name %>
+              <select name="quote[quote_items_attributes][NEW_RECORD][select_param_values][<%= sel_name %>]"
+                      class="quote-select-param-input param-input">
+                <option value="">— Select —</option>
+                <% data['options'].each do |label, val| %>
+                  <option value="<%= val %>" <%= 'selected' if select_param_values[sel_name].to_s == val.to_s %>>
+                    <%= label %> (<%= val %>)
+                  </option>
+                  <% end %>
+                </select>
+              </label>
             </li>
           <% end %>
         </ul>