From 4b28b353ee149cf854243adc4a04383bb6dbfd3e Mon Sep 17 00:00:00 2001 From: bilalgursen Date: Thu, 24 Sep 2026 14:03:28 +0300 Subject: [PATCH] =?UTF-8?q?feat(tasarim):=20katalog=20=C3=BCst=C3=BC=20kay?= =?UTF-8?q?=C4=B1tl=C4=B1-s=C4=B1ra=20sat=C4=B1r=C4=B1=20ve=20"listen=20ha?= =?UTF-8?q?z=C4=B1r"=20paneli=20piksel=20dokulu=20CTA=20band=C4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CtaSiraForm kompakt: kayıtlı sıralamalı hâl CtaBandi kompakt kabuğuyla birebir (bg-primary, beyaz yazı, PikselZemin); form hâli beyaz kalır. İç boşluk ve saydam kenarlıkla iki hâlin kutusu aynı (CLS yok); telefondaki süs piksel ayracı kaldırıldı. - /sonuc "24 tercihlik listen hazır": beyaz kart yerine CtaBandi (seed 23), buton sonda ArrowRight, telefonda tam genişlik. - DESIGN.md §10.8: CtaBandi kullanım yerleri ve "piksel konmaz" listesi güncellendi. Co-Authored-By: Claude Fable 5.1 --- docs/tasarim/DESIGN.md | 17 +++++++++++----- .../sihirbaz/components/cta-sira-form.tsx | 20 ++++++++++++------- .../components/sihirbaz-cagri-karti.tsx | 18 +++++++++++------ 3 files changed, 37 insertions(+), 18 deletions(-) diff --git a/docs/tasarim/DESIGN.md b/docs/tasarim/DESIGN.md index a467ff8..732c236 100644 --- a/docs/tasarim/DESIGN.md +++ b/docs/tasarim/DESIGN.md @@ -700,17 +700,24 @@ karar. yan yana, buton sağda. - Büyük (sayfa kapanışı) hâlinde aynı band ortalı ve iri: `px-5 py-8 text-center sm:p-12`, `-inset-y-10`, h2 `font-heading text-2xl font-bold sm:text-3xl`, paragraf `text-white/90`. -- Kullanıldığı yerler: `/sonuc`'taki iki sihirbaz paneli, katalog altındaki `CtaSiraForm` - kart varyantı, "Kendi Listem" çekmecesinin altı (kompakt). Aynı sayfadaki iki band farklı - `seed` alır. +- Kullanıldığı yerler: `/sonuc`'taki üç panel (sihirbaz, giriş bekleyen, "24 tercihlik listen + hazır"), katalog altındaki `CtaSiraForm` + kart varyantı, "Kendi Listem" çekmecesinin altı (kompakt), katalog üstü kompakt satırın + **kayıtlı sıralamalı** hâli ("Sıralaman … tabanlarının neresinde? · Sıralaman kayıtlı: …"; + Bilal, 24 Eyl 2026: "bu kısma piksel dokusu ekle"). O satır CLS için tek `section` içinde + iki hâl taşıdığından `CtaBandi`'yi sarmaz; kompakt bandın sınıf setini birebir alır + (`relative isolate overflow-hidden rounded-2xl bg-primary px-5 py-4 text-left text-white + sm:py-5` + ilk çocuk `PikselZemin`), kenarlık saydam kalır ki iki hâlin kutusu aynı olsun. + Aynı sayfadaki iki band farklı `seed` alır. **Piksel zemin yalnız CTA yüzeylerinde — `PikselZemin`, `src/components/piksel-zemin.tsx`** (Bilal, 24 Eyl 2026: önce "her CTA benzeri kısmın arkasında olmalı", sonra "/sonuc'taki kartın arkasına da piksel koymuşsun; pikseller CTA'larda olacak sadece"). CTA yüzeyi = renkli zeminli çağrı yüzeyi: mavi `CtaBandi`, koyu kapanış kartı `PikselCtaYuzeyi`, arama penceresindeki koyu kart. Beyaz içerik kartlarına (tadımlık, `/listem` üretim/kilit kartları, paket kartı, kaydet -bandı, katalog üstü kompakt satır, boş durumlar, sıralama-yok sayfası) **konmaz** — 24 Eyl'de -denendi ve geri alındı. Kap `relative isolate overflow-hidden`; zemin ilk çocuk; kareler beyaz. +bandı, katalog üstü kompakt satırın **form** hâli, boş durumlar, sıralama-yok sayfası) +**konmaz** — 24 Eyl'de denendi ve geri alındı. Aynı kompakt satırın kayıtlı sıralamalı hâli +ise formsuz tek butonlu bir çağrı olduğundan mavi banttır ve dokuyu alır (yukarıda). Kap `relative isolate overflow-hidden`; zemin ilk çocuk; kareler beyaz. Doku kabın gerçek ölçüsüne göre üretilir: yalnız kenar çerçevesinde (kısa kenarın %30'u), orta tamamen boş; **küçük kare yok**, 2–4 hücrelik (17/27/37 px) kareler, iri olan seyrek ve daha silik (Bilal: "çok fazla piksel, küçük olanlar hiç olmasın"). diff --git a/src/features/sihirbaz/components/cta-sira-form.tsx b/src/features/sihirbaz/components/cta-sira-form.tsx index aedaa2f..b854bb9 100644 --- a/src/features/sihirbaz/components/cta-sira-form.tsx +++ b/src/features/sihirbaz/components/cta-sira-form.tsx @@ -13,7 +13,7 @@ import { DrawerDescription, DrawerTitle, } from "@/components/ui/drawer"; -import { PagePixelDivider } from "@/components/pixel-decor"; +import { PikselZemin } from "@/components/piksel-zemin"; import { useGorunumOlayi } from "@/components/use-gorunum-olayi"; import { SihirbazAdimlarLazy, @@ -39,7 +39,7 @@ const PUAN_TURLERI_SECENEK = [ ] as const; // Kayıtlı profilli CTA'lar /listem boş durumunun dilini taşır (bkz. -// listem-bos-cta.tsx): büyük turuncu buton, piksel ayraç. Sınıf seti tek yerde. +// listem-bos-cta.tsx): büyük turuncu buton. Sınıf seti tek yerde. const PROFILLI_CTA_SINIF = "h-12 cursor-pointer bg-orange-500 px-6 text-white transition-colors duration-200 hover:bg-orange-600"; @@ -369,14 +369,21 @@ export function CtaSiraForm({ // bindirilir; hücrenin yüksekliğini her iki durumda da başlık + form belirler. // Profilli içerik bu yüksekliği aşmayacak kadar kısa tutulmalı. const kompaktBaslik = baslik ?? "Sıralaman bu tabanların neresinde?"; + // Profilli hâl bir CTA yüzeyidir (tek iş: turuncu buton): CtaBandi'nin + // kompakt bandıyla birebir aynı kabuk — mavi zemin, beyaz yazı, arkada + // PikselZemin (DESIGN.md §10.8; piksel yalnız CTA yüzeylerinde). Profilsiz + // form satırı beyaz içerik kartıdır, piksel almaz. İç boşluk ve 1 px + // kenarlık (profilli hâlde saydam) iki hâlde aynıdır ki hydration sonrası + // geçişte satır yüksekliği oynamasın. return (
+ {profil ? : null}

{kompaktBaslik}

- +
- -
+ ) : girisBekliyor ? (