Behrad/aramesh-backend
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(projects): فلش پیمایش به بیرون کادر روی لبهٔ بیرونی منتقل شد (آینهٔ هم، متن داخل کادر راست‌چین)

Browse Source
This commit is contained in:
aramesh-site deploy
2026-10-09 19:31:56 +00:00
parent c1d7f61a45
commit dfbb61f75f
1 changed files with 34 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/ProjectDetail.tsx
+20 -8
View File
@@ -236,35 +236,47 @@ export function ProjectDetail() {
> >
<div className="mx-auto flex max-w-site items-stretch justify-between gap-3 px-6 lg:px-10"> <div className="mx-auto flex max-w-site items-stretch justify-between gap-3 px-6 lg:px-10">
{prevProject ? ( {prevProject ? (
<div className="flex min-w-0 flex-1 items-center gap-3 md:max-w-[46%]">
{/* فلش بیرون کادر، روی لبهٔ بیرونی */}
<ArrowLeftIcon
className="h-5 w-5 shrink-0 -scale-x-100 text-copper transition-transform duration-300 group-hover/prev:-translate-x-0.5"
aria-hidden="true"
/>
<Link <Link
to={href(`/projects/${prevProject.slug}`)} to={href(`/projects/${prevProject.slug}`)}
className="group flex min-w-0 flex-1 items-center gap-3 rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:max-w-[46%] md:px-6 md:py-5" className="group/prev flex min-w-0 flex-1 items-center justify-end rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:px-6 md:py-5"
> >
<span className="flex min-w-0 flex-col text-start"> <span className="flex min-w-0 flex-col text-end">
<span className="text-[11px] font-light text-ivory/50">{t('prevProject')}</span> <span className="text-[11px] font-light text-ivory/50">{t('prevProject')}</span>
<span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover:text-copper md:text-base"> <span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover/prev:text-copper md:text-base">
{prevProject.title} {prevProject.title}
</span> </span>
</span> </span>
<ArrowLeftIcon className="h-4 w-4 shrink-0 -scale-x-100 text-copper" aria-hidden="true" />
</Link> </Link>
</div>
) : ( ) : (
<span className="flex-1" aria-hidden="true" /> <span className="flex-1" aria-hidden="true" />
)} )}
{nextProject && ( {nextProject && (
<div className="flex min-w-0 flex-1 items-center gap-3 md:max-w-[46%]">
<Link <Link
to={href(`/projects/${nextProject.slug}`)} to={href(`/projects/${nextProject.slug}`)}
className="group flex min-w-0 flex-1 items-center justify-end gap-3 rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 text-end transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:max-w-[46%] md:px-6 md:py-5" className="group/next flex min-w-0 flex-1 items-center justify-start rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:px-6 md:py-5"
> >
<ArrowLeftIcon className="h-4 w-4 shrink-0 text-copper" aria-hidden="true" /> <span className="flex min-w-0 flex-col text-start">
<span className="flex min-w-0 flex-col text-end">
<span className="text-[11px] font-light text-ivory/50">{t('nextProject')}</span> <span className="text-[11px] font-light text-ivory/50">{t('nextProject')}</span>
<span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover:text-copper md:text-base"> <span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover/next:text-copper md:text-base">
{nextProject.title} {nextProject.title}
</span> </span>
</span> </span>
</Link> </Link>
{/* فلش بیرون کادر، روی لبهٔ بیرونی */}
<ArrowLeftIcon
className="h-5 w-5 shrink-0 text-copper transition-transform duration-300 group-hover/next:translate-x-0.5"
aria-hidden="true"
/>
</div>
)} )}
</div> </div>
</nav> </nav>