smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Переключатель вида перенесён в строку с фильтрами

Browse Source 
- Строка поиска теперь отдельно на всю ширину (input-group)
- Переключатель вида (карточки/список) перенесён к фильтрам
- Переключатель прижат справа (ms-auto) рядом с чекбоксом
- Размер кнопок переключателя - btn-sm для компактности
- Чекбокс больше не прижат к краю (убран ms-auto)
- Более логичная группировка элементов
This commit is contained in:
Andrey Smakotin
2025-12-11 00:44:25 +03:00
parent 608ac25d43
commit cf5dee8657
1 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
myproject/products/templates/products/components/product_search_picker.html
View File

@@ -48,35 +48,18 @@ ProductSearchPicker.init('#writeoff-products', {
<div class="card shadow-sm">
<!-- Строка поиска -->
<div class="card-header bg-white py-3">
<div class="d-flex gap-2 align-items-center flex-wrap">
<!-- Поиск - большой и заметный -->
<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-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>
</div>
{% if show_view_toggle|default:True %}
<!-- Переключатель вида -->
<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>
</button>
<button class="btn btn-outline-secondary product-picker-view"
data-view="list" title="Список">
<i class="bi bi-list-ul"></i>
</button>
</div>
{% endif %}
<div class="input-group">
<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-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>
</div>
</div>
@@ -105,7 +88,7 @@ ProductSearchPicker.init('#writeoff-products', {
{% endif %}
<!-- Фильтр по наличию -->
<div class="form-check form-switch ms-auto">
<div class="form-check form-switch">
<input class="form-check-input product-picker-in-stock"
type="checkbox"
id="{{ container_id|default:'product-search-picker' }}-in-stock"
@@ -115,6 +98,20 @@ ProductSearchPicker.init('#writeoff-products', {
Только в наличии
</label>
</div>
{% if show_view_toggle|default:True %}
<!-- Переключатель вида -->
<div class="btn-group ms-auto">
<button class="btn btn-outline-secondary btn-sm product-picker-view"
data-view="grid" title="Карточки">
<i class="bi bi-grid-3x3-gap"></i>
</button>
<button class="btn btn-outline-secondary btn-sm product-picker-view"
data-view="list" title="Список">
<i class="bi bi-list-ul"></i>
</button>
</div>
{% endif %}
</div>
</div>
{% endif %}