Align auction page elements for consistent layout
Update the main content wrapper in `Auctions.tsx` to use `max-w-7xl` and `mx-auto` for centering, and adjust padding to ensure consistent alignment with other page elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: aabe2db1-f078-4501-aab5-be145ebc6b9a Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/aabe2db1-f078-4501-aab5-be145ebc6b9a/TqVS1Ec
This commit is contained in:
kimjaehyeon0101
8
.replit
8
.replit
@ -18,6 +18,10 @@ externalPort = 80
|
|||||||
localPort = 34047
|
localPort = 34047
|
||||||
externalPort = 3002
|
externalPort = 3002
|
||||||
|
|
||||||
|
[[ports]]
|
||||||
|
localPort = 36309
|
||||||
|
externalPort = 5173
|
||||||
|
|
||||||
[[ports]]
|
[[ports]]
|
||||||
localPort = 37531
|
localPort = 37531
|
||||||
externalPort = 3001
|
externalPort = 3001
|
||||||
@ -26,6 +30,10 @@ externalPort = 3001
|
|||||||
localPort = 38387
|
localPort = 38387
|
||||||
externalPort = 3003
|
externalPort = 3003
|
||||||
|
|
||||||
|
[[ports]]
|
||||||
|
localPort = 41465
|
||||||
|
externalPort = 5000
|
||||||
|
|
||||||
[[ports]]
|
[[ports]]
|
||||||
localPort = 43349
|
localPort = 43349
|
||||||
externalPort = 3000
|
externalPort = 3000
|
||||||
|
|||||||
@ -409,106 +409,108 @@ export default function Auctions() {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main className="flex-1 px-6 py-3 pb-32 w-full">
|
<main className="flex-1 w-full">
|
||||||
{/* Auction Explanation */}
|
<div className="max-w-7xl mx-auto px-4 py-3 pb-32">
|
||||||
<div className="mb-4">
|
{/* Auction Explanation */}
|
||||||
<Card>
|
<div className="mb-4">
|
||||||
<CardContent className="p-3">
|
<Card>
|
||||||
<h3 className="font-semibold mb-2 text-sm">How Auctions Work</h3>
|
<CardContent className="p-3">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
|
<h3 className="font-semibold mb-2 text-sm">How Auctions Work</h3>
|
||||||
<div>
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
|
||||||
<h4 className="font-medium mb-1">Bid Amount</h4>
|
<div>
|
||||||
<p className="text-gray-600">Your maximum willingness to pay for editorial control</p>
|
<h4 className="font-medium mb-1">Bid Amount</h4>
|
||||||
</div>
|
<p className="text-gray-600">Your maximum willingness to pay for editorial control</p>
|
||||||
<div>
|
|
||||||
<h4 className="font-medium mb-1">Quality Score</h4>
|
|
||||||
<p className="text-gray-600">Platform assessment of your content quality and engagement</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 className="font-medium mb-1">Final Ranking</h4>
|
|
||||||
<p className="text-gray-600">Combination of bid amount and quality score</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Auctions Grid */}
|
|
||||||
{auctionsLoading ? (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{Array.from({ length: 6 }).map((_, i) => (
|
|
||||||
<Card key={i}>
|
|
||||||
<CardContent className="p-6 animate-pulse">
|
|
||||||
<div className="h-20 bg-muted rounded mb-4"></div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="h-4 bg-muted rounded"></div>
|
|
||||||
<div className="h-4 bg-muted rounded"></div>
|
|
||||||
<div className="h-4 bg-muted rounded"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="h-10 bg-muted rounded mt-4"></div>
|
<div>
|
||||||
</CardContent>
|
<h4 className="font-medium mb-1">Quality Score</h4>
|
||||||
</Card>
|
<p className="text-gray-600">Platform assessment of your content quality and engagement</p>
|
||||||
))}
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-medium mb-1">Final Ranking</h4>
|
||||||
|
<p className="text-gray-600">Combination of bid amount and quality score</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
) : auctions.length === 0 ? (
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-12 text-center">
|
|
||||||
<i className="fas fa-gavel text-4xl text-muted-foreground mb-4"></i>
|
|
||||||
<h3 className="text-xl font-semibold mb-2">No Active Auctions</h3>
|
|
||||||
<p className="text-muted-foreground">
|
|
||||||
There are currently no active media outlet auctions. Check back later for new opportunities!
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{auctions.map((auction) => {
|
|
||||||
const status = getStatusBadge(auction);
|
|
||||||
return (
|
|
||||||
<Card key={auction.id} data-testid={`card-auction-${auction.id}`}>
|
|
||||||
<CardContent className="p-6">
|
|
||||||
<div className="flex items-start justify-between mb-4">
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-lg line-clamp-1">{getMediaOutletName(auction.mediaOutletId)}</h3>
|
|
||||||
</div>
|
|
||||||
<Badge variant={status.variant}>{status.text}</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3 mb-4">
|
{/* Auctions Grid */}
|
||||||
<div className="flex justify-between">
|
{auctionsLoading ? (
|
||||||
<span className="text-sm text-muted-foreground">Current Bid:</span>
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
<span className="font-semibold">{formatPrice(auction.currentBid || "0")}</span>
|
{Array.from({ length: 6 }).map((_, i) => (
|
||||||
</div>
|
<Card key={i}>
|
||||||
<div className="flex justify-between">
|
<CardContent className="p-6 animate-pulse">
|
||||||
<span className="text-sm text-muted-foreground">Quality Score:</span>
|
<div className="h-20 bg-muted rounded mb-4"></div>
|
||||||
<span className="font-semibold text-gray-900">{auction.qualityScore || 0}/100</span>
|
<div className="space-y-3">
|
||||||
</div>
|
<div className="h-4 bg-muted rounded"></div>
|
||||||
<div className="flex justify-between">
|
<div className="h-4 bg-muted rounded"></div>
|
||||||
<span className="text-sm text-muted-foreground">Duration:</span>
|
<div className="h-4 bg-muted rounded"></div>
|
||||||
<span className="font-semibold">{auction.duration || 30} days</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-sm text-muted-foreground">Time Remaining:</span>
|
|
||||||
<span className={`font-semibold ${status.variant === 'destructive' ? 'text-destructive' : ''}`}>
|
|
||||||
{getTimeRemaining(auction.endDate)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="h-10 bg-muted rounded mt-4"></div>
|
||||||
<Button
|
|
||||||
className="w-full bg-gray-600 hover:bg-gray-700 text-white"
|
|
||||||
onClick={() => handleBidClick(auction)}
|
|
||||||
disabled={getTimeRemaining(auction.endDate) === "Ended"}
|
|
||||||
data-testid={`button-bid-${auction.id}`}
|
|
||||||
>
|
|
||||||
{getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
))}
|
||||||
})}
|
</div>
|
||||||
</div>
|
) : auctions.length === 0 ? (
|
||||||
)}
|
<Card>
|
||||||
|
<CardContent className="p-12 text-center">
|
||||||
|
<i className="fas fa-gavel text-4xl text-muted-foreground mb-4"></i>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">No Active Auctions</h3>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
There are currently no active media outlet auctions. Check back later for new opportunities!
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{auctions.map((auction) => {
|
||||||
|
const status = getStatusBadge(auction);
|
||||||
|
return (
|
||||||
|
<Card key={auction.id} data-testid={`card-auction-${auction.id}`}>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg line-clamp-1">{getMediaOutletName(auction.mediaOutletId)}</h3>
|
||||||
|
</div>
|
||||||
|
<Badge variant={status.variant}>{status.text}</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3 mb-4">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm text-muted-foreground">Current Bid:</span>
|
||||||
|
<span className="font-semibold">{formatPrice(auction.currentBid || "0")}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm text-muted-foreground">Quality Score:</span>
|
||||||
|
<span className="font-semibold text-gray-900">{auction.qualityScore || 0}/100</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm text-muted-foreground">Duration:</span>
|
||||||
|
<span className="font-semibold">{auction.duration || 30} days</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm text-muted-foreground">Time Remaining:</span>
|
||||||
|
<span className={`font-semibold ${status.variant === 'destructive' ? 'text-destructive' : ''}`}>
|
||||||
|
{getTimeRemaining(auction.endDate)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
className="w-full bg-gray-600 hover:bg-gray-700 text-white"
|
||||||
|
onClick={() => handleBidClick(auction)}
|
||||||
|
disabled={getTimeRemaining(auction.endDate) === "Ended"}
|
||||||
|
data-testid={`button-bid-${auction.id}`}
|
||||||
|
>
|
||||||
|
{getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* Bid Modal */}
|
{/* Bid Modal */}
|
||||||
|
|||||||
Reference in New Issue
Block a user