From 73943b09542e0c659cf217c31a286f7ee4afb4a9 Mon Sep 17 00:00:00 2001 From: bilalgursen Date: Thu, 24 Sep 2026 00:48:57 +0300 Subject: [PATCH] =?UTF-8?q?feat(tasarim):=20liste=20=C3=A7ekmecesi=20"?= =?UTF-8?q?=C5=9Fi=C5=9Fko=20ve=20sade"=20dile=20g=C3=B6re?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Başlık ortalı (§4.10), çarpı ve temizle düğmesi kanonik size-9 - Satırlar çerçevesiz liste satırı; ad sarar, üniversite adı ayrı satırda, risk etiketi metin + renkle adın altında, çıkar düğmesi 44 px - Alt bant telefonda alt alta: başlık üç satıra kırılıp listenin yerini yiyordu (liste 232 → 279 px, 375 px ölçümü) - 10-11 px yazılar ve mavi hover'lar kalktı; navbar sayaç rozeti 12 px Co-Authored-By: Claude Opus 5.5 --- docs/tasarim/DESIGN.md | 5 + .../liste/components/liste-cekmecesi.tsx | 193 +++++++++--------- .../liste/components/listem-butonu.tsx | 2 +- 3 files changed, 102 insertions(+), 98 deletions(-) diff --git a/docs/tasarim/DESIGN.md b/docs/tasarim/DESIGN.md index fb4a37c..e77bd02 100644 --- a/docs/tasarim/DESIGN.md +++ b/docs/tasarim/DESIGN.md @@ -275,6 +275,11 @@ açılan modal değil. Çekmece kabı ve çarpı `cta-sira-form.tsx`'teki çekme kareler kısaltılır, not kısaltılır — içerik silinmez (§9.2 ölçüm). - Sıra: gösterge kareleri → tek cümlelik not (`text-sm text-slate-500`) → ikincil buton (§4.1) → kaynaklar (logo solda, `text-xs` iki satır). +- **Liste çekmecesi** (`liste-cekmecesi.tsx`, 24 Eyl 2026): başlık aynı düzende (temizle + düğmesi çarpıyla aynı sınıf setinde solda). Satırlar çerçeveli kart değil, düz liste satırı + (`border-b border-slate-100`); ad §4.15 gibi sarar, risk + taban sıra adın altında, çıkar + düğmesi `size-11`. Listeler uzun olduğu için bu çekmece kaydırılır (tek ekran kuralının + tek istisnası); alt bandı telefonda alt alta dizilir ki listeye en az ~280 px kalsın. - **Arama motoru uyarısı:** çekmece içeriği sayfa açılırken HTML'de yoktur (kapalıyken çizilmez). Google'ın görmesi gereken metin ve **zorunlu atıflar** (ör. URAP sırası + payda + dönem + aktif bağlantı) çekmeceye taşınmaz, sayfada da görünür kalır. diff --git a/src/features/liste/components/liste-cekmecesi.tsx b/src/features/liste/components/liste-cekmecesi.tsx index adc8e96..7f22d20 100644 --- a/src/features/liste/components/liste-cekmecesi.tsx +++ b/src/features/liste/components/liste-cekmecesi.tsx @@ -43,7 +43,8 @@ import { type PanInfo, } from "motion/react"; import { RISK_ETIKET, type RiskSeviyesi } from "@/lib/risk"; -import { bolumBazAdi, turkishSlugify } from "@/lib/slug"; +import { bolumBazAdi, trBaslikDuzeni, turkishSlugify } from "@/lib/slug"; +import { SATIR_AD, SATIR_IKINCIL_LINK } from "@/components/liste-satiri"; import { olay } from "@/lib/analitik"; import { CihazCifti, IsletimSistemiLogosu } from "./cihaz-ikonlari"; import { @@ -83,6 +84,12 @@ const RISK_NOKTA: Record = { "az-riskli": "bg-amber-500", riskli: "bg-red-500", }; +// §4.5: nokta + renkli metin; renk tek başına anlam taşımaz +const RISK_METIN: Record = { + guvenli: "text-emerald-600", + "az-riskli": "text-amber-600", + riskli: "text-red-600", +}; export function ListeCekmecesi() { const router = useRouter(); @@ -123,35 +130,33 @@ export function ListeCekmecesi() { - -
- - - Kendi Listem - - {liste.length}/{MANUEL_LISTE_MAX} - - -
- {liste.length > 0 ? ( - - ) : null} - - - Kapat - -
-
+ {/* Alt sayfa başlığı (DESIGN.md §4.10): ortalı başlık + bağlam; + çarpı §4.3 kanonik sınıf setinde, temizle düğmesi aynı ölçüde + solda. */} + + {liste.length > 0 ? ( + + ) : null} + + + Kapat + + + Kendi Listem + +

+ {liste.length} / {MANUEL_LISTE_MAX} tercih +

-
    - {( - [ - ["guvenli", "yeşil güvenli"], - ["az-riskli", "turuncu az riskli"], - ["riskli", "kırmızı riskli"], - ] as const - ).map(([seviye, aciklama]) => ( -
  • - - {aciklama} -
    • - ))} -
{liste.length === 0 ? (
@@ -196,10 +181,10 @@ export function ListeCekmecesi() { strokeWidth={1.25} aria-hidden /> -

+

Henüz program seçmedin

-

+

Sonuç sayfasından program ekleyerek listeni doldurmaya başla.

@@ -228,29 +213,32 @@ export function ListeCekmecesi() { ) : null}
- + {/* C2 kalıcı satır: girişsiz kullanıcıya listenin uçucu olduğu hatırlatılır; giriş doğal "kaydet" gerekçesi olarak sunulur. */} {girisli === false ? ( -
-

+

+

{/* O anki işletim sisteminin logosu — "bu tarayıcıda"yı somutlaştırır */} - + Listen yalnızca bu tarayıcıda. - {" "} - Giriş yap; her cihazdan eriş{" "} - + + + {" "} + Giriş yap; her cihazdan eriş{" "} + +

Giriş yap, kaydet - +
) : null} {/* Ana sayfadaki final CTA panelinin kompakt hâli: koyu primary zemin + kenarlara doğru yoğunlaşan piksel dokusu (PixelField) */} -
+ {/* Telefonda alt alta (başlık tek satır, buton tam genişlik): + yan yana dizince başlık üç satıra kırılıp listenin yerini + yiyordu (24 Eyl 2026, 375 px ölçümü). */} +
-

+

{riskEksik ? "Risk analizi sıralamanı bekliyor" : "Risk analizini biz yaptık"}

-

+

{riskEksik ? "Riskleri gösterelim; istersen 24'lük listeni de kur (3 kredi)." : "Her seçimin yerleşme riski hazır — son kararı sen ver."} @@ -287,7 +278,7 @@ export function ListeCekmecesi() { {riskEksik ? ( - + {sira} - e.stopPropagation()} // kaydırmayı tetiklemesin - className="block truncate text-sm font-semibold hover:text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" + className={SATIR_AD} > {tercih.isim} - + + e.stopPropagation()} // kaydırmayı tetiklemesin title={`${tercih.universite} taban puanları sayfası`} - className="hover:text-primary hover:underline" + className={`min-w-0 ${SATIR_IKINCIL_LINK}`} > - {tercih.universite} + {trBaslikDuzeni(tercih.universite)} - {tercih.il ? ` · ${tercih.il.toLocaleLowerCase("tr-TR")}` : ""} + {tercih.risk || tercih.efektifSira != null ? ( + + {tercih.risk ? ( + + + {RISK_ETIKET[tercih.risk]} + + ) : null} + {tercih.efektifSira != null ? ( + + Taban sıra + + ~{tercih.efektifSira.toLocaleString("tr-TR")}. + + + ) : null} + + ) : null} - {tercih.efektifSira != null ? ( - - ~{tercih.efektifSira.toLocaleString("tr-TR")}. - - ) : null} - {tercih.risk ? ( - - - {RISK_ETIKET[tercih.risk]} - - ) : null} diff --git a/src/features/liste/components/listem-butonu.tsx b/src/features/liste/components/listem-butonu.tsx index e11c60a..ebf079c 100644 --- a/src/features/liste/components/listem-butonu.tsx +++ b/src/features/liste/components/listem-butonu.tsx @@ -46,7 +46,7 @@ export function ListemButonu() { initial={azMotion ? false : { scale: 0.6 }} animate={{ scale: 1 }} transition={{ type: "spring", duration: 0.4, bounce: 0.45 }} - className="flex size-5 items-center justify-center rounded-full bg-orange-500 font-heading text-[11px] font-bold tabular-nums text-white" + className="flex h-6 min-w-6 items-center justify-center rounded-full bg-orange-500 px-1.5 font-heading text-xs font-bold text-white" > {liste.length}