Улучшен UX компонента поиска товаров - большая заметная строка поиска
- Убран заголовок блока - Строка поиска теперь большая (form-control-lg) и занимает всю ширину - Добавлена иконка поиска слева от input - Заголовок перенесен в placeholder строки поиска - Переключатель вида теперь стандартного размера (не sm) - Более чистый и современный UI
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user