raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-28 01:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align row headers with input contents

Browse Source 
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.
This commit is contained in:
David Cook
2023-08-08 17:20:30 +10:00
parent 8440c44a6f
commit 37d1113e4c
5 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
app/webpacker/css/admin/globals/variables.scss
View File

@@ -67,6 +67,8 @@ $color-sel-hover-text: $color-1 !default;
$color-txt-brd: $color-border !default;
$color-txt-text: $color-3 !default;
$color-txt-hover-brd: $color-2 !default;
$vpadding-txt: 7px;
$hpadding-txt: 10px;
// Modal colors
$color-modal-close-btn: $color-5 !default;

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

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

2
app/webpacker/css/admin/shared/forms.scss
View File

@@ -8,7 +8,7 @@ input[type="number"],
textarea,
fieldset {
@include border-radius($border-radius);
padding: 7px 10px;
padding: $vpadding-txt $hpadding-txt;
border: 1px solid $color-txt-brd;
color: $color-txt-text;
font-size: 90%;

8
app/webpacker/css/admin_v3/globals/variables.scss
View File

@@ -33,9 +33,9 @@ $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;
$padding-tbl-cell-relaxed: 12px 12px;
// Button colors
$color-btn-bg: $teal !default;
@@ -70,10 +70,12 @@ $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: 5px;
$hpadding-txt: 8px;
// Modal colors
$color-modal-close-btn: $color-5 !default;