Sfera/sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Улучшены стили и функциональность страницы создания поставки. Изменены классы сетки для более адаптивного отображения, добавлены новые бейджи для скидок и статуса товара. Убраны стрелки у полей ввода типа "number" для улучшения пользовательского интерфейса. Оптимизированы размеры и отступы элементов для лучшего восприятия.

Browse Source
This commit is contained in:
Bivekich
2025-07-18 15:56:22 +03:00
parent 93bb5827d2
commit 5157113563
2 changed files with 91 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/globals.css
View File

@ -380,3 +380,14 @@
0 0 40px rgba(192, 132, 252, 0.25); 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;
}

193
src/components/supplies/create-supply-page.tsx
View File

@ -403,7 +403,7 @@ export function CreateSupplyPage() {
</Card> </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) => { {mockProducts.map((product) => {
const selectedQuantity = getSelectedQuantity(product.id) const selectedQuantity = getSelectedQuantity(product.id)
const discountedPrice = product.discount const discountedPrice = product.discount
@ -419,34 +419,22 @@ export function CreateSupplyPage() {
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 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
</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"> <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`}> <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} шт {product.quantity}
</Badge> </Badge>
</div> </div>
{/* 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 с кнопками */} {/* Overlay с кнопками */}
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"> <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<div className="flex space-x-2"> <div className="flex space-x-2">
@ -460,123 +448,102 @@ export function CreateSupplyPage() {
</div> </div>
</div> </div>
<div className="p-5 space-y-4"> <div className="p-3 space-y-3">
{/* Заголовок и бренд */} {/* Заголовок и бренд */}
<div> <div>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-1">
{product.brand && ( {product.brand && (
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs"> <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
{product.brand} {product.brand}
</Badge> </Badge>
)} )}
<Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"> {product.isNew && (
{product.category} <Badge className="bg-blue-500 text-white border-0 text-xs">
</Badge> NEW
</Badge>
)}
{product.isBestseller && (
<Badge className="bg-orange-500 text-white border-0 text-xs">
ХИТ
</Badge>
)}
</div> </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} {product.name}
</h3> </h3>
<p className="text-white/60 text-xs mb-2">
Артикул: {product.article}
</p>
</div> </div>
{/* Описание */} {/* Основная характеристика */}
<p className="text-white/70 text-sm line-clamp-2 leading-relaxed"> <div className="text-white/60 text-xs">
{product.description} {product.color && <span className="text-white">{product.color}</span>}
</p> {product.size && <span className="text-white ml-2">{product.size}</span>}
{/* Характеристики */}
<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>
)}
</div> </div>
{/* Цена */} {/* Цена */}
<div className="flex items-center justify-between pt-3 border-t border-white/10"> <div className="pt-2 border-t border-white/10">
<div> <div className="flex items-center space-x-2">
<div className="flex items-center space-x-2"> <div className="text-white font-bold text-lg">
<div className="text-white font-bold text-xl"> {formatCurrency(discountedPrice)}
{formatCurrency(discountedPrice)}
</div>
{product.discount && (
<div className="text-white/40 text-sm line-through">
{formatCurrency(product.price)}
</div>
)}
</div> </div>
<div className="text-white/60 text-xs">за штуку</div> {product.discount && (
<div className="text-white/40 text-xs line-through">
{formatCurrency(product.price)}
</div>
)}
</div> </div>
</div> </div>
{/* Управление количеством */} {/* Управление количеством */}
<div className="flex items-center justify-between space-x-3"> <div className="flex items-center space-x-2">
<div className="flex items-center space-x-2 flex-1"> <Button
<Button variant="ghost"
variant="ghost" size="sm"
size="sm" onClick={() => updateProductQuantity(product.id, Math.max(0, selectedQuantity - 1))}
onClick={() => updateProductQuantity(product.id, Math.max(0, selectedQuantity - 1))} disabled={selectedQuantity === 0}
disabled={selectedQuantity === 0} className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
className="h-9 w-9 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20" >
> <Minus className="h-3 w-3" />
<Minus className="h-4 w-4" /> </Button>
</Button> <input
<Input type="text"
type="number" inputMode="numeric"
value={selectedQuantity} pattern="[0-9]*"
onChange={(e) => { value={selectedQuantity}
const value = Math.max(0, Math.min(product.quantity, parseInt(e.target.value) || 0)) onChange={(e) => {
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))
className="h-9 w-16 text-center bg-white/10 border-white/20 text-white text-sm" updateProductQuantity(product.id, numValue)
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" <Button
size="sm" variant="ghost"
onClick={() => updateProductQuantity(product.id, Math.min(product.quantity, selectedQuantity + 1))} size="sm"
disabled={selectedQuantity >= product.quantity} onClick={() => updateProductQuantity(product.id, Math.min(product.quantity, selectedQuantity + 1))}
className="h-9 w-9 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20" disabled={selectedQuantity >= product.quantity}
> 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" /> >
</Button> <Plus className="h-3 w-3" />
</div> </Button>
{selectedQuantity > 0 && ( {selectedQuantity > 0 && (
<Button <Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
size="sm" <ShoppingCart className="h-3 w-3 mr-1" />
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" />
{selectedQuantity} {selectedQuantity}
</Button> </Badge>
)} )}
</div> </div>
{/* Сумма для выбранного товара */} {/* Сумма для выбранного товара */}
{selectedQuantity > 0 && ( {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="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-sm font-medium text-center"> <div className="text-green-300 text-xs font-medium text-center">
Сумма: {formatCurrency(discountedPrice * selectedQuantity)} {formatCurrency(discountedPrice * selectedQuantity)}
{product.discount && ( {product.discount && (
<span className="text-green-200 text-xs ml-2"> <div className="text-green-200 text-xs">
(экономия {formatCurrency((product.price - discountedPrice) * selectedQuantity)}) экономия {formatCurrency((product.price - discountedPrice) * selectedQuantity)}
</span> </div>
)} )}
</div> </div>
</div> </div>