Refactor brand management UI; replace datalist with combo box widget and enhance styling for better usability

This commit is contained in:
Yaro Kasear 2025-06-18 09:59:07 -05:00
parent e2b8579362
commit dba2438937
4 changed files with 82 additions and 83 deletions

20
static/css/widget.css Normal file
View 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; /* Bootstraps 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;
}

View file

@ -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;
});
});