feat(ui): add collapsible section for inventory information with toggle animation
- Wrap inventory information table in Bootstrap collapse component - Add toggle button with chevron icon indicating collapse state - Implement JavaScript to animate chevron icon on collapse/expand - Set inventory information to be collapsed by default for cleaner UI This change improves the user interface by reducing clutter on the inventory detail page, allowing users to focus on the most important information first and expand additional details as needed.
This commit is contained in:
@@ -19,9 +19,14 @@
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<!-- Информация об инвентаризации - свернута по умолчанию -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<h5>Информация</h5>
|
||||
<button class="btn btn-outline-primary btn-sm d-flex align-items-center gap-2 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#inventory-info-collapse" aria-expanded="false" aria-controls="inventory-info-collapse">
|
||||
<i class="bi bi-chevron-down" id="info-collapse-icon"></i>
|
||||
<span>Информация</span>
|
||||
</button>
|
||||
<div class="collapse" id="inventory-info-collapse">
|
||||
<table class="table table-borderless">
|
||||
{% if inventory.document_number %}
|
||||
<tr>
|
||||
@@ -64,6 +69,25 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Добавляем простую анимацию для иконки при сворачивании/разворачивании
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const collapseElement = document.getElementById('inventory-info-collapse');
|
||||
const collapseIcon = document.getElementById('info-collapse-icon');
|
||||
|
||||
collapseElement.addEventListener('show.bs.collapse', function() {
|
||||
collapseIcon.classList.remove('bi-chevron-down');
|
||||
collapseIcon.classList.add('bi-chevron-up');
|
||||
});
|
||||
|
||||
collapseElement.addEventListener('hide.bs.collapse', function() {
|
||||
collapseIcon.classList.remove('bi-chevron-up');
|
||||
collapseIcon.classList.add('bi-chevron-down');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% if inventory.status == 'completed' %}
|
||||
<!-- Информация о созданных документах -->
|
||||
|
||||
Reference in New Issue
Block a user