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

feat(tasarim): geniş ekranda liste satırları ince

Browse Source 
- Tür/il/süre satırı sm'den itibaren adla aynı satırda (SATIR_GRUP)
- lg'de hücre dolgusu bir kademe az, satır düğmeleri 36 px (§8)
- 1280 px ölçüm: bölüm listesi 83 → 61 px; /sonuc 68 px (uzun adda 92)
- Telefonda değişiklik yok (44 px düğme, alt alta düzen)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-24 01:45:03 +03:00
parent d5fd7d12f2
commit 1a176dd085
9 changed files with 140 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/tasarim/DESIGN.md
View File

@@ -365,6 +365,10 @@ tablosu bu sabitleri kullanır, sınıfı elle yazmaz.
sıra numarası zaten satırı çapalıyor, logo adı üç satıra sıkıştırıyordu (satır 214 →
152 px). Açılan ayrıntı iç kutuları `rounded-xl`, etiket `text-sm font-semibold
text-slate-900`, metin `text-base`.
- **Geniş ekranda ince satır** (Bilal, 25 Eyl 2026: "geniş ekranda listeler çok kalın"):
sm'den itibaren tür/il/süre satırı adla aynı satıra çıkar (`SATIR_GRUP`); lg'de hücre
dolgusu `py-3` ve satır düğmeleri 36 px (`SATIR_DUGME_BOYU`, §8 masaüstü tablo istisnası).
Ölçüm 1280 px, bölüm listesi: 83 → 61 px. Telefonda değişmez (44 px düğme).
- Satırda logo varsa (bölüm sayfası) `UniLogo boy="sm"` adın solunda, `items-start`.
- Program varyantı ("… (İngilizce) (Burslu)") adın altında ayrı satır
`mt-0.5 block text-sm leading-snug text-slate-600`; tür çipine yapıştırılıp kesilmez.

23
src/components/liste-satiri.ts
View File

@@ -20,9 +20,16 @@ export const SATIR_ALT_AD = "mt-0.5 block text-sm leading-snug text-slate-600";
export const SATIR_IKINCIL_LINK =
"transition-colors hover:text-orange-500 hover:underline";
/** Tür/il/süre satırı. */
/** Tür/il/süre satırı. Geniş ekranda (sm+) üstündeki adla aynı satıra
* çıkar (SATIR_GRUP), telefonda altına iner. */
export const SATIR_META =
"mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-slate-500";
"mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-slate-500 sm:mt-0";
/** Ad (ya da üniversite adı) + tür/il/süre satırını geniş ekranda yan yana
* dizen sarmal. Bilal'in isteği (25 Eyl 2026): geniş ekranda satırlar üç
* katlı ve "çok kalın" duruyordu. Telefonda alt alta kalır. */
export const SATIR_GRUP =
"sm:flex sm:flex-wrap sm:items-center sm:gap-x-3 sm:gap-y-1";
/** Tür çipi (Devlet, Vakıf, SAY…). */
export const SATIR_CIP =
@@ -36,10 +43,16 @@ export const SATIR_MOBIL_SAYI =
export const SATIR_BASLIK = "h-12 text-sm font-semibold text-slate-500";
/** Adın bulunduğu hücre. */
export const SATIR_AD_HUCRE = "w-full whitespace-normal py-4 pl-4 sm:pl-5";
export const SATIR_AD_HUCRE = "w-full whitespace-normal py-4 pl-4 sm:pl-5 lg:py-3";
/** Butonların hücresi ve kabı: telefonda alt alta, sm'den yan yana. */
export const SATIR_BUTON_HUCRE = "py-4 pr-4 text-right sm:pr-5";
/** Butonların hücresi ve kabı: telefonda alt alta, sm'den yan yana.
* Masaüstünde (lg) satır ince kalsın diye dolgu bir kademe az ve satır
* düğmeleri 36 px (DESIGN.md §8 masaüstü tablo istisnası). */
export const SATIR_BUTON_HUCRE = "py-4 pr-4 text-right sm:pr-5 lg:py-3";
export const SATIR_BUTON_KABI =
"inline-flex flex-col items-center gap-2 sm:flex-row";
export const SATIR_BUTON_BASLIK = "h-12 w-14 text-right sm:w-28";
/** Satır düğmesinin boyu: dokunmada 44 px, masaüstü tabloda 36 px (§8). */
export const SATIR_DUGME_BOYU =
"size-11 min-h-11 min-w-11 lg:size-9 lg:min-h-9 lg:min-w-9";

57
src/features/katalog/components/bolum-program-listesi.tsx
View File

@@ -22,6 +22,7 @@ import {
SATIR_BUTON_HUCRE,
SATIR_BUTON_KABI,
SATIR_CIP,
SATIR_GRUP,
SATIR_META,
SATIR_MOBIL_SAYI,
} from "@/components/liste-satiri";
@@ -225,39 +226,41 @@ export function BolumProgramListesi({
<UniLogo slug={p.universiteSlug} ad={uniAd} boy="sm" />
) : null}
<span className="min-w-0 flex-1">
{p.universiteSlug ? (
<Link
href={`/universite/${p.universiteSlug}`}
className={SATIR_AD}
>
{uniAd}
</Link>
) : (
<span className={SATIR_AD_DUZ}>
{uniAd}
<span className={SATIR_GRUP}>
{p.universiteSlug ? (
<Link
href={`/universite/${p.universiteSlug}`}
className={SATIR_AD}
>
{uniAd}
</Link>
) : (
<span className={SATIR_AD_DUZ}>
{uniAd}
</span>
)}
<span className={SATIR_META}>
{p.unitur ? (
<span className={SATIR_CIP}>
{UNITUR_ETIKET[p.unitur]?.cip ??
trBaslikDuzeni(p.unitur)}
</span>
) : null}
{p.il ? (
<span className="shrink-0">
{trBaslikDuzeni(p.il)}
</span>
) : null}
{p.sure ? (
<span className="shrink-0">{p.sure} yıl</span>
) : null}
</span>
)}
</span>
{varyant ? (
<span className={SATIR_ALT_AD}>
{varyant}
</span>
) : null}
<span className={SATIR_META}>
{p.unitur ? (
<span className={SATIR_CIP}>
{UNITUR_ETIKET[p.unitur]?.cip ??
trBaslikDuzeni(p.unitur)}
</span>
) : null}
{p.il ? (
<span className="shrink-0">
{trBaslikDuzeni(p.il)}
</span>
) : null}
{p.sure ? (
<span className="shrink-0">{p.sure} yıl</span>
) : null}
</span>
<span className={SATIR_MOBIL_SAYI}>
Taban sıra
<span className="font-semibold tabular-nums text-slate-900">

3
src/features/katalog/components/program-netleri.tsx
View File

@@ -6,6 +6,7 @@
// 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 { useState } from "react";
import { ListChecks } from "lucide-react";
import type { ProgramNetSatiri } from "@/types/yokatlas";
@@ -96,7 +97,7 @@ export function ProgramNetleriButonu({
type="button"
title="Son yerleşenin netleri"
onClick={(e) => e.stopPropagation()}
className={`inline-flex size-11 min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${className}`}
className={`inline-flex ${SATIR_DUGME_BOYU} cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${className}`}
>
<ListChecks className="size-4" aria-hidden />
<span className="sr-only">{isim} — son yerleşenin netleri</span>

39
src/features/katalog/components/universite-program-tablosu.tsx
View File

@@ -17,6 +17,7 @@ import {
SATIR_BUTON_HUCRE,
SATIR_BUTON_KABI,
SATIR_CIP,
SATIR_GRUP,
SATIR_META,
SATIR_MOBIL_SAYI,
} from "@/components/liste-satiri";
@@ -89,25 +90,27 @@ export function UniversiteProgramTablosu({
return (
<TableRow key={p.id} className="kt-cv-satir">
<TableCell className={SATIR_AD_HUCRE}>
{p.bolumSlug ? (
<Link
href={`/bolum/${p.bolumSlug}`}
className={SATIR_AD}
>
{p.isim.trim()}
</Link>
) : (
<span className={SATIR_AD_DUZ}>
{p.isim.trim()}
<span className={SATIR_GRUP}>
{p.bolumSlug ? (
<Link
href={`/bolum/${p.bolumSlug}`}
className={SATIR_AD}
>
{p.isim.trim()}
</Link>
) : (
<span className={SATIR_AD_DUZ}>
{p.isim.trim()}
</span>
)}
<span className={SATIR_META}>
<span className={SATIR_CIP}>
{TUR_ETIKET[p.tur] ?? p.tur}
</span>
{p.sure ? (
<span className="shrink-0">{p.sure} yıl</span>
) : null}
</span>
)}
<span className={SATIR_META}>
<span className={SATIR_CIP}>
{TUR_ETIKET[p.tur] ?? p.tur}
</span>
{p.sure ? (
<span className="shrink-0">{p.sure} yıl</span>
) : null}
</span>
<span className={SATIR_MOBIL_SAYI}>
Taban sıra

3
src/features/liste/components/program-ekle-butonu.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { SATIR_DUGME_BOYU } from "@/components/liste-satiri";
import { ArrowRight, Check, Plus } from "lucide-react";
import { toast } from "sonner";
import type { Program } from "@/types/yokatlas";
@@ -130,7 +131,7 @@ export function ProgramEkleButonu({
? `Seçtiklerin dolu (${MANUEL_LISTE_MAX}/${MANUEL_LISTE_MAX})`
: "Seçtiklerime ekle"
}
className={`inline-flex size-11 min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-full border transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.92] disabled:cursor-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
className={`inline-flex ${SATIR_DUGME_BOYU} cursor-pointer items-center justify-center rounded-full border transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.92] disabled:cursor-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
listede
? "border-emerald-200 bg-emerald-50 text-emerald-600"
: "border-slate-200 bg-white text-slate-500 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 disabled:opacity-40"

49
src/features/liste/components/program-tablosu.tsx
View File

@@ -52,6 +52,7 @@ import {
SATIR_BUTON_HUCRE,
SATIR_BUTON_KABI,
SATIR_CIP,
SATIR_GRUP,
SATIR_IKINCIL_LINK,
SATIR_META,
SATIR_MOBIL_SAYI,
@@ -359,29 +360,31 @@ function ProgramSatiri({
>
{p.isim}
</Link>
<span className={SATIR_ALT_AD}>
<Link
href={`/universite/${uniSayfaSlug(p.universite)}`}
className={SATIR_IKINCIL_LINK}
title={`${p.universite} taban puanları sayfası`}
onClick={(e) => e.stopPropagation()}
>
{trBaslikDuzeni(p.universite)}
</Link>
</span>
<span className={SATIR_META}>
<span className={SATIR_CIP}>{devlet ? "Devlet" : "Vakıf"}</span>
{p.il ? (
<span className="shrink-0">{trBaslikDuzeni(p.il)}</span>
) : null}
{p.sure ? (
<span className="shrink-0">{p.sure} yıl</span>
) : null}
{bosKaldi ? (
<span className="shrink-0 rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700 sm:hidden">
Boş kaldı
</span>
) : null}
<span className={SATIR_GRUP}>
<span className={SATIR_ALT_AD}>
<Link
href={`/universite/${uniSayfaSlug(p.universite)}`}
className={SATIR_IKINCIL_LINK}
title={`${p.universite} taban puanları sayfası`}
onClick={(e) => e.stopPropagation()}
>
{trBaslikDuzeni(p.universite)}
</Link>
</span>
<span className={SATIR_META}>
<span className={SATIR_CIP}>{devlet ? "Devlet" : "Vakıf"}</span>
{p.il ? (
<span className="shrink-0">{trBaslikDuzeni(p.il)}</span>
) : null}
{p.sure ? (
<span className="shrink-0">{p.sure} yıl</span>
) : null}
{bosKaldi ? (
<span className="shrink-0 rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700 sm:hidden">
Boş kaldı
</span>
) : null}
</span>
</span>
<span className={SATIR_MOBIL_SAYI}>
{risk ? <RiskEtiketi risk={risk} /> : null}

44
src/features/rapor/components/rapor-listesi.tsx
View File

@@ -38,6 +38,8 @@ import {
SATIR_BUTON_BASLIK,
SATIR_BUTON_HUCRE,
SATIR_CIP,
SATIR_DUGME_BOYU,
SATIR_GRUP,
SATIR_IKINCIL_LINK,
SATIR_META,
SATIR_MOBIL_SAYI,
@@ -220,7 +222,7 @@ export function RaporListesi({
className="kt-cv-satir cursor-pointer"
>
<TableCell className="pl-4 pr-0 align-top sm:pl-5">
<span className="mt-4 flex size-8 items-center justify-center rounded-full bg-slate-100 font-heading text-sm font-bold text-slate-900">
<span className="mt-4 flex size-8 items-center justify-center rounded-full bg-slate-100 font-heading text-sm font-bold text-slate-900 lg:mt-3">
{t.sira}
</span>
</TableCell>
@@ -246,25 +248,27 @@ export function RaporListesi({
) : (
<span className={SATIR_AD_DUZ}>{t.programId}</span>
)}
{p?.universite ? (
<span className={SATIR_ALT_AD}>
<Link
href={`/universite/${uniSayfaSlug(p.universite)}`}
className={SATIR_IKINCIL_LINK}
title={`${p.universite} taban puanları sayfası`}
onClick={(e) => e.stopPropagation()}
>
{trBaslikDuzeni(p.universite)}
</Link>
<span className={SATIR_GRUP}>
{p?.universite ? (
<span className={SATIR_ALT_AD}>
<Link
href={`/universite/${uniSayfaSlug(p.universite)}`}
className={SATIR_IKINCIL_LINK}
title={`${p.universite} taban puanları sayfası`}
onClick={(e) => e.stopPropagation()}
>
{trBaslikDuzeni(p.universite)}
</Link>
</span>
) : null}
<span className={SATIR_META}>
{p?.unitur ? (
<span className={SATIR_CIP}>{devlet ? "Devlet" : "Vakıf"}</span>
) : null}
{p?.il ? (
<span className="shrink-0">{trBaslikDuzeni(p.il)}</span>
) : null}
</span>
) : null}
<span className={SATIR_META}>
{p?.unitur ? (
<span className={SATIR_CIP}>{devlet ? "Devlet" : "Vakıf"}</span>
) : null}
{p?.il ? (
<span className="shrink-0">{trBaslikDuzeni(p.il)}</span>
) : null}
</span>
<span className={SATIR_MOBIL_SAYI}>
{riskHucresi}
@@ -298,7 +302,7 @@ export function RaporListesi({
e.stopPropagation();
tiklandi(t.sira);
}}
className="inline-flex size-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className={`inline-flex ${SATIR_DUGME_BOYU} cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
>
<ChevronDown
className={`size-4 transition-transform duration-200 ${acikMi ? "rotate-180" : ""}`}

23
src/features/rapor/components/tadimlik-satiri.tsx
View File

@@ -29,6 +29,7 @@ import {
SATIR_ALT_AD,
SATIR_AD_DUZ,
SATIR_CIP,
SATIR_GRUP,
SATIR_META,
} from "@/components/liste-satiri";
import { listemUretHref, PROFIL_DEGISTI_EVENT } from "@/features/sihirbaz/sihirbaz-sabitler";
@@ -156,16 +157,18 @@ export function TadimlikSatiri({
<UniLogo ad={p.universite} boy="sm" />
<span className="min-w-0 flex-1">
<span className={SATIR_AD_DUZ}>{p.isim}</span>
<span className={SATIR_ALT_AD}>
{trBaslikDuzeni(p.universite)}
</span>
<span className={SATIR_META}>
{p.unitur ? (
<span className={SATIR_CIP}>{devlet ? "Devlet" : "Vakıf"}</span>
) : null}
{p.il ? (
<span className="shrink-0">{trBaslikDuzeni(p.il)}</span>
) : null}
<span className={SATIR_GRUP}>
<span className={SATIR_ALT_AD}>
{trBaslikDuzeni(p.universite)}
</span>
<span className={SATIR_META}>
{p.unitur ? (
<span className={SATIR_CIP}>{devlet ? "Devlet" : "Vakıf"}</span>
) : null}
{p.il ? (
<span className="shrink-0">{trBaslikDuzeni(p.il)}</span>
) : null}
</span>
</span>
</span>
<span className="hidden text-right md:inline-flex">