From 281436867040a599774fd660fa17c356f6d6c258 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 18 Jul 2023 14:55:36 +0200 Subject: [PATCH 1/6] Adjust inside container to content without any padding --- app/webpacker/css/admin/products_v3.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index edd198fde0..45d0f4fb5d 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -11,6 +11,10 @@ position: static; } + #products-content .container { + padding: 0; + } + // Hopefully these rules will be moved to component(s). table.products { table-layout: fixed; // Column widths are based solely on col definitions (not content). This allows more efficient rendering. From 223d350b439017e14b4c5e2614aaa037359dcad8 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 18 Jul 2023 14:58:01 +0200 Subject: [PATCH 2/6] Use grid instead of flex in order to be more fixed and less flexible ;) --- app/webpacker/css/admin/products_v3.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 45d0f4fb5d..d138376ac1 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -94,8 +94,7 @@ } } - #sort, - #filters { + #sort { margin-bottom: 1em; display: flex; justify-content: space-between; @@ -115,8 +114,12 @@ } #filters { - gap: 20px; - align-items: flex-end; + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 20px; + align-items: end; + margin-bottom: 20px; .producers, .categories { @@ -127,16 +130,15 @@ } .query { - flex-grow: 1; + grid-column: 1 / span 3; } .producers, .categories { - flex-grow: 0; } .submit { - flex-grow: 0; + grid-column: 6 / span 1; } .query { From 6fe069608cc71847e1562de896f915ab0c53631a Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 18 Jul 2023 15:04:07 +0200 Subject: [PATCH 3/6] Re-adjust tom-select to match admin v3 style --- app/webpacker/css/admin_v3/all.scss | 2 +- .../css/admin_v3/components/tom_select.scss | 56 +++++++++++++++++++ 2 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 app/webpacker/css/admin_v3/components/tom_select.scss diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index e7780274aa..7f93f602ad 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -125,7 +125,7 @@ @import "v3_overrides"; // admin_v3 @import "~tom-select/src/scss/tom-select.default"; -@import "../admin/components/tom_select"; +@import "components/tom_select"; // admin_v3 @import "app/components/help_modal_component/help_modal_component"; @import "app/components/confirm_modal_component/confirm_modal_component"; diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss new file mode 100644 index 0000000000..01135292b5 --- /dev/null +++ b/app/webpacker/css/admin_v3/components/tom_select.scss @@ -0,0 +1,56 @@ +.ts-wrapper.single, +.ts-wrapper.multi { + min-height: 40px; + + &.input-active { + .ts-control { + border-color: $lighter-grey; + + input { + &::placeholder { + color: $light-grey; + } + } + } + } + + .ts-control { + box-shadow: none; + border-color: $lighter-grey; + background-color: $lighter-grey; + background-image: none; + @include border-radius($border-radius); + + input { + &::placeholder { + color: $near-black; + } + } + } + + .ts-dropdown { + @include border-radius($border-radius); + border: none; + box-shadow: none; + color: $near-black; + + .option { + &.selected { + border-left: 2px solid $orient; + } + + &.active { + background-color: $lighter-grey; + color: $near-black; + } + } + } +} + +.plugin-dropdown_input .dropdown-input { + border-color: $lighter-grey; + + &:focus { + border-color: $orient; + } +} From 0c11ea58680c2f33da2308517b8c6c9113b23956 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 18 Jul 2023 15:13:27 +0200 Subject: [PATCH 4/6] Use tom-select to have a designed dropdown Not sure this is the best solution, since it's not exactly the right usage of tom-select --- app/views/admin/products_v3/_filters.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/admin/products_v3/_filters.html.haml b/app/views/admin/products_v3/_filters.html.haml index 7d0c9b3b28..e83f0587fc 100644 --- a/app/views/admin/products_v3/_filters.html.haml +++ b/app/views/admin/products_v3/_filters.html.haml @@ -4,10 +4,10 @@ = text_field_tag :search_term, search_term, placeholder: t('.search_products') .producers .label= t('.producers.label') - = select_tag :producer_id, options_for_select(producer_options, producer_id), include_blank: t('.all_producers') + = select_tag :producer_id, options_for_select(producer_options, producer_id), include_blank: t('.all_producers'), "data-controller": "tom-select", "data-tom-select-options-value": '{ "plugins": [] }', class: "fullwidth" .categories .label= t('.categories.label') - = select_tag :category_id, options_for_select(category_options, category_id), include_blank: t('.all_categories') + = 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" From 200550588af3efbec97c44896a7ed7bd9fb2ca6e Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 18 Jul 2023 15:56:10 +0200 Subject: [PATCH 5/6] Be as clause as possible from native `