diff --git a/docs/tasarim/DESIGN.md b/docs/tasarim/DESIGN.md index 4c92754..cc67a8f 100644 --- a/docs/tasarim/DESIGN.md +++ b/docs/tasarim/DESIGN.md @@ -509,6 +509,20 @@ telefonda tam genişlik), "Şehre göre" çipleri (sayfa içi `#sehir-…` çapa - `/universiteler` dizinindeki "Devlet Üniversiteleri" / "Vakıf Üniversiteleri" başlıkları da tür sayfasına link. +### 4.19 Netler paneli — `program-netleri.tsx` ("Son yerleşenin netleri") +Bilal (24 Eyl 2026): "bu kısımlar design md'ye uygun yap, belirt ki bir daha bu hata olmasın". +Panel ortada açılan `Dialog` ve `text-xs` hücreli bir tabloydu; iki kural birden çiğnenmişti. +**Kural:** program satırından açılan her ayrıntı (netler, akademik göstergeler, ileride +kontenjan geçmişi) §4.10 **alt sayfadır** — `Drawer handleOnly`, kap ve çarpı `cta-sira-form.tsx` +çekmecesiyle birebir, başlık `px-10 text-center font-heading text-2xl font-bold`, altında tek +cümle bağlam `text-sm text-slate-500`. İçindeki tablo §4.15'tir: başlık `SATIR_BASLIK`, hücre +`text-sm` (gövde `text-xs`'e inmez, §3), sayılar `font-sans tabular-nums`, **en yeni yıl** koyu +(`font-semibold text-slate-800/900`), eski yıllar `text-slate-500`; toplam satırı ("Yerleşme +puanı") `border-t border-slate-200` + `font-semibold text-slate-900`; ilk sütun `pl-0`. Boş ve +hata durumu `text-base text-slate-500`. Denetim: `tablo-minik-yazi` (hata) — `TableCell`/ +`TableHead` içinde `text-xs` yazılamaz. `Dialog` yalnız arama penceresi (`katalog-arama`) ve +sihirbaz modalı içindir; yeni bir ayrıntı için `Dialog` açılmaz. + ## 5. Yerleşim ### 5.1 Genel @@ -669,6 +683,8 @@ Bir ekranı dönüştüren ajan o ekrandaki uyarıları sıfırlar ya da neden k ### 9.5 Bitirmeden `pnpm tasarim:denetim` sıfır hata (uyarılar raporda listelenir) + 375 px'te tek bakış (taşma, üst üste binme, dokunma hedefi, çekmece tek ekran) + §9.2 ölçümleri. +- Yeni ayrıntı paneli mi? `Dialog` değil `Drawer` (§4.10, §4.19). İçinde tablo mu? §4.15 + sınıfları, hücre `text-sm`, `text-xs` yok. Buton mu? Gölge yok, hover tek turuncu (§2.1, §6). ## 10. Samimi ton, ilerleme ve kutlama (öğrenci ekranları) @@ -838,9 +854,12 @@ tabular-nums yok, §3) ve altında `text-sm font-semibold text-white/80` "sıra · Sayısal"; başlık `font-heading text-xl font-bold leading-tight text-balance sm:text-2xl`. **Buton yazısız** (Bilal, 24 Eyl 2026: "buton cılız kaldı, yazılı bir buton olmasın" — §4.1'in "metin + sondaki ok" kuralının bilinçli -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 +istisnası): `flex size-14 items-center justify-center rounded-full bg-orange-500 text-white` + +`ArrowRight size-7`. **Gölge yok** (§6: derinlik gölgeyle verilmez; ilk sürümdeki +`shadow-lg shadow-orange-500/30` kaldırıldı) ve **hover'da renk değişmez** — iri dolu turuncu +yüzeyde `orange-600` kırmızımsı okunuyor (Bilal, 24 Eyl 2026); tepki `hover:scale-[1.04]` + ok +2 px kayar, basınca `scale-[0.95]`. Metinli CTA butonlarında `hover:bg-orange-600` kanonik kalır +(§2.1); `aria-label` + `title` "Sıralamana uygun programları gör". Bandın 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). diff --git a/scripts/tasarim-denetim.ts b/scripts/tasarim-denetim.ts index 6bd6175..5457fbe 100644 --- a/scripts/tasarim-denetim.ts +++ b/scripts/tasarim-denetim.ts @@ -212,6 +212,13 @@ const KURALLAR: Kural[] = [ muaf: /src\/features\/rehber\/components\/rehber-kapak\.tsx$/, bul: regexKurali(/\[#[0-9a-fA-F]{3,8}\]/), }, + { + ad: "tablo-minik-yazi", + seviye: "hata", + mesaj: + "Tablo hücresi/başlığında text-xs yok: hücre text-sm, başlık SATIR_BASLIK (DESIGN.md §4.15, §4.19, §3). 24 Eyl 2026 netler panelinde yaşandı", + bul: regexKurali(/]*\btext-xs\b/), + }, { ad: "minik-yazi", seviye: "uyari", diff --git a/src/features/katalog/components/program-netleri.tsx b/src/features/katalog/components/program-netleri.tsx index e013841..5378cff 100644 --- a/src/features/katalog/components/program-netleri.tsx +++ b/src/features/katalog/components/program-netleri.tsx @@ -2,23 +2,25 @@ // Program satırındaki "netler" butonu: YÖK Atlas'ın "yerleşen son kişinin // netleri" verisini (data/yokatlas.db → netler tablosu, /api/netler) yıl -// sütunlu kompakt bir modalde gösterir. Kadın-erkek dağılımı bilinçli olarak -// yok: YÖK Atlas 2026 SPA'sına geçerken cinsiyet panelini yayından kaldırdı -// (bkz. scripts/detay.ts). +// sütunlu tabloyla alttan açılan sayfada gösterir (DESIGN.md §4.10: ayrıntı +// her zaman Drawer, ortada modal değil; §4.19 netler paneli). Kadın-erkek +// dağılımı bilinçli olarak yok: YÖK Atlas 2026 SPA'sına geçerken cinsiyet +// panelini yayından kaldırdı (bkz. scripts/detay.ts). -import { SATIR_DUGME_BOYU } from "@/components/liste-satiri"; +import { SATIR_BASLIK, SATIR_DUGME_BOYU } from "@/components/liste-satiri"; import { useState } from "react"; -import { ListChecks } from "lucide-react"; +import { ListChecks, X } from "lucide-react"; import type { ProgramNetSatiri } from "@/types/yokatlas"; import { olay } from "@/lib/analitik"; +import { cn } from "@/lib/utils"; import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog"; + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerTitle, + DrawerTrigger, +} from "@/components/ui/drawer"; import { Table, TableBody, @@ -91,8 +93,8 @@ export function ProgramNetleriButonu({ } return ( - - + + - - + {/* Çekmece kabı ve çarpı cta-sira-form.tsx'teki çekmeceyle birebir (§4.10, §4.3) */} + e.stopPropagation()} > - - Son yerleşenin netleri - + + + Kapat + +
+ + Son yerleşenin netleri + + {isim} {universite ? ` · ${universite}` : ""} — bölüme en düşük puanla yerleşen adayın sınav netleri (YÖK Atlas). - - - - -
+ +
+ +
+ + + ); } @@ -132,21 +143,21 @@ function NetlerIcerik({ return (
{[0, 1, 2, 3, 4].map((i) => ( -
+
))}
); } if (durum === "hata") { return ( -

- Netler yüklenemedi. Modalı kapatıp yeniden açmayı dene. +

+ Netler yüklenemedi. Paneli kapatıp yeniden açmayı dene.

); } if (netler.length === 0) { return ( -

+

Bu program için YÖK Atlas'ta net verisi yayınlanmamış.

); @@ -155,68 +166,76 @@ function NetlerIcerik({ const dersler = DERSLER.filter((d) => netler.some((y) => y[d.alan] != null), ); + // En yeni yıl vurgulu (§1.1 "sık bakılan önde"); eski yıllar bağlam. + const sonYil = Math.max(...netler.map((y) => y.yil)); + const hucre = (yil: number, vurgu = false) => + cn( + "py-2.5 text-right text-sm tabular-nums", + yil === sonYil + ? vurgu + ? "font-semibold text-slate-900" + : "font-semibold text-slate-800" + : "text-slate-500", + ); return ( -
- - - - Ders - {netler.map((y) => ( - - {y.yil} - - ))} - - - - {dersler.map((d) => ( - - - {d.etiket} - / {d.max} - - {netler.map((y) => { - const deger = y[d.alan]; - return ( - - {deger != null ? net(deger) : "—"} - - ); - })} - +
+ + + Ders + {netler.map((y) => ( + + {y.yil} + ))} - - - OBP + + + + {dersler.map((d) => ( + + + {d.etiket} + / {d.max} - {netler.map((y) => ( - - {y.obp != null ? net(y.obp) : "—"} - - ))} + {netler.map((y) => { + const deger = y[d.alan]; + return ( + + {deger != null ? net(deger) : "—"} + + ); + })} - - - Yerleşme puanı + ))} + + OBP + {netler.map((y) => ( + + {y.obp != null ? net(y.obp) : "—"} - {netler.map((y) => ( - - {y.tabanPuan != null ? net(y.tabanPuan) : "—"} - - ))} - - -
-
+ ))} + + + + Yerleşme puanı + + {netler.map((y) => ( + + {y.tabanPuan != null ? net(y.tabanPuan) : "—"} + + ))} + + + ); } diff --git a/src/features/sihirbaz/components/cta-sira-form.tsx b/src/features/sihirbaz/components/cta-sira-form.tsx index 0e9bf34..96ec8da 100644 --- a/src/features/sihirbaz/components/cta-sira-form.tsx +++ b/src/features/sihirbaz/components/cta-sira-form.tsx @@ -442,7 +442,10 @@ export function CtaSiraForm({ href={sonucHref()} aria-label="Sıralamana uygun programları gör" title="Sıralamana uygun programları gör" - 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" + // Gölge yok (§6: derinlik gölgeyle verilmez), hover'da renk + // değişmez (iri dolu yüzeyde orange-600 kırmızımsı okunuyor — + // Bilal, 24 Eyl 2026); tepki: ok kayar, basınca küçülür. + className="group flex size-12 shrink-0 items-center justify-center rounded-full bg-orange-500 text-white transition-transform duration-200 after:absolute after:inset-0 hover:scale-[1.04] active:scale-[0.95] sm:size-14 lg:order-3" >