[tofix] Align row headers with input contents

tofix: the variable wasn't working fr some reason. Inputs add extra padding, so we add the same padding to the header. Using an opt-in class, because I think we won't want this on all columns.
openfoodfoundation · Aug 8, 2023 · 862114c · 862114c
1 parent 5af8d9e
commit 862114c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml
@@ -22,7 +22,7 @@
     %col{ width:"5%", style: "max-width:5em" }
     %thead
       %tr
-        %th.align-left= t('admin.products_page.columns.name')
+        %th.align-left.with-input= t('admin.products_page.columns.name')
         %th.align-right= t('admin.products_page.columns.sku')
         %th.align-right= t('admin.products_page.columns.unit')
         %th.align-right= t('admin.products_page.columns.price')

diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
@@ -23,6 +23,12 @@
     padding: 4px;
     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;
+    }
+
     // Row hover
     tr:hover {
       td {

diff --git a/app/webpacker/css/admin/shared/forms.scss b/app/webpacker/css/admin/shared/forms.scss
@@ -8,7 +8,7 @@ input[type="number"],
 textarea,
 fieldset {
   @include border-radius($border-radius);
-  padding: 7px 10px;
+  padding: 7px 10px; //TODO: use $vpadding-txt $hpadding-text;
   border: 1px solid $color-txt-brd;
   color: $color-txt-text;
   font-size: 90%;

diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -33,7 +33,7 @@ $color-tbl-cell-shadow:          rgb(0, 0, 0, 0.15) !default;
 $color-tbl-thead-txt:            $color-headers !default;
 $color-tbl-thead-bg:             $light-grey !default;
 $color-tbl-border:               $pale-blue !default;
-$padding-tbl-cell:               12px 12px;
+$padding-tbl-cell:               12px;
 $padding-tbl-cell-condensed:     10px 12px;
 $padding-tbl-cell-relaxed:       16px 12px;
 
@@ -70,10 +70,13 @@ $color-sel-text:                 $white !default;
 $color-sel-hover-bg:             lighten($color-sel-bg, 2) !default;
 $color-sel-hover-text:           $white !default;
 
-// Text inputs colors
+// Text inputs styles
 $color-txt-brd:                  $color-border !default;
 $color-txt-text:                 $near-black !default;
 $color-txt-hover-brd:            $teal !default;
+$vpadding-txt:                   7px;
+$hpadding-txt:                   10px;
+$padding-txt:                    $vpadding-txt $hpadding-txt;
 
 // Modal colors
 $color-modal-close-btn:          $color-5 !default;