diff --git a/myproject/products/templates/products/catalog.html b/myproject/products/templates/products/catalog.html index aa0f05f..4a09008 100644 --- a/myproject/products/templates/products/catalog.html +++ b/myproject/products/templates/products/catalog.html @@ -69,7 +69,7 @@ font-size: 0.65rem; padding: 0.15rem 0.35rem; } - /* Режим списка */ + /* Режим списка - табличная структура с фиксированными колонками */ .catalog-list.row { gap: 1px !important; } @@ -79,19 +79,22 @@ padding: 0 !important; } .catalog-list .catalog-item .card { - flex-direction: row; - align-items: stretch; + display: grid; + grid-template-columns: 50px 1fr 150px 120px 120px; + align-items: center; padding: 0; border-radius: 0.25rem; overflow: hidden; + min-height: 50px; } .catalog-list .catalog-item .card .position-relative { - flex-shrink: 0; + height: 50px; + width: 50px; + align-self: start; } .catalog-list .catalog-item .card .position-relative img, .catalog-list .catalog-item .card .position-relative > div { - height: 100% !important; - min-height: 36px; + height: 50px; width: 50px; border-radius: 0; object-fit: cover; @@ -100,20 +103,40 @@ display: none; } .catalog-list .catalog-item .card-body { - flex-grow: 1; - display: flex; - align-items: center; - padding: 0 0.5rem !important; - gap: 0.75rem; + display: contents; } - .catalog-list .catalog-item .card-body > div:first-child { - flex-grow: 1; + /* Название товара - ограничиваем 2 строками */ + .catalog-list .catalog-item .product-name { + padding: 0.4rem 0.5rem; + line-height: 1.3; + max-height: 3.4em; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + font-size: 0.85rem; + align-self: center; } - .catalog-list .catalog-item .card-body > div:last-child { - display: flex; - align-items: center; - gap: 0.75rem; - white-space: nowrap; + /* Остатки */ + .catalog-list .catalog-item .product-stock { + padding: 0.4rem 0.25rem; + text-align: left; + font-size: 0.8rem; + align-self: center; + } + /* Цена */ + .catalog-list .catalog-item .product-price { + padding: 0.4rem 0.25rem; + text-align: left; + font-size: 0.85rem; + align-self: center; + } + /* Артикул */ + .catalog-list .catalog-item .product-sku { + padding: 0.4rem 0.5rem 0.4rem 0.25rem; + text-align: left; + font-size: 0.8rem; + align-self: center; } .catalog-list .catalog-item .card-body .mt-1 { margin-top: 0 !important; @@ -239,6 +262,20 @@