raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-03 22:06:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move .form-actions into table, to allow sticky stacking

Browse Source 
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!
This commit is contained in:
David Cook
2024-01-09 14:21:59 +11:00
parent 4f27bea02f
commit c3e513e457
2 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/views/admin/products_v3/_table.html.haml
View File

@@ -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')

29
app/webpacker/css/admin/products_v3.scss
View File

@@ -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;