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

Ensure gap between fields wrapped over a line

Browse Source
This commit is contained in:
David Cook
2024-03-06 13:39:08 +11:00
parent 133c9c0609
commit cbcf388acc
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/views/admin/products_v3/_product_row.html.haml
View File

@@ -9,15 +9,16 @@
%td.field
= f.text_field :sku, 'aria-label': t('admin.products_page.columns.sku')
= error_message_on product, :sku
%td.field{ 'data-controller': 'toggle-control', 'data-toggle-control-match-value': 'items' }
%td.multi-field{ 'data-controller': 'toggle-control', 'data-toggle-control-match-value': 'items' }
= f.select :variant_unit_with_scale,
options_for_select(WeightsAndMeasures.variant_unit_options, product.variant_unit_with_scale),
{},
class: "fullwidth no-input",
'aria-label': t('admin.products_page.columns.unit_scale'),
data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }', action: "change->toggle-control#displayIfMatch"}
= f.text_field :variant_unit_name, 'aria-label': t('items'), 'data-toggle-control-target': 'control', style: (product.variant_unit == "items" ? "" : "display: none")
= error_message_on product, :variant_unit_name, 'data-toggle-control-target': 'control'
.field
= f.text_field :variant_unit_name, 'aria-label': t('items'), 'data-toggle-control-target': 'control', style: (product.variant_unit == "items" ? "" : "display: none")
= error_message_on product, :variant_unit_name, 'data-toggle-control-target': 'control'
%td.align-right
-# empty
%td.align-right

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

@@ -162,7 +162,12 @@
.field {
padding: 0;
margin-bottom: 0.75em;
}
.multi-field {
// Allow wrap with small gap
display: flex;
flex-wrap: wrap;
gap: 3px;
}
label {
@@ -362,8 +367,12 @@
border-radius: $border-radius;
box-shadow: 0px 0px 8px 0px rgba($near-black, 0.25);
.field:last-child {
margin-bottom: 0;
.field{
margin-bottom: 0.75em;
&:last-child {
margin-bottom: 0;
}
}
input[disabled] {