Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine page transitions and remove redundant fade-ins

Browse Source
This commit is contained in:
ralksta
2026-03-07 09:06:12 +01:00
parent cf5860563e
commit b3f575fe6b
2 changed files with 58 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/impressum/page.tsx
View File

@@ -7,7 +7,6 @@ import { Metadata } from 'next';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { getConfig } from '@/lib/config'; import { getConfig } from '@/lib/config';
import { BackLink } from '@/components/BackLink'; import { BackLink } from '@/components/BackLink';
import { FadeIn } from '@/components/FadeIn';
import './impressum.css'; import './impressum.css';
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -26,72 +25,68 @@ export default function ImpressumPage() {
<div className="subpage-container"> <div className="subpage-container">
<header className="subpage-header"> <header className="subpage-header">
<BackLink href="/" label="Home" /> <BackLink href="/" label="Home" />
<FadeIn> <h1 className="subpage-title">Impressum</h1>
<h1 className="subpage-title">Impressum</h1> <p className="subpage-subtitle">Angaben gemäß § 5 TMG</p>
<p className="subpage-subtitle">Angaben gemäß § 5 TMG</p>
</FadeIn>
</header> </header>
<main className="subpage-content" style={{ maxWidth: '600px', margin: '0 auto' }}> <main className="subpage-content" style={{ maxWidth: '600px', margin: '0 auto' }}>
<FadeIn delay={0.1}> <section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Anschrift</h2>
<p style={{ lineHeight: 1.6 }}>
{legal.name}
<br />
{legal.address}
<br />
{legal.zipCity}
<br />
{legal.country}
</p>
</section>
{(legal.email || legal.phone) && (
<section style={{ marginBottom: '2rem' }}> <section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Anschrift</h2> <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Kontakt</h2>
<p style={{ lineHeight: 1.6 }}> <p style={{ lineHeight: 1.6 }}>
{legal.name} {legal.email && (
<br /> <>
{legal.address} E-Mail: {legal.email}
<br /> <br />
{legal.zipCity} </>
<br /> )}
{legal.country} {legal.phone && <>Telefon: {legal.phone}</>}
</p> </p>
</section> </section>
)}
{(legal.email || legal.phone) && ( {(legal.taxId || legal.vatId) && (
<section style={{ marginBottom: '2rem' }}> <section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Kontakt</h2> <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
<p style={{ lineHeight: 1.6 }}> Steuernummer
{legal.email && ( </h2>
<> <p style={{ lineHeight: 1.6 }}>
E-Mail: {legal.email} {legal.taxId && (
<br /> <>
</> Steuernummer: {legal.taxId}
)} <br />
{legal.phone && <>Telefon: {legal.phone}</>} </>
</p> )}
</section> {legal.vatId && <>Umsatzsteuer-ID: {legal.vatId}</>}
)} </p>
{(legal.taxId || legal.vatId) && (
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
Steuernummer
</h2>
<p style={{ lineHeight: 1.6 }}>
{legal.taxId && (
<>
Steuernummer: {legal.taxId}
<br />
</>
)}
{legal.vatId && <>Umsatzsteuer-ID: {legal.vatId}</>}
</p>
</section>
)}
{legal.extraInfo && (
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
Weitere Informationen
</h2>
<p style={{ lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{legal.extraInfo}</p>
</section>
)}
<section style={{ marginTop: '4rem', fontSize: '0.85rem', opacity: 0.6 }}>
<p>Quelle: Erstellt mit dem Impressum-Generator von eRecht24.</p>
</section> </section>
</FadeIn> )}
{legal.extraInfo && (
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
Weitere Informationen
</h2>
<p style={{ lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{legal.extraInfo}</p>
</section>
)}
<section style={{ marginTop: '4rem', fontSize: '0.85rem', opacity: 0.6 }}>
<p>Quelle: Erstellt mit dem Impressum-Generator von eRecht24.</p>
</section>
</main> </main>
</div> </div>
); );

10
components/PageTransition.tsx
View File

@@ -24,12 +24,12 @@ export function PageTransition({ children, enabled }: PageTransitionProps) {
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<motion.div <motion.div
key={pathname} key={pathname}
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1 }}
exit={{ opacity: 0, y: -10 }} exit={{ opacity: 0 }}
transition={{ transition={{
duration: 0.4, duration: 0.3,
ease: [0.22, 1, 0.36, 1], // Custom "silk-smooth" cubic bezier ease: 'easeInOut',
}} }}
> >
{children} {children}