fix(ux): /listem telefonda yana taşıyordu; başlık yer söylüyor; kaydet bandı
- /listem ve üretim ekranındaki ızgaranın telefonda sütun tanımı yoktu; en geniş çocuk sayfayı 434 px'e itiyordu (375 px'te yatay kaydırma). grid-cols-[minmax(0,1fr)] ile düzeldi (ölçüldü: 375) - /listem h1: pazarlama cümlesi yerine "Tercih listen" + "24 tercih: 5 hayal · 13 dengeli · 6 güvenli"; paketsizde eski cümle alt satırda - Başlık düğmeleri 44 px, hover tek turuncu - "Listen yalnızca bu tarayıcıda" bandı telefonda başlığı kelime kelime kırıyordu: metin üstte, düğme altta tam genişlik; kanonik çarpı Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
@@ -434,7 +434,7 @@ function UretimGovdesi({ uzunSurdu }: { uzunSurdu: boolean }) {
|
||||
|
||||
{/* Nihai sayfanın (listem-govde) grid'iyle aynı düzen: liste solda,
|
||||
danışman sağda — üretim biter bitmez ekran aynı yerlere oturur. */}
|
||||
<div className="mt-8 grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_380px] xl:grid-cols-[minmax(0,1fr)_440px]">
|
||||
<div className="mt-8 grid grid-cols-[minmax(0,1fr)] items-start gap-6 lg:grid-cols-[minmax(0,1fr)_380px] xl:grid-cols-[minmax(0,1fr)_440px]">
|
||||
{/* Gelmekte olan tercih listesinin iskeleti */}
|
||||
<div className="flex min-w-0 flex-col gap-2 rounded-2xl border border-slate-200 bg-white p-6 sm:p-8">
|
||||
<div className="flex items-center justify-between pb-2">
|
||||
|
||||
@@ -39,6 +39,11 @@ import {
|
||||
} from "@/features/liste/hooks/use-tercih-profili";
|
||||
import { UNIVERSITE_TIPI_ETIKET } from "@/features/sihirbaz/sihirbaz-sabitler";
|
||||
import { PUAN_TURLERI } from "@/types/yokatlas";
|
||||
import { DILIM_ETIKET } from "@/lib/risk";
|
||||
|
||||
// Başlık satırındaki ikincil düğmeler: 44 px, hover tek turuncu (§4.1, §2.1)
|
||||
const IKINCIL_BUTON =
|
||||
"h-11 cursor-pointer px-4 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.97]";
|
||||
|
||||
export function ListemGovde({
|
||||
rapor,
|
||||
@@ -94,6 +99,10 @@ export function ListemGovde({
|
||||
);
|
||||
|
||||
const acikSatir = kilitliBaslangic ?? rapor.tercihler.length;
|
||||
const dilimOzeti = useMemo(() => {
|
||||
const say = (d: string) => rapor.tercihler.filter((t) => t.dilim === d).length;
|
||||
return `${rapor.tercihler.length} tercih: ${say("hayal")} ${DILIM_ETIKET.hayal.toLocaleLowerCase("tr-TR")} · ${say("dengeli")} ${DILIM_ETIKET.dengeli.toLocaleLowerCase("tr-TR")} · ${say("garanti")} ${DILIM_ETIKET.garanti.toLocaleLowerCase("tr-TR")}`;
|
||||
}, [rapor]);
|
||||
|
||||
// Profil client'ta (localStorage) çözülür: ilk render'da null döner, yani
|
||||
// SSR ile aynı "Tercihlerimi düzenle" hâli basılır — hidrasyon uyuşmazlığı
|
||||
@@ -148,7 +157,7 @@ export function ListemGovde({
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mt-8 grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_380px] xl:grid-cols-[minmax(0,1fr)_440px]">
|
||||
<div className="mt-8 grid grid-cols-[minmax(0,1fr)] items-start gap-6 lg:grid-cols-[minmax(0,1fr)_380px] xl:grid-cols-[minmax(0,1fr)_440px]">
|
||||
<div className="flex min-w-0 flex-col gap-6">
|
||||
{/* Harita: listenin coğrafyası — ile dokun, üniversiteleri gör */}
|
||||
<section
|
||||
@@ -181,11 +190,21 @@ export function ListemGovde({
|
||||
aksiyonları bu kutunun kendi başlık satırında yaşar. */}
|
||||
<section className={`min-w-0${kilitAcilisi ? " kt-unblur" : ""}`}>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 pb-1">
|
||||
<h1 className="min-w-0 font-heading text-xl font-bold tracking-tight sm:text-2xl">
|
||||
{hasPaket
|
||||
? "Yapay Zeka tercih listen"
|
||||
: "Veriyi ücretsiz incele. Kararı Yapay Zeka ile netleştir."}
|
||||
</h1>
|
||||
{/* Sayfa nerede olduğunu söyler (DESIGN.md §10.1): başlık yer,
|
||||
altındaki satır listenin sayılarla özeti. */}
|
||||
<div className="min-w-0">
|
||||
<h1 className="font-heading text-2xl font-bold text-balance text-slate-900 sm:text-3xl">
|
||||
Tercih listen
|
||||
</h1>
|
||||
<p className="mt-1 text-base text-slate-600">
|
||||
{dilimOzeti}
|
||||
{hasPaket ? null : (
|
||||
<span className="block text-sm text-slate-500">
|
||||
Veriyi ücretsiz incele, kararı Yapay Zeka ile netleştir.
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-wrap gap-2">
|
||||
{/* Tercih düzenleme her kullanıcıya açık: kapı (layout'ta monte
|
||||
TercihProfiliKapisi) profili günceller, /listem'e döner.
|
||||
@@ -200,9 +219,8 @@ export function ListemGovde({
|
||||
{farkVar ? (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={() => setFarkModali(true)}
|
||||
className="cursor-pointer transition-[background-color,transform] duration-200 active:scale-[0.97]"
|
||||
className="h-11 cursor-pointer px-4 transition-[background-color,transform] duration-200 active:scale-[0.97]"
|
||||
>
|
||||
<RefreshCcw className="size-4" aria-hidden />
|
||||
Tercihlerin değişmiş
|
||||
@@ -211,9 +229,8 @@ export function ListemGovde({
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={profilDuzenlemeyiAc}
|
||||
className="cursor-pointer"
|
||||
className={IKINCIL_BUTON}
|
||||
>
|
||||
<SlidersHorizontal className="size-4" aria-hidden />
|
||||
Tercihlerimi düzenle
|
||||
@@ -224,8 +241,7 @@ export function ListemGovde({
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="cursor-pointer"
|
||||
className={IKINCIL_BUTON}
|
||||
>
|
||||
<Link href="#revizyon">
|
||||
<PencilLine className="size-4" aria-hidden />
|
||||
@@ -235,8 +251,7 @@ export function ListemGovde({
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="cursor-pointer"
|
||||
className={IKINCIL_BUTON}
|
||||
>
|
||||
<Link href="/rapor/yazdir" target="_blank">
|
||||
<FileText className="size-4" aria-hidden />
|
||||
|
||||
@@ -189,7 +189,7 @@ export function ListemIcerikSkeleton() {
|
||||
<Skeleton className="h-6 w-40 rounded-full" />
|
||||
<Skeleton className="mt-4 h-9 w-3/4 max-w-xl" />
|
||||
<Skeleton className="mt-3 h-5 w-2/3 max-w-lg" />
|
||||
<div className="mt-8 grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_380px] xl:grid-cols-[minmax(0,1fr)_440px]">
|
||||
<div className="mt-8 grid grid-cols-[minmax(0,1fr)] items-start gap-6 lg:grid-cols-[minmax(0,1fr)_380px] xl:grid-cols-[minmax(0,1fr)_440px]">
|
||||
<div className="flex flex-col gap-2">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-16 w-full rounded-xl" />
|
||||
|
||||
Reference in New Issue
Block a user