diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index 45674305d6..10e4f14c73 100644 --- a/app/views/admin/products_v3/_table.html.haml +++ b/app/views/admin/products_v3/_table.html.haml @@ -5,17 +5,6 @@ 'data-bulk-form-error-value': defined?(error_counts), } do |form| = render(partial: "admin/shared/flashes", locals: { flashes: }) if defined? flashes - %fieldset.form-actions{ class: ("hidden" unless defined?(error_counts)), 'data-bulk-form-target': "actions" } - .container - .status - .modified_summary{ 'data-bulk-form-target': "changedSummary", 'data-translation-key': 'admin.products_v3.table.changed_summary'} - - if defined?(error_counts) - .error_summary - -# X products were saved correctly, but Y products could not be saved correctly. Please review errors and try again - = t('.error_summary.saved', count: error_counts[:saved]) + t('.error_summary.invalid', count: error_counts[:invalid]) - .form-buttons - = form.submit t('.reset'), type: :reset, class: "medium", 'data-reflex': 'click->products#fetch' - = form.submit t('.save'), class: "medium" %table.products %col{ width:"15%" } %col{ width:"5%", style: "max-width:5em" } @@ -28,6 +17,20 @@ %col{ width:"5%", style: "max-width:5em" } %col{ width:"5%", style: "max-width:5em" } %thead + %tr + %td.form-actions-wrapper{ colspan: 10 } + .form-actions-wrapper2 + %fieldset.form-actions{ class: ("hidden" unless defined?(error_counts)), 'data-bulk-form-target': "actions" } + .container + .status + .modified_summary{ 'data-bulk-form-target': "changedSummary", 'data-translation-key': 'admin.products_v3.table.changed_summary'} + - if defined?(error_counts) + .error_summary + -# X products were saved correctly, but Y products could not be saved correctly. Please review errors and try again + = t('.error_summary.saved', count: error_counts[:saved]) + t('.error_summary.invalid', count: error_counts[:invalid]) + .form-buttons + = form.submit t('.reset'), type: :reset, class: "medium", 'data-reflex': 'click->products#fetch' + = form.submit t('.save'), class: "medium" %tr %th.align-left.with-input= t('admin.products_page.columns.name') %th.align-right= t('admin.products_page.columns.sku') diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index cc633277ab..d72e1b17d7 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -19,15 +19,8 @@ position: relative; } - // Form actions floats over other controls when active #products-form { .form-actions { - // position: absolute; - // top: -1; - left: 0; - right: 0; - z-index: 1; // Ensure tom-select and .disabled-section are covered - .container { .status { flex-grow: 1; // Fill space @@ -46,6 +39,7 @@ background-color: $color-tbl-bg; padding: 4px; + padding-top: 0; // Hide border because .form-actions is there. It is added with th padding instead. border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows. // Additional horizontal padding to align with input contents @@ -54,6 +48,24 @@ top: 0; z-index: 1; // TODO: Cover .popout and .vertical-ellipsis-menu, but only when sticky + // Form actions replaces other controls when active + // It is part of the table header, to allow for sticky stacking when scrolling. + .form-actions-wrapper { + padding: 0; + overflow: visible; + background-color: white; + } + .form-actions-wrapper2 { + position: relative; + // Stretch to cover table side borders + left: -4px; + width: calc(100% + 8px); + background-color: white; + + padding: 4px 0; + z-index: 1; // Ensure tom-select and .disabled-section are covered + } + th.with-input { padding-left: $padding-tbl-cell + $hpadding-txt; padding-right: $padding-tbl-cell + $hpadding-txt; @@ -93,6 +105,7 @@ } th { + padding-top: $padding-tbl-cell + 4px; // Increase padding to create a top border // Clip long content in headers, but allow wrapping overflow: hidden; text-overflow: clip; // If colums are so small that headers are clipping, ellipsis are more of a hindrance @@ -142,7 +155,7 @@ } // "Naked" inputs. Row hover helps reveal them. - input:not([type="checkbox"]) { + tbody input:not([type="checkbox"]) { background-color: $color-tbl-cell-bg; height: auto; font-size: inherit;