From 4219d0aa086462b84502acd9ca4d354061188dd7 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 16 Aug 2023 11:00:24 +0200 Subject: [PATCH 1/9] Change font size and weight --- app/webpacker/css/admin/products_v3.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index d138376ac1..4d5d675f2b 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -83,7 +83,8 @@ justify-content: center; align-items: center; flex-direction: column; - font-size: $h3-size; + font-size: $h6-size; + font-weight: 600; gap: 20px; #no-products-actions { From 5de0d79ca278c7e5a9c4aa127e54baa7548f2eff Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 16 Aug 2023 11:01:19 +0200 Subject: [PATCH 2/9] Increase distance from search container to 136px 116px + 20px (gap) = 136px --- app/webpacker/css/admin/products_v3.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 4d5d675f2b..e5da3584a3 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -86,6 +86,7 @@ font-size: $h6-size; font-weight: 600; gap: 20px; + margin-top: 116px; #no-products-actions { display: flex; From f5e7738c78dd72fa4b089b129a803a88d492d653 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 16 Aug 2023 11:27:00 +0200 Subject: [PATCH 3/9] Introduce relaxed, regular and condensed button for specify height --- app/views/admin/products_v3/_filters.html.haml | 2 +- app/views/admin/products_v3/_sort.html.haml | 2 +- app/webpacker/css/admin/products_v3.scss | 10 +++++----- .../css/admin_v3/components/buttons.scss | 15 ++++++++++----- app/webpacker/css/admin_v3/globals/variables.scss | 5 +++-- 5 files changed, 20 insertions(+), 14 deletions(-) diff --git a/app/views/admin/products_v3/_filters.html.haml b/app/views/admin/products_v3/_filters.html.haml index e83f0587fc..b63eb23936 100644 --- a/app/views/admin/products_v3/_filters.html.haml +++ b/app/views/admin/products_v3/_filters.html.haml @@ -10,4 +10,4 @@ = select_tag :category_id, options_for_select(category_options, category_id), include_blank: t('.all_categories'), "data-controller": "tom-select", "data-tom-select-options-value": '{ "plugins": [] }', class: "fullwidth" .submit .search-button - = button_tag t(".search"), class: "secondary icon-search" + = button_tag t(".search"), class: "secondary icon-search relaxed" diff --git a/app/views/admin/products_v3/_sort.html.haml b/app/views/admin/products_v3/_sort.html.haml index d3daa5eaa3..3b39f3ed9f 100644 --- a/app/views/admin/products_v3/_sort.html.haml +++ b/app/views/admin/products_v3/_sort.html.haml @@ -2,7 +2,7 @@ %div = t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to) - if search_term.present? || producer_id.present? || category_id.present? - %a{ href: "#", class: "button disruptive medium", data: { reflex: "click->products#clear_search" } } + %a{ href: "#", class: "button disruptive condensed", data: { reflex: "click->products#clear_search" } } = t(".pagination.clear_search") %div.with-dropdown = t(".pagination.per_page.show") diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index e5da3584a3..a5b7d9fe62 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -104,8 +104,8 @@ } #sort { - line-height: $btn-medium-height; - height: $btn-medium-height; + line-height: $btn-relaxed-height; + height: $btn-relaxed-height; .with-dropdown { display: flex; @@ -150,8 +150,8 @@ background-color: $lighter-grey; border: 1px solid $lighter-grey; border-radius: 4px; - height: $btn-height; - line-height: $btn-height; + height: $btn-relaxed-height; + line-height: $btn-relaxed-height; &:has(input:focus), &:has(input:active) { @@ -176,7 +176,7 @@ .categories { select { width: 150px; - height: $btn-height; + height: $btn-relaxed-height; } } diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss index 71b38206b8..e37abeb6f8 100644 --- a/app/webpacker/css/admin_v3/components/buttons.scss +++ b/app/webpacker/css/admin_v3/components/buttons.scss @@ -12,8 +12,8 @@ button:not(.plain):not(.trix-button), border: 1px solid $color-btn-bg; color: $color-btn-text; text-transform: uppercase; - line-height: 40px; - height: 40px; + line-height: $btn-regular-height - 2px; // remove 2px to compensate for border + height: $btn-regular-height; font-weight: bold; &:before { @@ -79,9 +79,14 @@ button:not(.plain):not(.trix-button), } } - &.medium { - line-height: $btn-medium-height; - height: $btn-medium-height; + &.condensed { + line-height: $btn-condensed-height - 2px; // remove 2px to compensate for border + height: $btn-condensed-height; + } + + &.relaxed { + line-height: $btn-relaxed-height - 2px; // remove 2px to compensate for border + height: $btn-relaxed-height; } .badge { diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index de8975e93d..cf8fa70498 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -155,5 +155,6 @@ $border-radius: 4px !default; $font-weight-bold: 600 !default; $font-weight-normal: 400 !default; -$btn-height: 40px !default; -$btn-medium-height: 32px !default; +$btn-relaxed-height: 40px !default; +$btn-regular-height: 32px !default; +$btn-condensed-height: 26px !default; From e4479e793552cc76074beecdbe8a1b44b57cf41b Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 16 Aug 2023 11:31:26 +0200 Subject: [PATCH 4/9] Increase button height when no result --- app/views/admin/products_v3/_no_products.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/admin/products_v3/_no_products.html.haml b/app/views/admin/products_v3/_no_products.html.haml index 7b0bbb328c..4cb82d2eb5 100644 --- a/app/views/admin/products_v3/_no_products.html.haml +++ b/app/views/admin/products_v3/_no_products.html.haml @@ -1,6 +1,6 @@ - if search_term.present? || producer_id.present? || category_id.present? = t('.no_products_found_for_search') - %a{ href: "#", class: "button disruptive", data: { reflex: "click->products#clear_search" } } + %a{ href: "#", class: "button disruptive relaxed", data: { reflex: "click->products#clear_search" } } = t("admin.products_v3.sort.pagination.clear_search") - else = t('.no_products_found') From d27b2084ed0a44a07a3edeabc4ff94e715e03e2e Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 16 Aug 2023 11:34:30 +0200 Subject: [PATCH 5/9] Do not underline text when it's a button --- app/webpacker/css/admin_v3/components/buttons.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss index e37abeb6f8..a3884dad28 100644 --- a/app/webpacker/css/admin_v3/components/buttons.scss +++ b/app/webpacker/css/admin_v3/components/buttons.scss @@ -111,3 +111,7 @@ button:not(.plain):not(.trix-button), } } } + +a.button { + text-decoration: none; +} From 117c373985356a4d344338b4c6a49671cc8473bb Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 16 Aug 2023 14:53:52 +0200 Subject: [PATCH 6/9] Add "remove-sign" icon before text in disruptive button --- app/webpacker/css/admin_v3/components/buttons.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss index a3884dad28..f233e23a48 100644 --- a/app/webpacker/css/admin_v3/components/buttons.scss +++ b/app/webpacker/css/admin_v3/components/buttons.scss @@ -115,3 +115,10 @@ button:not(.plain):not(.trix-button), a.button { text-decoration: none; } + +.button.disruptive::before { + margin-right: 3px; + + @extend .icon-remove-sign; + font-family: FontAwesome; +} From 721baa4d3f64af92f7f7663ffa53982d746cbed5 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 16 Aug 2023 14:57:57 +0200 Subject: [PATCH 7/9] Increase button size --- app/views/admin/products_v3/_sort.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/admin/products_v3/_sort.html.haml b/app/views/admin/products_v3/_sort.html.haml index 3b39f3ed9f..20c67e083b 100644 --- a/app/views/admin/products_v3/_sort.html.haml +++ b/app/views/admin/products_v3/_sort.html.haml @@ -2,7 +2,7 @@ %div = t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to) - if search_term.present? || producer_id.present? || category_id.present? - %a{ href: "#", class: "button disruptive condensed", data: { reflex: "click->products#clear_search" } } + %a{ href: "#", class: "button disruptive", data: { reflex: "click->products#clear_search" } } = t(".pagination.clear_search") %div.with-dropdown = t(".pagination.per_page.show") From 47115a0daf35854aaf1e211694714e4c7ee47f51 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 16 Aug 2023 14:58:16 +0200 Subject: [PATCH 8/9] Change default label for searched products --- config/locales/en.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/locales/en.yml b/config/locales/en.yml index d3e147cf25..5462c301e5 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -797,7 +797,7 @@ en: loading: Loading your products sort: pagination: - total_html: "%{total} products in your catalogue. Showing %{from} to %{to}." + total_html: "%{total} products found for your search criteria. Showing %{from} to %{to}." per_page: show: Show per_page: "%{num} per page" From 06fccd86184b70b7e5155eef809966f65d3a6565 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 16 Aug 2023 15:04:07 +0200 Subject: [PATCH 9/9] Totally hide input above its container --- app/webpacker/css/admin/products_v3.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index a5b7d9fe62..ba34c089d4 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -159,7 +159,10 @@ } > input { - background-color: $lighter-grey; + // Totally hide the input from its container + background-color: transparent; + border: none; + width: calc(100% - 30px); // 30px is the width of the search icon + padding } &:before {