Saved your changes before starting work
Replit-Commit-Author: Agent Replit-Commit-Session-Id: f8b8f0ea-e52e-4118-9b6b-e44184e17203 Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
4
.replit
4
.replit
@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
|
|||||||
localPort = 5000
|
localPort = 5000
|
||||||
externalPort = 80
|
externalPort = 80
|
||||||
|
|
||||||
|
[[ports]]
|
||||||
|
localPort = 33997
|
||||||
|
externalPort = 4200
|
||||||
|
|
||||||
[[ports]]
|
[[ports]]
|
||||||
localPort = 34047
|
localPort = 34047
|
||||||
externalPort = 3002
|
externalPort = 3002
|
||||||
|
|||||||
@ -73,13 +73,14 @@ export default function MainContent() {
|
|||||||
const renderOutletCard = (outlet: MediaOutlet) => {
|
const renderOutletCard = (outlet: MediaOutlet) => {
|
||||||
const articleCount = articleCountByOutlet[outlet.id] || 0;
|
const articleCount = articleCountByOutlet[outlet.id] || 0;
|
||||||
const hasArticles = articleCount > 0;
|
const hasArticles = articleCount > 0;
|
||||||
|
const isErlingHaaland = outlet.slug === 'erling-haaland';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
key={outlet.id}
|
key={outlet.id}
|
||||||
className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${
|
className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${
|
||||||
hasArticles ? 'animate-float ring-2 ring-blue-400/30 shadow-lg' : ''
|
hasArticles ? 'animate-float ring-2 ring-blue-400/30 shadow-lg' : ''
|
||||||
}`}
|
} ${isErlingHaaland ? 'animate-shake' : ''}`}
|
||||||
data-testid={`card-outlet-${outlet.id}`}
|
data-testid={`card-outlet-${outlet.id}`}
|
||||||
>
|
>
|
||||||
{hasArticles && (
|
{hasArticles && (
|
||||||
|
|||||||
@ -137,10 +137,29 @@
|
|||||||
animation: float 3s ease-in-out infinite;
|
animation: float 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateX(0) rotate(0deg);
|
||||||
|
}
|
||||||
|
10%, 30%, 50%, 70%, 90% {
|
||||||
|
transform: translateX(-2px) rotate(-1deg);
|
||||||
|
}
|
||||||
|
20%, 40%, 60%, 80% {
|
||||||
|
transform: translateX(2px) rotate(1deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-shake {
|
||||||
|
animation: shake 0.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.animate-float {
|
.animate-float {
|
||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
|
.animate-shake {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-hover:hover {
|
.card-hover:hover {
|
||||||
|
|||||||
Reference in New Issue
Block a user