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

fix: Increase modal image display size for better viewing

Browse Source 
- Increased modal height from 70vh to 85vh for larger display
- Expanded min-height from 60vh to 80vh for more breathing room
- Changed modal-dialog-centered modal-lg to modal-xl in productkit_detail
- Images now display at nearly full screen size for 1200x1200 large images
- Improved background color and layout for modal-body

Better user experience:
- Images display closer to their full 1200x1200 resolution
- More space for image viewing without scrolling
- Consistent styling across product and productkit modals

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andrey Smakotin
2025-10-22 23:49:34 +03:00
parent 6176bd82c5
commit 65e07c2f1b
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
myproject/products/templates/products/product_detail.html
View File

@@ -66,8 +66,9 @@
<div class="carousel-inner">
{% for photo in product_photos %}
<div class="carousel-item {% if forloop.first %}active{% endif %}">
<div class="text-center" style="min-height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
<img src="{{ photo.get_large_url }}" class="d-block" alt="Фото товара" style="max-height: 70vh; max-width: 100%; object-fit: contain;">
<div class="text-center" style="min-height: 80vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
<!-- Large 1200x1200 WebP для полного размера просмотра -->
<img src="{{ photo.get_large_url }}" class="d-block" alt="Фото товара" style="max-height: 85vh; max-width: 95%; object-fit: contain;">
</div>
</div>
{% endfor %}

7
myproject/products/templates/products/productkit_detail.html
View File

@@ -190,14 +190,15 @@
<!-- Модальное окно для просмотра -->
<div class="modal fade" id="photoModal{{ photo.pk }}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Фото комплекта</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center">
<img src="{{ photo.get_large_url }}" class="img-fluid" style="max-height: 70vh;">
<div class="modal-body text-center" style="min-height: 80vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
<!-- Large 1200x1200 WebP для полного размера просмотра -->
<img src="{{ photo.get_large_url }}" class="img-fluid" style="max-height: 85vh; max-width: 95%;">
</div>
</div>
</div>