Michael/podcastic
1
0 Fork 0
mirror of https://github.com/R0m1k3/podcastic.git synced 2026-10-11 17:26:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: fonds modals/panneau dashboard illisibles + clignotement mini-player + ombres cartes + avatar

Browse Source 
- Ajout des variables CSS manquantes (--bg-primary, --bg-secondary, --radius-panel/--radius-card)
- Ajout des classes manquantes (premium-glass, neon-button, input-premium, shadow-glow-indigo, animate-aura)
- Fond du panneau latéral dashboard passé à --bg-elevated pour le décrocher du fond de page
- Fond solide sur le mini-player flottant + correction clignotement IntersectionObserver
- Ombres des cartes renforcées (shadow-card/shadow-card-hover)
- Contour de l'avatar profil amélioré (dégradé plus épais + glow + lettre en gradient)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 4.7 committed 2026-04-28 23:14:41 +02:00
1 parent a49e9f04d8
commit 550bf81381
8 files changed
+6298 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.claude/settings.json
+3
View File
@@ -3,5 +3,8 @@
"allow": [
"Bash(rtk tsc *)"
]
},
"enabledPlugins": {
"frontend-design@claude-plugins-official": true
}
}
.claude/settings.local.json
+3 -1
View File
@@ -12,7 +12,9 @@
"Bash(npx tsc *)",
"Bash(git add *)",
"Bash(git pull *)",
"Bash(git stash *)"
"Bash(git stash *)",
"Bash(git fetch *)",
"Bash(rtk npx *)"
]
}
}
frontend/package-lock.json
Generated
+6191
View File
File diff suppressed because it is too large. Load diff
frontend/src/components/AudioPlayer.tsx
+11 -4
View File
@@ -30,16 +30,23 @@ export default function AudioPlayer({ episode, onClose, userId, mode = 'floating
useEffect(() => { setUserId(userId ?? null); }, [userId, setUserId]);
// IntersectionObserver with debounce to prevent flicker
// IntersectionObserver with debounce + hysteresis to prevent flicker
const miniTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
const miniVisibleSince = useRef<number>(0);
useEffect(() => {
if (mode !== 'inline' || !inlineRef.current) return;
const obs = new IntersectionObserver(
([entry]) => {
if (miniTimer.current) clearTimeout(miniTimer.current);
const delay = entry.isIntersecting ? 400 : 150;
miniTimer.current = setTimeout(() => {
setShowMiniBar(!entry.isIntersecting);
}, 250);
if (!entry.isIntersecting) {
miniVisibleSince.current = Date.now();
setShowMiniBar(true);
} else if (Date.now() - miniVisibleSince.current > 800) {
setShowMiniBar(false);
}
}, delay);
},
{ threshold: 0.1, rootMargin: '-80px 0px 0px 0px' }
);
@@ -72,7 +79,7 @@ export default function AudioPlayer({ episode, onClose, userId, mode = 'floating
<div className={`fixed z-[90] mx-auto animate-slide-up max-w-5xl ${fullWidth
? 'bottom-6 left-4 right-4 sm:left-6 sm:right-6 lg:left-auto lg:right-8 lg:bottom-8 lg:w-[calc(100%-22rem)] xl:w-[calc(100%-24rem)]'
: 'bottom-6 left-4 right-4 sm:left-6 sm:right-6'}`}>
<div className="glass rounded-[var(--radius-lg)] shadow-2xl overflow-hidden">
<div className="bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-[var(--radius-lg)] shadow-2xl overflow-hidden">
<div className="flex items-center gap-3 px-4 h-[68px]">
<div className="w-10 h-10 rounded-lg overflow-hidden border border-[var(--border-color)] shrink-0 shadow-md">
{(episode.imageUrl || podcast?.imageUrl)
frontend/src/components/EpisodeDetails.tsx
+2 -2
View File
@@ -29,7 +29,7 @@ export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: Epi
/>
{/* Slide-over Panel */}
<div className={`fixed top-0 right-0 bottom-0 w-full max-w-2xl bg-[var(--bg-primary)] z-[120] shadow-2xl transform transition-transform duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] overflow-y-auto ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
<div className={`fixed top-0 right-0 bottom-0 w-full max-w-2xl bg-[var(--bg-elevated)] z-[120] shadow-2xl transform transition-transform duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] overflow-y-auto ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
{/* Header Image Area */}
<div className="relative h-80 w-full overflow-hidden">
@@ -42,7 +42,7 @@ export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: Epi
) : (
<div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)]" />
)}
<div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-[var(--bg-primary)]/40 to-transparent" />
<div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-elevated)] via-[var(--bg-elevated)]/40 to-transparent" />
<button
onClick={onClose}
frontend/src/components/Header.tsx
+3 -3
View File
@@ -42,12 +42,12 @@ export default function Header({ title, subtitle, user, onLogout }: HeaderProps)
<p className="text-[0.6rem] text-[var(--text-muted)] font-semibold uppercase tracking-widest">Membre</p>
</div>
<div className="relative group">
<div className="w-11 h-11 rounded-xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] p-[2px]">
<div className="w-full h-full rounded-[10px] bg-[var(--bg-base)] flex items-center justify-center overflow-hidden">
<div className="w-11 h-11 rounded-xl bg-gradient-to-br from-[var(--accent-primary)] via-[var(--accent-secondary)] to-[var(--accent-primary)] p-[3px] shadow-[0_0_12px_var(--accent-glow)]">
<div className="w-full h-full rounded-[9px] bg-[var(--bg-elevated)] flex items-center justify-center overflow-hidden">
{user.avatar ? (
<img src={user.avatar} alt="" className="w-full h-full object-cover" />
) : (
<span className="text-base font-bold text-[var(--accent-primary)]">
<span className="text-sm font-black bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] bg-clip-text text-transparent">
{user.username.charAt(0).toUpperCase()}
</span>
)}
frontend/src/pages/Login.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export default function Login() {
</div>
{error && (
<div className="p-4 rounded-2xl bg-accent-rose/10 border border-accent-rose/20 text-accent-rose text-[10px] font-black uppercase tracking-widest text-center animate-pulse">
<div className="p-4 rounded-2xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-[10px] font-black uppercase tracking-widest text-center">
⚠️ {error}
</div>
)}
frontend/src/styles/globals.css
+84 -4
View File
@@ -22,15 +22,19 @@
--accent-gold: #f7b80a;
--accent-emerald: #12c278;
--accent-glow: rgba(108, 111, 247, 0.28);
--bg-primary: #010615;
--bg-secondary: #0b0f20;
--border-color: rgba(255, 255, 255, 0.07);
--border-hover: rgba(255, 255, 255, 0.14);
--radius-sm: 0.625rem;
--radius-md: 0.875rem;
--radius-lg: 1.125rem;
--radius-xl: 1.5rem;
--radius-panel: 1.5rem;
--radius-card: 1.125rem;
--glass-blur: blur(28px) saturate(180%);
--shadow-card: 0 2px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
--shadow-card-hover: 0 10px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
--shadow-card-hover: 0 12px 48px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
--shadow-glow: 0 0 28px var(--accent-glow);
--font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Outfit', ui-sans-serif, system-ui, sans-serif;
@@ -53,11 +57,13 @@
--accent-gold: #b8960c;
--accent-emerald: #059669;
--accent-glow: rgba(91, 95, 199, 0.15);
--bg-primary: #f8f5f0;
--bg-secondary: #f0ece6;
--border-color: rgba(0, 0, 0, 0.06);
--border-hover: rgba(0, 0, 0, 0.12);
--glass-blur: blur(20px) saturate(150%);
--shadow-card: 0 1px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
--shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
--shadow-card: 0 2px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
--shadow-glow: 0 0 20px var(--accent-glow);
}
}
@@ -158,6 +164,74 @@ p { margin: 0; }
transition: background var(--transition-slow), border-color var(--transition-base), box-shadow var(--transition-base);
}
/* Premium glass — more opaque for modals & panels */
.premium-glass {
background: var(--bg-surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-card-hover);
}
/* Indigo glow shadow */
.shadow-glow-indigo {
box-shadow: 0 0 28px var(--accent-glow);
}
/* Neon button — primary CTA with full glow treatment */
.neon-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
color: #fff;
font-family: var(--font-body);
font-weight: 800;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
box-shadow: 0 0 28px var(--accent-glow);
transition: transform var(--transition-base), filter var(--transition-base), box-shadow var(--transition-base);
user-select: none;
}
.neon-button:hover {
transform: translateY(-1px);
filter: brightness(1.15);
box-shadow: 0 0 36px var(--accent-glow);
}
.neon-button:active { transform: scale(0.97); }
.neon-button:disabled {
opacity: 0.5;
transform: none;
cursor: not-allowed;
filter: none;
}
/* Premium input — elevated input variant */
.input-premium {
width: 100%;
padding: 0.875rem 1.125rem;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.9375rem;
outline: none;
transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.input-premium::placeholder { color: var(--text-muted); }
.input-premium:focus {
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--accent-glow);
background: var(--bg-surface);
}
/* Elevated card */
.card {
background: var(--bg-surface);
@@ -343,6 +417,11 @@ p { margin: 0; }
to { transform: rotate(360deg); }
}
@keyframes aura {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
/* Animation utility classes */
.animate-fade-in { animation: fade-in 0.3s ease both; }
.animate-slide-up { animation: slide-up 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@@ -351,6 +430,7 @@ p { margin: 0; }
.animate-scale-in { animation: scale-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 12s linear infinite; }
.animate-aura { animation: aura 3s ease-in-out infinite; }
/* Shimmer skeleton */
.skeleton {