bilal/kolaytercih
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tasarim): kayıtlı-sıra satırı telefonda iki satır — başlık üstte, kupa+sayı ile ok yan yana
All checks were successful
Deploy / deploy (push) Successful in 4m53s
Details

Browse Source 
Üç satırlı blok formun yüksekliğini aşıp overflow-hidden kapta üstten
kırpılıyordu (Bilal, 24 Eyl 2026: "mobilde düzgün değil"). Telefonda başlık
text-lg, kupa kutusu ve ok 48 px; sm'den 56 px; lg'de tek satır değişmedi.
DESIGN.md §10.9 güncellendi.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-24 18:21:17 +03:00
parent 1801070de9
commit 5497810cf3
2 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/tasarim/DESIGN.md
View File

@@ -841,6 +841,8 @@ cılız kaldı, yazılı bir buton olmasın" — §4.1'in "metin + sondaki ok" k
istisnası): `flex size-14 items-center justify-center rounded-full bg-orange-500 text-white
shadow-lg shadow-orange-500/30` + `ArrowRight size-7`, hover `bg-orange-600` ve ok 2 px kayar,
basınca `scale-[0.95]`; `aria-label` + `title` "Sıralamana uygun programları gör". Bandın
tamamı gerilmiş linkle (`after:absolute after:inset-0`, §4.8) tıklanabilir. Telefonda başlık →
sayı → ok alt alta ortalı; lg'de tek satır (sayı · başlık · ok). Yükseklik her iki hâlde formu
aşmaz (CLS).
tamamı gerilmiş linkle (`after:absolute after:inset-0`, §4.8) tıklanabilir. **Telefonda iki
satır:** başlık (`text-lg`) üstte, altında kupa+sayı ile ok **yan yana** (`flex justify-center
gap-5`; kupa kutusu ve ok telefonda 48 px, sm'den 56 px); lg'de tek satır (sayı · başlık · ok).
Blok formun yüksekliğini **aşamaz** — aşarsa `overflow-hidden` kap üstten kırpar (24 Eyl 2026'da
üç satırlı ilk sürümde başlık kesildi; ölç, §9.2).

22
src/features/sihirbaz/components/cta-sira-form.tsx
View File

@@ -412,18 +412,21 @@ export function CtaSiraForm({
// kupa kutusu + text-3xl/4xl sıra, başlık text-xl/2xl. Buton yazısız:
// 56 px yuvarlak turuncu ok (Bilal, 24 Eyl 2026: "buton cılız kaldı,
// yazılı bir buton olmasın"); bandın tamamı gerilmiş linkle
// tıklanabilir (§4.8 deseni). Telefonda başlık → sayı → ok alt
// alta; lg'de tek satır. Yükseklik formunkini aşmaz (CLS notu).
<div className="col-start-1 row-start-1 flex flex-col items-center justify-center gap-4 text-center lg:flex-row lg:gap-6 lg:text-left">
// tıklanabilir (§4.8 deseni). Telefonda iki satır: başlık üstte,
// altında kupa+sayı ile ok yan yana (blok formun yüksekliğini
// aşıp üstten kırpılıyordu — Bilal, 24 Eyl 2026: "mobilde düzgün
// değil"); lg'de tek satır (sayı · başlık · ok).
<div className="col-start-1 row-start-1 flex flex-col items-center justify-center gap-3 text-center sm:gap-4 lg:flex-row lg:gap-6 lg:text-left">
<p
id={baslikId}
className="order-1 min-w-0 flex-1 font-heading text-xl font-bold leading-tight text-balance text-white sm:text-2xl lg:order-2"
className="order-1 min-w-0 font-heading text-lg font-bold leading-tight text-balance text-white sm:text-2xl lg:order-2 lg:flex-1"
>
{kompaktBaslik}
</p>
<p className="order-2 flex items-center gap-3 lg:order-1 lg:shrink-0">
<span className="flex size-14 shrink-0 items-center justify-center rounded-2xl bg-white/15">
<Trophy className="size-7 text-white" aria-hidden />
<div className="order-2 flex w-full items-center justify-center gap-5 sm:gap-8 lg:contents">
<p className="flex items-center gap-3 lg:order-1 lg:shrink-0">
<span className="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-white/15 sm:size-14">
<Trophy className="size-6 text-white sm:size-7" aria-hidden />
</span>
<span className="flex flex-col items-start text-left">
<span className="sr-only">Sıralaman kayıtlı:</span>
@@ -439,14 +442,15 @@ export function CtaSiraForm({
href={sonucHref()}
aria-label="Sıralamana uygun programları gör"
title="Sıralamana uygun programları gör"
className="group order-3 flex size-14 shrink-0 items-center justify-center rounded-full bg-orange-500 text-white shadow-lg shadow-orange-500/30 transition-[background-color,transform,box-shadow] duration-200 after:absolute after:inset-0 hover:bg-orange-600 hover:shadow-orange-500/40 active:scale-[0.95] lg:order-3"
className="group flex size-12 shrink-0 items-center justify-center rounded-full bg-orange-500 text-white shadow-lg shadow-orange-500/30 transition-[background-color,transform,box-shadow] duration-200 after:absolute after:inset-0 hover:bg-orange-600 hover:shadow-orange-500/40 active:scale-[0.95] sm:size-14 lg:order-3"
>
<ArrowRight
className="size-7 transition-transform duration-200 group-hover:translate-x-0.5"
className="size-6 transition-transform duration-200 group-hover:translate-x-0.5 sm:size-7"
aria-hidden
/>
</Link>
</div>
</div>
) : null}
</div>
{cekmece}