From 2defc4afa749b97cb29490ea31c8c28d6e00bde3 Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 9 Jan 2024 12:34:05 +1100 Subject: [PATCH 1/6] Ensure form-actions content uses available space Using pre-defined colunms was a hacky short term solution, this way is more flexible. --- app/views/admin/products_v3/_table.html.haml | 4 ++-- app/webpacker/css/admin/products_v3.scss | 10 ++++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index e34c4b786d..45674305d6 100644 --- a/app/views/admin/products_v3/_table.html.haml +++ b/app/views/admin/products_v3/_table.html.haml @@ -7,13 +7,13 @@ = 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 + .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.five.columns + .form-buttons = form.submit t('.reset'), type: :reset, class: "medium", 'data-reflex': 'click->products#fetch' = form.submit t('.save'), class: "medium" %table.products diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 123fa7f286..cc90b4c2a9 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -27,6 +27,16 @@ 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 + } + } } } From e48d009668a77fd0fd32731531e2fe3cd36bed8f Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 9 Jan 2024 13:11:49 +1100 Subject: [PATCH 2/6] Hide #sort section instead of covering it Before, the .form-actions was overlaying it, to avoid making the table below jump. But if the .form-actions and #sort are the same height, it won't jump when we swap them. It does make the table jump in the case of a multi-line .form-actions message, but that only happens after submit anyway. This is needed for the next commit.. --- app/webpacker/css/admin/products_v3.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index cc90b4c2a9..9114a43fba 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -22,8 +22,8 @@ // Form actions floats over other controls when active #products-form { .form-actions { - position: absolute; - top: -1em; + // position: absolute; + // top: -1; left: 0; right: 0; z-index: 1; // Ensure tom-select and .disabled-section are covered @@ -174,7 +174,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; @@ -184,6 +185,10 @@ line-height: $btn-relaxed-height; height: $btn-relaxed-height; + &.disabled-section { + display: none; + } + .with-dropdown { display: flex; justify-content: space-between; @@ -198,7 +203,7 @@ grid-template-rows: 1fr; grid-column-gap: 20px; align-items: end; - margin-bottom: 20px; + margin-bottom: 1rem; .query { grid-column: 1 / span 3; From 4f27bea02f135554ae4ecb61dd3387941d7908a7 Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 9 Jan 2024 13:25:43 +1100 Subject: [PATCH 3/6] Make table header sticky But it overlaps the .form-actions. how to make them sticky together.. todo: register the z-index in variables.scss --- app/webpacker/css/admin/products_v3.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 9114a43fba..cc633277ab 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -49,9 +49,15 @@ 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 + + th.with-input { + padding-left: $padding-tbl-cell + $hpadding-txt; + padding-right: $padding-tbl-cell + $hpadding-txt; + } } // Row hover From c3e513e45724d11bea3bef2bdec97e6e111be411 Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 9 Jan 2024 14:21:59 +1100 Subject: [PATCH 4/6] Move .form-actions into table, to allow sticky stacking Unfortunately, it's not possible to stack two sticky elements that are inside different containers: https://stackoverflow.com/questions/54689034/pure-css-multiple-stacked-position-sticky So instead I've moved them under the same container. The .form-actions needs to cover up some of the table border. I don't like the deep nesting of markup or class naming.. pls suggest if you have better ideas! --- app/views/admin/products_v3/_table.html.haml | 25 +++++++++-------- app/webpacker/css/admin/products_v3.scss | 29 ++++++++++++++------ 2 files changed, 35 insertions(+), 19 deletions(-) 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; From 792dc2cb36ee48bf14d463383c175de2b0e4e317 Mon Sep 17 00:00:00 2001 From: David Cook Date: Wed, 10 Jan 2024 14:15:10 +1100 Subject: [PATCH 5/6] Add shadow --- app/webpacker/css/admin/products_v3.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index d72e1b17d7..977b5fbac3 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -47,6 +47,7 @@ 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. From 0bb0e1674e0fbb6b32913034ad8340e65834d41b Mon Sep 17 00:00:00 2001 From: David Cook Date: Wed, 10 Jan 2024 16:41:47 +1100 Subject: [PATCH 6/6] Remove unused rule I forgot to remove this before. --- app/webpacker/css/admin/products_v3.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 977b5fbac3..8271602135 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -64,7 +64,6 @@ background-color: white; padding: 4px 0; - z-index: 1; // Ensure tom-select and .disabled-section are covered } th.with-input {