fix(tasarim): piksel zemin yalnız CTA yüzeylerinde, kabın ölçüsüne göre, küçük kare yok
Bilal (24 Eyl 2026): ana sayfa CTA'sında doku hiç görünmüyordu, bazı kartlarda çok azdı; sonra "çok fazla piksel, küçük olanlar hiç olmasın" ve "/sonuc'taki kartın arkasına da piksel koymuşsun; pikseller CTA'larda olacak sadece". - Kök neden: PixelMasonry sabit 420×120 çizimi kaplayacak şekilde ölçekleniyordu; yüksek kartlarda görünen kısım boş banda düşüyordu. Artık kabın gerçek ölçüsüne göre üretiliyor (ResizeObserver), yalnız kenar çerçevesinde, orta boş; `haric` verilen öğenin (24'lük piksel tablosu) çevresi her genişlikte boş. Sunucuda boş, ölçülünce belirir. - Küçük (tek hücre) kare yok: 4×4 makro hücrede 2–4 hücrelik kareler, iri olan seyrek ve silik. Ölçüm: kapanış kartı 1280 px'te 58 kare (tabloya binen 0), 375 px'te 27 kare. - Beyaz içerik kartlarından zemin geri alındı (tadımlık, /listem üretim ve kilit kartları, boş durum, sıralama-yok, meraklısına, paket kartları, kaydet bandı, katalog üstü kompakt satır, /sonuc "listen hazır"). Kalanlar: CtaBandi, PikselCtaYuzeyi, arama penceresi kartı. PikselZemin'in açık tonu kaldırıldı. DESIGN.md §10.8 güncellendi. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
@@ -22,7 +22,6 @@
|
||||
// Kural: action cevabının hemen ardından yönlendiriciye TEK aksiyon gönder
|
||||
// (router.replace); ikinci aksiyon (refresh) ancak o gezinme bitince.
|
||||
|
||||
import { PikselZemin } from "@/components/piksel-zemin";
|
||||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -265,8 +264,7 @@ export function ListeUretici({
|
||||
// Paketli kullanıcıya paket satma: onun ürünü top-up. Liste ve sohbet
|
||||
// geçmişi kalıcı; kredi yükleyince kaldığı yerden devam eder.
|
||||
return (
|
||||
<section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<PikselZemin seed={23} />
|
||||
<section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<Lock className="mx-auto size-8 text-slate-400" aria-hidden />
|
||||
<h1 className="mt-4 font-heading text-xl font-bold">
|
||||
Kredin bu liste için yetmiyor
|
||||
@@ -296,8 +294,7 @@ export function ListeUretici({
|
||||
|
||||
if (durum.ad === "hata") {
|
||||
return (
|
||||
<section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<PikselZemin seed={23} />
|
||||
<section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<h1 className="font-heading text-xl font-bold">Liste kurulamadı</h1>
|
||||
<p className="mx-auto mt-2 max-w-md text-sm text-slate-600">
|
||||
{durum.mesaj}
|
||||
@@ -347,8 +344,7 @@ function SunucuYokEkrani() {
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<PikselZemin seed={23} />
|
||||
<section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<h1 className="font-heading text-xl font-bold">
|
||||
Listen hazır, sunucuya şu an ulaşamıyoruz
|
||||
</h1>
|
||||
@@ -379,8 +375,7 @@ function SunucuYokEkrani() {
|
||||
* "Tekrar dene" yok: tekrar taze requestId üretip ikinci üretimi başlatırdı. */
|
||||
function SuruyorEkrani() {
|
||||
return (
|
||||
<section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<PikselZemin seed={23} />
|
||||
<section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<h1 className="font-heading text-xl font-bold">Listen zaten hazırlanıyor</h1>
|
||||
<p className="mx-auto mt-2 max-w-md text-sm text-slate-600">
|
||||
Bunu başka bir sekmede başlatmışsın. İki kez kurmayalım — kredin bu
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
// ekranda. Harita ⇄ liste köprüsü (pinden satıra, satırdan haritaya) ve
|
||||
// paketsiz paywall kartları burada; veri çekimi sunucuda (page.tsx) kalır.
|
||||
|
||||
import { PikselZemin } from "@/components/piksel-zemin";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
@@ -338,9 +337,8 @@ export function ListemGovde({
|
||||
|
||||
<section
|
||||
ref={kilitKartRef}
|
||||
className="relative isolate overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
|
||||
className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
|
||||
>
|
||||
<PikselZemin seed={59} />
|
||||
<div className="border-b border-slate-100 p-6">
|
||||
<h3 className="font-heading text-xl font-bold tracking-tight">
|
||||
Tablo ücretsiz.
|
||||
|
||||
@@ -19,7 +19,6 @@ import { raporMaskele, ACIK_SATIR } from "@/lib/rapor-maske";
|
||||
import type { Mesaj } from "./sohbet-client";
|
||||
import { ListemGovde } from "./listem-govde";
|
||||
import { ListemBosCta } from "./listem-bos-cta";
|
||||
import { PikselZemin } from "@/components/piksel-zemin";
|
||||
import { ListeUretici } from "./liste-uretici";
|
||||
import { UretimBasladiOlayi } from "./uretim-basladi-olayi";
|
||||
|
||||
@@ -66,8 +65,7 @@ export async function ListemIcerik({
|
||||
|
||||
if (!raporVar) {
|
||||
const bosDurum = (
|
||||
<section className="relative isolate mx-auto flex max-w-2xl flex-col items-center overflow-hidden px-4 py-16 text-center">
|
||||
<PikselZemin seed={29} />
|
||||
<section className="mx-auto flex max-w-2xl flex-col items-center px-4 py-16 text-center">
|
||||
<Sparkles className="size-10 text-primary" aria-hidden />
|
||||
<h1 className="mt-4 font-heading text-2xl font-bold">
|
||||
Henüz Yapay Zeka listen yok
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
// varsa /api/tadimlik'ten kategoriye özel satır çekilip yerinde değiştirilir
|
||||
// (seçim sunucuda kalır). Havuzda içerik yoksa hiç render edilmez.
|
||||
|
||||
import { PikselZemin } from "@/components/piksel-zemin";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
@@ -151,8 +150,7 @@ export function TadimlikSatiri({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative isolate mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
|
||||
<PikselZemin seed={31} />
|
||||
<div className="mt-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
|
||||
{/* Rapor listesinin satırıyla aynı düzen (§4.15): ad sarar,
|
||||
üniversite adı altında, taban sıra sağda iri. */}
|
||||
<div className="flex items-start gap-3">
|
||||
|
||||
Reference in New Issue
Block a user