Refactor brand management UI; replace datalist with combo box widget and enhance styling for better usability
This commit is contained in:
parent
e2b8579362
commit
dba2438937
4 changed files with 82 additions and 83 deletions
20
static/css/widget.css
Normal file
20
static/css/widget.css
Normal file
|
@ -0,0 +1,20 @@
|
|||
.combo-box-widget .form-control:focus,
|
||||
.combo-box-widget .form-select:focus,
|
||||
.combo-box-widget .btn:focus {
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
border-color: #ced4da !important; /* Bootstrap’s default neutral border */
|
||||
background-color: inherit; /* Or explicitly #fff if needed */
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.combo-box-widget .btn-primary:focus,
|
||||
.combo-box-widget .btn-danger:focus {
|
||||
background-color: inherit; /* Keep button from darkening */
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.combo-box-widget:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
|
||||
border-radius: 0.375rem;
|
||||
}
|
|
@ -1,20 +0,0 @@
|
|||
document.querySelectorAll('[data-datalist-bind]').forEach(input => {
|
||||
const datalistSelector = input.dataset.datalistBind;
|
||||
const hiddenSelector = input.dataset.hiddenTarget;
|
||||
const datalist = document.querySelector(datalistSelector);
|
||||
const hidden = document.querySelector(hiddenSelector);
|
||||
|
||||
if (!datalist || !hidden) return;
|
||||
|
||||
input.addEventListener('input', function () {
|
||||
const value = this.value;
|
||||
const options = datalist.querySelectorAll('option');
|
||||
let foundId = '';
|
||||
options.forEach(option => {
|
||||
if (option.value === value) {
|
||||
foundId = option.dataset.id || '';
|
||||
}
|
||||
});
|
||||
hidden.value = foundId;
|
||||
});
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue