diff --git a/docs/tasarim/DESIGN.md b/docs/tasarim/DESIGN.md index 4c8e308..45dc958 100644 --- a/docs/tasarim/DESIGN.md +++ b/docs/tasarim/DESIGN.md @@ -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. diff --git a/src/components/liste-satiri.ts b/src/components/liste-satiri.ts index b797f6b..3452bb8 100644 --- a/src/components/liste-satiri.ts +++ b/src/components/liste-satiri.ts @@ -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"; diff --git a/src/features/katalog/components/bolum-program-listesi.tsx b/src/features/katalog/components/bolum-program-listesi.tsx index 3c87525..2fc5f67 100644 --- a/src/features/katalog/components/bolum-program-listesi.tsx +++ b/src/features/katalog/components/bolum-program-listesi.tsx @@ -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({ ) : null} - {p.universiteSlug ? ( - - {uniAd} - - ) : ( - - {uniAd} + + {p.universiteSlug ? ( + + {uniAd} + + ) : ( + + {uniAd} + + )} + + {p.unitur ? ( + + {UNITUR_ETIKET[p.unitur]?.cip ?? + trBaslikDuzeni(p.unitur)} + + ) : null} + {p.il ? ( + + {trBaslikDuzeni(p.il)} + + ) : null} + {p.sure ? ( + {p.sure} yıl + ) : null} - )} + {varyant ? ( {varyant} ) : null} - - {p.unitur ? ( - - {UNITUR_ETIKET[p.unitur]?.cip ?? - trBaslikDuzeni(p.unitur)} - - ) : null} - {p.il ? ( - - {trBaslikDuzeni(p.il)} - - ) : null} - {p.sure ? ( - {p.sure} yıl - ) : null} - Taban sıra diff --git a/src/features/katalog/components/program-netleri.tsx b/src/features/katalog/components/program-netleri.tsx index e2e08fd..e013841 100644 --- a/src/features/katalog/components/program-netleri.tsx +++ b/src/features/katalog/components/program-netleri.tsx @@ -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}`} > {isim} — son yerleşenin netleri diff --git a/src/features/katalog/components/universite-program-tablosu.tsx b/src/features/katalog/components/universite-program-tablosu.tsx index 5e9e7a4..2636cc0 100644 --- a/src/features/katalog/components/universite-program-tablosu.tsx +++ b/src/features/katalog/components/universite-program-tablosu.tsx @@ -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 ( - {p.bolumSlug ? ( - - {p.isim.trim()} - - ) : ( - - {p.isim.trim()} + + {p.bolumSlug ? ( + + {p.isim.trim()} + + ) : ( + + {p.isim.trim()} + + )} + + + {TUR_ETIKET[p.tur] ?? p.tur} + + {p.sure ? ( + {p.sure} yıl + ) : null} - )} - - - {TUR_ETIKET[p.tur] ?? p.tur} - - {p.sure ? ( - {p.sure} yıl - ) : null} Taban sıra diff --git a/src/features/liste/components/program-ekle-butonu.tsx b/src/features/liste/components/program-ekle-butonu.tsx index d7ddcad..dbd2edd 100644 --- a/src/features/liste/components/program-ekle-butonu.tsx +++ b/src/features/liste/components/program-ekle-butonu.tsx @@ -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" diff --git a/src/features/liste/components/program-tablosu.tsx b/src/features/liste/components/program-tablosu.tsx index d384bc2..e27f5a2 100644 --- a/src/features/liste/components/program-tablosu.tsx +++ b/src/features/liste/components/program-tablosu.tsx @@ -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} - - e.stopPropagation()} - > - {trBaslikDuzeni(p.universite)} - - - - {devlet ? "Devlet" : "Vakıf"} - {p.il ? ( - {trBaslikDuzeni(p.il)} - ) : null} - {p.sure ? ( - {p.sure} yıl - ) : null} - {bosKaldi ? ( - - Boş kaldı - - ) : null} + + + e.stopPropagation()} + > + {trBaslikDuzeni(p.universite)} + + + + {devlet ? "Devlet" : "Vakıf"} + {p.il ? ( + {trBaslikDuzeni(p.il)} + ) : null} + {p.sure ? ( + {p.sure} yıl + ) : null} + {bosKaldi ? ( + + Boş kaldı + + ) : null} + {risk ? : null} diff --git a/src/features/rapor/components/rapor-listesi.tsx b/src/features/rapor/components/rapor-listesi.tsx index 3eddb7d..fe84e7f 100644 --- a/src/features/rapor/components/rapor-listesi.tsx +++ b/src/features/rapor/components/rapor-listesi.tsx @@ -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" > - + {t.sira} @@ -246,25 +248,27 @@ export function RaporListesi({ ) : ( {t.programId} )} - {p?.universite ? ( - - e.stopPropagation()} - > - {trBaslikDuzeni(p.universite)} - + + {p?.universite ? ( + + e.stopPropagation()} + > + {trBaslikDuzeni(p.universite)} + + + ) : null} + + {p?.unitur ? ( + {devlet ? "Devlet" : "Vakıf"} + ) : null} + {p?.il ? ( + {trBaslikDuzeni(p.il)} + ) : null} - ) : null} - - {p?.unitur ? ( - {devlet ? "Devlet" : "Vakıf"} - ) : null} - {p?.il ? ( - {trBaslikDuzeni(p.il)} - ) : null} {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`} > {p.isim} - - {trBaslikDuzeni(p.universite)} - - - {p.unitur ? ( - {devlet ? "Devlet" : "Vakıf"} - ) : null} - {p.il ? ( - {trBaslikDuzeni(p.il)} - ) : null} + + + {trBaslikDuzeni(p.universite)} + + + {p.unitur ? ( + {devlet ? "Devlet" : "Vakıf"} + ) : null} + {p.il ? ( + {trBaslikDuzeni(p.il)} + ) : null} +