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

refactor: update layout and styling for upcoming specials and language switcher

Browse Source 
- Adjusted the layout of the upcoming specials section for improved readability and alignment.
- Enhanced the styling of the language switcher for better visibility and accessibility.
- Simplified the structure of the tour genres section to improve overall user experience.
This commit is contained in:
Hördle Bot
2025-12-01 17:15:03 +01:00
parent 317eed5ea6
commit 2b8733dea0
1 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,10 +45,9 @@ export default async function Home({
return (
<>
<div id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}>
<div style={{ flex: 1 }} />
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center', flex: 2 }}>
<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' }}>
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
<div className="tooltip">
<Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>{tNav('global')}</Link>
<span className="tooltip-text">{t('globalTooltip')}</span>
@@ -101,28 +100,30 @@ export default async function Home({
);
})}
</div>
{/* Upcoming Specials */}
{upcomingSpecials.length > 0 && (
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
{t('comingSoon')}: {upcomingSpecials.map(s => {
const name = getLocalizedValue(s.name, locale);
return (
<span key={s.id} style={{ marginLeft: '0.5rem' }}>
★ {name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString(locale, {
day: '2-digit',
month: '2-digit',
year: 'numeric',
timeZone: process.env.TZ
}) : ''})
{s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>{t('curatedBy')} {s.curator}</span>}
</span>
);
})}
</div>
)}
</div>
<div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
{/* Upcoming Specials */}
{upcomingSpecials.length > 0 && (
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}>
{t('comingSoon')}: {upcomingSpecials.map(s => {
const name = getLocalizedValue(s.name, locale);
return (
<span key={s.id} style={{ marginLeft: '0.5rem' }}>
★ {name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString(locale, {
day: '2-digit',
month: '2-digit',
year: 'numeric',
timeZone: process.env.TZ
}) : ''})
{s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>{t('curatedBy')} {s.curator}</span>}
</span>
);
})}
</div>
)}
{/* Language Switcher - rechts oben */}
<div style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
<LanguageSwitcher />
</div>
</div>