diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index e34c4b786d..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.eleven.columns - .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.five.columns - = 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 123fa7f286..8271602135 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -19,14 +19,17 @@ position: relative; } - // Form actions floats over other controls when active #products-form { .form-actions { - position: absolute; - top: -1em; - left: 0; - right: 0; - z-index: 1; // Ensure tom-select and .disabled-section are covered + .container { + .status { + flex-grow: 1; // Fill space + } + + .form-buttons { + flex-shrink: 0; // Don't shrink + } + } } } @@ -36,12 +39,37 @@ 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 - thead th.with-input { - padding-left: $padding-tbl-cell + $hpadding-txt; - padding-right: $padding-tbl-cell + $hpadding-txt; + thead { + position: sticky; + top: 0; + z-index: 1; // TODO: Cover .popout and .vertical-ellipsis-menu, but only when sticky + box-shadow: $box-shadow; + + // 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; + } + + th.with-input { + padding-left: $padding-tbl-cell + $hpadding-txt; + padding-right: $padding-tbl-cell + $hpadding-txt; + } } // Row hover @@ -77,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 @@ -126,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; @@ -164,7 +193,8 @@ } #sort { - margin-bottom: 1em; + margin-top: 3px; // Helps even up with .form-actions when visible + margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; @@ -174,6 +204,10 @@ line-height: $btn-relaxed-height; height: $btn-relaxed-height; + &.disabled-section { + display: none; + } + .with-dropdown { display: flex; justify-content: space-between; @@ -188,7 +222,7 @@ grid-template-rows: 1fr; grid-column-gap: 20px; align-items: end; - margin-bottom: 20px; + margin-bottom: 1rem; .query { grid-column: 1 / span 3;