Улучшены стили и функциональность страницы создания поставки. Изменены классы сетки для более адаптивного отображения, добавлены новые бейджи для скидок и статуса товара. Убраны стрелки у полей ввода типа "number" для улучшения пользовательского интерфейса. Оптимизированы размеры и отступы элементов для лучшего восприятия.
This commit is contained in:
Bivekich
@ -380,3 +380,14 @@
|
||||
0 0 40px rgba(192, 132, 252, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
/* Убираем стрелки у input[type="number"] */
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
@ -403,7 +403,7 @@ export function CreateSupplyPage() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
|
||||
{mockProducts.map((product) => {
|
||||
const selectedQuantity = getSelectedQuantity(product.id)
|
||||
const discountedPrice = product.discount
|
||||
@ -419,33 +419,21 @@ export function CreateSupplyPage() {
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
|
||||
{/* Badges в верхних углах */}
|
||||
<div className="absolute top-3 left-3 flex flex-col space-y-2">
|
||||
{product.isNew && (
|
||||
<Badge className="bg-blue-500 text-white border-0 font-medium">
|
||||
<Zap className="h-3 w-3 mr-1" />
|
||||
NEW
|
||||
{/* Количество в наличии */}
|
||||
<div className="absolute top-2 right-2">
|
||||
<Badge className={`${product.quantity > 50 ? 'bg-green-500/80' : product.quantity > 10 ? 'bg-yellow-500/80' : 'bg-red-500/80'} text-white border-0 backdrop-blur text-xs`}>
|
||||
{product.quantity}
|
||||
</Badge>
|
||||
)}
|
||||
{product.isBestseller && (
|
||||
<Badge className="bg-orange-500 text-white border-0 font-medium">
|
||||
<Star className="h-3 w-3 mr-1" />
|
||||
ХИТ
|
||||
</Badge>
|
||||
)}
|
||||
{product.discount && (
|
||||
<Badge className="bg-red-500 text-white border-0 font-bold">
|
||||
-{product.discount}%
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Количество в наличии */}
|
||||
<div className="absolute top-3 right-3">
|
||||
<Badge className={`${product.quantity > 50 ? 'bg-green-500/80' : product.quantity > 10 ? 'bg-yellow-500/80' : 'bg-red-500/80'} text-white border-0 backdrop-blur`}>
|
||||
{product.quantity} шт
|
||||
{/* Discount badge */}
|
||||
{product.discount && (
|
||||
<div className="absolute top-2 left-2">
|
||||
<Badge className="bg-red-500 text-white border-0 font-bold text-xs">
|
||||
-{product.discount}%
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Overlay с кнопками */}
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||
@ -460,123 +448,102 @@ export function CreateSupplyPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-4">
|
||||
<div className="p-3 space-y-3">
|
||||
{/* Заголовок и бренд */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
{product.brand && (
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
|
||||
{product.brand}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
|
||||
{product.category}
|
||||
{product.isNew && (
|
||||
<Badge className="bg-blue-500 text-white border-0 text-xs">
|
||||
NEW
|
||||
</Badge>
|
||||
)}
|
||||
{product.isBestseller && (
|
||||
<Badge className="bg-orange-500 text-white border-0 text-xs">
|
||||
ХИТ
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-white font-semibold text-lg mb-1 line-clamp-2 leading-tight">
|
||||
<h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
|
||||
{product.name}
|
||||
</h3>
|
||||
<p className="text-white/60 text-xs mb-2">
|
||||
Артикул: {product.article}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Описание */}
|
||||
<p className="text-white/70 text-sm line-clamp-2 leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
|
||||
{/* Характеристики */}
|
||||
<div className="space-y-2">
|
||||
{product.color && (
|
||||
<div className="text-white/60 text-xs flex items-center">
|
||||
<div className="w-3 h-3 rounded-full bg-gray-400 mr-2"></div>
|
||||
Цвет: <span className="text-white ml-1">{product.color}</span>
|
||||
</div>
|
||||
)}
|
||||
{product.size && (
|
||||
{/* Основная характеристика */}
|
||||
<div className="text-white/60 text-xs">
|
||||
Размер: <span className="text-white">{product.size}</span>
|
||||
</div>
|
||||
)}
|
||||
{product.weight && (
|
||||
<div className="text-white/60 text-xs">
|
||||
Вес: <span className="text-white">{product.weight} г</span>
|
||||
</div>
|
||||
)}
|
||||
{product.color && <span className="text-white">{product.color}</span>}
|
||||
{product.size && <span className="text-white ml-2">{product.size}</span>}
|
||||
</div>
|
||||
|
||||
{/* Цена */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-white/10">
|
||||
<div>
|
||||
<div className="pt-2 border-t border-white/10">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="text-white font-bold text-xl">
|
||||
<div className="text-white font-bold text-lg">
|
||||
{formatCurrency(discountedPrice)}
|
||||
</div>
|
||||
{product.discount && (
|
||||
<div className="text-white/40 text-sm line-through">
|
||||
<div className="text-white/40 text-xs line-through">
|
||||
{formatCurrency(product.price)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-white/60 text-xs">за штуку</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Управление количеством */}
|
||||
<div className="flex items-center justify-between space-x-3">
|
||||
<div className="flex items-center space-x-2 flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateProductQuantity(product.id, Math.max(0, selectedQuantity - 1))}
|
||||
disabled={selectedQuantity === 0}
|
||||
className="h-9 w-9 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
<Minus className="h-3 w-3" />
|
||||
</Button>
|
||||
<Input
|
||||
type="number"
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
value={selectedQuantity}
|
||||
onChange={(e) => {
|
||||
const value = Math.max(0, Math.min(product.quantity, parseInt(e.target.value) || 0))
|
||||
updateProductQuantity(product.id, value)
|
||||
const value = e.target.value.replace(/[^0-9]/g, '')
|
||||
const numValue = Math.max(0, Math.min(product.quantity, parseInt(value) || 0))
|
||||
updateProductQuantity(product.id, numValue)
|
||||
}}
|
||||
className="h-9 w-16 text-center bg-white/10 border-white/20 text-white text-sm"
|
||||
min={0}
|
||||
max={product.quantity}
|
||||
onFocus={(e) => e.target.select()}
|
||||
className="h-8 w-12 text-center bg-white/10 border border-white/20 text-white text-sm rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateProductQuantity(product.id, Math.min(product.quantity, selectedQuantity + 1))}
|
||||
disabled={selectedQuantity >= product.quantity}
|
||||
className="h-9 w-9 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{selectedQuantity > 0 && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white flex-shrink-0"
|
||||
>
|
||||
<ShoppingCart className="h-4 w-4 mr-1" />
|
||||
<Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
|
||||
<ShoppingCart className="h-3 w-3 mr-1" />
|
||||
{selectedQuantity}
|
||||
</Button>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Сумма для выбранного товара */}
|
||||
{selectedQuantity > 0 && (
|
||||
<div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded-lg p-3">
|
||||
<div className="text-green-300 text-sm font-medium text-center">
|
||||
Сумма: {formatCurrency(discountedPrice * selectedQuantity)}
|
||||
<div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
|
||||
<div className="text-green-300 text-xs font-medium text-center">
|
||||
{formatCurrency(discountedPrice * selectedQuantity)}
|
||||
{product.discount && (
|
||||
<span className="text-green-200 text-xs ml-2">
|
||||
(экономия {formatCurrency((product.price - discountedPrice) * selectedQuantity)})
|
||||
</span>
|
||||
<div className="text-green-200 text-xs">
|
||||
экономия {formatCurrency((product.price - discountedPrice) * selectedQuantity)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user