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 shadow-sm">
<!-- Строка поиска --> <!-- Строка поиска -->
<div class="card-header bg-white py-3"> <div class="card-header bg-white py-3">
<div class="d-flex gap-2 align-items-center flex-wrap"> <div class="input-group">
<!-- Поиск - большой и заметный --> <span class="input-group-text bg-light border-end-0">
<div class="input-group flex-grow-1"> <i class="bi bi-search text-primary"></i>
<span class="input-group-text bg-light border-end-0"> </span>
<i class="bi bi-search text-primary"></i> <input type="text"
</span> class="form-control form-control-lg border-start-0 product-picker-search"
<input type="text" placeholder="{{ title|default:'Поиск товара по названию, артикулу...' }}"
class="form-control form-control-lg border-start-0 product-picker-search" style="box-shadow: none;">
placeholder="{{ title|default:'Поиск товара по названию, артикулу...' }}" <button class="btn btn-outline-secondary product-picker-search-clear"
style="box-shadow: none;"> type="button" style="display: none;">
<button class="btn btn-outline-secondary product-picker-search-clear" <i class="bi bi-x-lg"></i>
type="button" style="display: none;"> </button>
<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> </div>
</div> </div>
@@ -105,7 +88,7 @@ ProductSearchPicker.init('#writeoff-products', {
{% endif %} {% endif %}
<!-- Фильтр по наличию --> <!-- Фильтр по наличию -->
<div class="form-check form-switch ms-auto"> <div class="form-check form-switch">
<input class="form-check-input product-picker-in-stock" <input class="form-check-input product-picker-in-stock"
type="checkbox" type="checkbox"
id="{{ container_id|default:'product-search-picker' }}-in-stock" id="{{ container_id|default:'product-search-picker' }}-in-stock"
@@ -115,6 +98,20 @@ ProductSearchPicker.init('#writeoff-products', {
Только в наличии Только в наличии
</label> </label>
</div> </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>
</div> </div>
{% endif %} {% endif %}