elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Zentriere Genre-Navigation in der oberen Navigation

Browse Source 
- Vereinfache Flexbox-Struktur für bessere Zentrierung
- LanguageSwitcher bleibt absolut positioniert rechts oben
- Entferne verschachtelte Container die Zentrierung störten
This commit is contained in:
Hördle Bot
2025-12-01 17:31:55 +01:00
parent 68c8f9a05a
commit 69f69cf172
1 changed files with 55 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/[locale]/page.tsx
View File

@@ -46,65 +46,69 @@ export default async function Home({
return ( return (
<> <>
<div id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6', position: 'relative' }}> <div id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6', position: 'relative' }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: '0.5rem', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}> {/* Language Switcher - rechts oben */}
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}> <div style={{ position: 'absolute', top: '1rem', right: '1rem', zIndex: 10 }}>
<div className="tooltip"> <LanguageSwitcher />
<Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>{tNav('global')}</Link> </div>
<span className="tooltip-text">{t('globalTooltip')}</span>
</div> {/* Zentrierte Navigation */}
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center', marginBottom: '0.5rem' }}>
<div className="tooltip">
<Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>{tNav('global')}</Link>
<span className="tooltip-text">{t('globalTooltip')}</span>
</div>
{/* Genres */} {/* Genres */}
{genres.map(g => { {genres.map(g => {
const name = getLocalizedValue(g.name, locale); const name = getLocalizedValue(g.name, locale);
const subtitle = getLocalizedValue(g.subtitle, locale); const subtitle = getLocalizedValue(g.subtitle, locale);
return ( return (
<div key={g.id} className="tooltip"> <div key={g.id} className="tooltip">
<Link href={`/${name}`} style={{ color: '#4b5563', textDecoration: 'none' }}> <Link href={`/${name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
{name} {name}
</Link>
{subtitle && <span className="tooltip-text">{subtitle}</span>}
</div>
);
})}
{/* Separator if both exist */}
{genres.length > 0 && activeSpecials.length > 0 && (
<span style={{ color: '#d1d5db' }}>|</span>
)}
{/* Active Specials */}
{activeSpecials.map(s => {
const name = getLocalizedValue(s.name, locale);
const subtitle = getLocalizedValue(s.subtitle, locale);
return (
<div key={s.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div className="tooltip">
<Link
href={`/special/${name}`}
style={{
color: '#be185d', // Pink-700
textDecoration: 'none',
fontWeight: '500'
}}
>
★ {name}
</Link> </Link>
{subtitle && <span className="tooltip-text">{subtitle}</span>} {subtitle && <span className="tooltip-text">{subtitle}</span>}
</div> </div>
); {s.curator && (
})} <span style={{ fontSize: '0.75rem', color: '#666' }}>
{t('curatedBy')} {s.curator}
{/* Separator if both exist */} </span>
{genres.length > 0 && activeSpecials.length > 0 && ( )}
<span style={{ color: '#d1d5db' }}>|</span> </div>
)} );
})}
{/* Active Specials */}
{activeSpecials.map(s => {
const name = getLocalizedValue(s.name, locale);
const subtitle = getLocalizedValue(s.subtitle, locale);
return (
<div key={s.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div className="tooltip">
<Link
href={`/special/${name}`}
style={{
color: '#be185d', // Pink-700
textDecoration: 'none',
fontWeight: '500'
}}
>
★ {name}
</Link>
{subtitle && <span className="tooltip-text">{subtitle}</span>}
</div>
{s.curator && (
<span style={{ fontSize: '0.75rem', color: '#666' }}>
{t('curatedBy')} {s.curator}
</span>
)}
</div>
);
})}
</div>
</div> </div>
{/* Upcoming Specials */} {/* Upcoming Specials */}
{upcomingSpecials.length > 0 && ( {upcomingSpecials.length > 0 && (
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}> <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666', textAlign: 'center' }}>
{t('comingSoon')}: {upcomingSpecials.map(s => { {t('comingSoon')}: {upcomingSpecials.map(s => {
const name = getLocalizedValue(s.name, locale); const name = getLocalizedValue(s.name, locale);
return ( return (
@@ -121,11 +125,6 @@ export default async function Home({
})} })}
</div> </div>
)} )}
{/* Language Switcher - rechts oben */}
<div style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
<LanguageSwitcher />
</div>
</div> </div>
<div id="tour-news"> <div id="tour-news">