Улучшен UX компонента поиска товаров - большая заметная строка поиска

- Убран заголовок блока
- Строка поиска теперь большая (form-control-lg) и занимает всю ширину
- Добавлена иконка поиска слева от input
- Заголовок перенесен в placeholder строки поиска
- Переключатель вида теперь стандартного размера (не sm)
- Более чистый и современный UI
This commit is contained in:
2025-12-11 00:41:01 +03:00
parent 7342cc4ffe
commit b550b459dc

View File

@@ -46,20 +46,19 @@ ProductSearchPicker.init('#writeoff-products', {
{% if warehouse_id %}data-warehouse-id="{{ warehouse_id }}"{% endif %}>
<div class="card shadow-sm">
<!-- Заголовок -->
<div class="card-header bg-white py-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
<strong>
<i class="bi bi-box-seam text-primary"></i>
{{ title|default:'Выбор товара' }}
</strong>
<!-- Строка поиска -->
<div class="card-header bg-white py-3">
<div class="d-flex gap-2 align-items-center flex-wrap">
<!-- Поиск -->
<div class="input-group" style="width: 250px;">
<!-- Поиск - большой и заметный -->
<div class="input-group flex-grow-1">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-search text-primary"></i>
</span>
<input type="text"
class="form-control form-control-sm product-picker-search"
placeholder="Поиск по названию, артикулу...">
<button class="btn btn-outline-secondary btn-sm product-picker-search-clear"
class="form-control form-control-lg border-start-0 product-picker-search"
placeholder="{{ title|default:'Поиск товара по названию, артикулу...' }}"
style="box-shadow: none;">
<button class="btn btn-outline-secondary product-picker-search-clear"
type="button" style="display: none;">
<i class="bi bi-x-lg"></i>
</button>
@@ -67,7 +66,7 @@ ProductSearchPicker.init('#writeoff-products', {
{% if show_view_toggle|default:True %}
<!-- Переключатель вида -->
<div class="btn-group btn-group-sm">
<div class="btn-group">
<button class="btn btn-outline-secondary product-picker-view"
data-view="grid" title="Карточки">
<i class="bi bi-grid-3x3-gap"></i>