From 5324747f89dbd38a0c35f802dd99f3fe43b7d929 Mon Sep 17 00:00:00 2001 From: David Cook Date: Mon, 26 Aug 2024 16:33:33 +1000 Subject: [PATCH] Reduce cell padding This is closer to the original design: * 6px between inputs * 6px vertical padding on condensed rows * 12px vertical padding on relaxed rows Note that 'relaxed' rows are now smaller than the regular rows, which was not the original intention. But we haven't got spare time to do a broader review of table styles right now. --- app/views/admin/products_v3/_table.html.haml | 2 +- app/webpacker/css/admin/products_v3.scss | 2 +- app/webpacker/css/admin_v3/globals/variables.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index e04f33b00a..c011d02bb8 100644 --- a/app/views/admin/products_v3/_table.html.haml +++ b/app/views/admin/products_v3/_table.html.haml @@ -16,7 +16,7 @@ %table.products{ 'data-column-preferences-target': "table" } %colgroup -# The `min-width` property works in Chrome but not Firefox so is considered progressive enhancement. - %col.col-image{ width:"56px" }= # (image size + padding) + %col.col-image{ width:"44px" }= # (image size + padding) %col.col-name{ style:"min-width: 6em" }= # (grow to fill) %col.col-sku{ width:"8%", style:"min-width: 6em" } %col.col-unit_scale{ width:"8%" } diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 32dc4c5cda..912e940608 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -148,7 +148,7 @@ border-bottom: 2px solid $color-tbl-bg; &.with-image { - padding: 8px; + padding: 4px 2px; } } diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index 41863422d4..6aa5247dd1 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -40,8 +40,8 @@ $color-tbl-thead-txt: $color-headers !default; $color-tbl-thead-bg: $light-grey !default; $color-tbl-border: $pale-blue !default; $padding-tbl-cell: 12px; -$padding-tbl-cell-condensed: 4px 12px; -$padding-tbl-cell-relaxed: 12px 12px; +$padding-tbl-cell-condensed: 4px 3px; +$padding-tbl-cell-relaxed: 8px 3px; // Button colors $color-btn-bg: $teal !default;