raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-09 23:06:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style tom-select dropdown-input to appear over the main control

Browse Source 
It's more compact, and we don't need to see the currently selected value because it's highlighted in the list already.
This commit is contained in:
David Cook
2023-12-14 14:53:52 +11:00
parent b97890b537
commit 2cbe9a4268
2 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/views/admin/products_v3/_filters.html.haml
View File

@@ -7,12 +7,12 @@
= label_tag :producer_id, t('.producers.label')
= select_tag :producer_id, options_for_select(producer_options, producer_id),
include_blank: t('.all_producers'), class: "fullwidth",
data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }', 'tom-select-placeholder-value': t('.search_for_producers')}
data: { "controller": "tom-select", 'tom-select-placeholder-value': t('.search_for_producers')}
.categories
= label_tag :category_id, t('.categories.label')
= select_tag :category_id, options_for_select(category_options, category_id),
include_blank: t('.all_categories'), class: "fullwidth",
data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }', 'tom-select-placeholder-value': t('.search_for_categories')}
data: { "controller": "tom-select", 'tom-select-placeholder-value': t('.search_for_categories')}
.submit
.search-button
= button_tag t(".search"), class: "secondary icon-search relaxed"

59
app/webpacker/css/admin_v3/components/tom_select.scss
View File

@@ -1,9 +1,3 @@
@mixin hide-input {
// Pretend there's no text input (it can't be hidden entirely, in order for tom-select to work)
cursor: pointer;
caret-color: transparent;
}
.ts-wrapper.single,
.ts-wrapper.multi {
min-height: 40px;
@@ -43,16 +37,20 @@
}
.ts-dropdown {
// Unstyled, we style the dropdown-content instead
margin: 0;
background: none;
border: none;
box-shadow: none;
}
.ts-dropdown-content {
margin-top: 4px;
color: $near-black;
background-color: $color-body-bg;
@include border-radius($border-radius);
border: none;
box-shadow: $shadow-dropdown;
.ts-dropdown-content {
padding: $border-radius 0;
}
.option {
padding: 8px;
border-left: 3px solid transparent;
@@ -68,11 +66,31 @@
}
}
.plugin-dropdown_input .dropdown-input {
border-color: $lighter-grey;
.plugin-dropdown_input {
.ts-dropdown {
// Cover up the control with the input
top: 0;
}
&:focus {
border-color: $orient;
.dropdown-input-wrap::after {
position: absolute;
content: "\f077"; // chevron-up
font-family: FontAwesome;
border: none;
top: 0.7rem;
right: 0.7rem;
font-size: 13px;
}
.dropdown-input {
background-color: $color-body-bg;
border: 1px solid $lighter-grey;
box-shadow: none;
padding: 0.5rem 0.75rem;
&:focus {
border: 1px solid $orient;
}
}
}
@@ -82,10 +100,6 @@
max-height: 40px;
max-width: 100%;
&.has-items {
@include hide-input;
}
.ts-control {
padding: 0.5rem 0.75rem;
padding-right: 1rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
@@ -120,13 +134,12 @@
// 'no-input' mode, like a native select (hide text input).
.ts-wrapper.single.no-input {
&.input-active .ts-control {
@include hide-input;
}
.ts-dropdown {
position: absolute;
top: 0; // we don't need to see the currently selected option, because it's visible in the dropdown
}
.ts-dropdown-content {
margin-top: 0;
}
}