6690d3b779
All checks were successful
Deploy / deploy (push) Successful in 4m51s
- Özet ızgarası relative isolate; konum haritası absolute katman (-inset-x-4 -inset-y-8) olarak ızgaranın tamamını kaplar, üçüncü sütun yalnız yer tutar. lg'de sağdan sola, telefonda üst satırdan aşağı uzun rampalı mask. - Yakınlaşma ease-out yerine spring bounce 0 (0,6 s gecikme, 1,6 s): sert başlangıç gitti. Şehir yüzeyi mask'ları da uzatıldı. - DESIGN.md §4.17 güncellendi. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
import { normalizeIlAdi } from "@/lib/harita";
|
||
import { uniUlkeKonum, yurtdisiUniKonum } from "@/lib/harita-ulkeler";
|
||
import { cities } from "turkey-map-react/lib/data";
|
||
import {
|
||
TurkiyePikselHaritasi,
|
||
UlkePikselHaritasi,
|
||
} from "./sehir-piksel-haritasi";
|
||
|
||
// Harita il adları modül yükünde bir kez DB biçimine çevrilir.
|
||
const HARITA_ILLERI = new Set(cities.map((c) => normalizeIlAdi(c.name)));
|
||
/**
|
||
* Harita katmanı ızgaranın tamamını kaplar ve biraz dışına sarkar; kartlar
|
||
* (beyaz, opak) üstünde kalır, harita aralıklardan ve üçüncü sütunun boş
|
||
* alanından görünür. Mask'lar (dış: kartların tarafına doğru, iç: dik
|
||
* yönde iki kenar) hiçbir kenarda kesik kare bırakmaz — geniş ekranda sağdan
|
||
* sola, telefonda üst satırdan (harita yeri) aşağı doğru erir.
|
||
*/
|
||
const KATMAN_SINIFI =
|
||
"pointer-events-none absolute -inset-x-4 -inset-y-8 -z-10 [mask-image:linear-gradient(to_bottom,transparent_0%,black_14%,black_34%,rgba(0,0,0,0.12)_58%,transparent_82%)] lg:[mask-image:linear-gradient(to_right,transparent_2%,rgba(0,0,0,0.08)_30%,rgba(0,0,0,0.35)_54%,black_74%,black_92%,transparent_100%)]";
|
||
const IC_MASK_SINIFI =
|
||
"h-full w-full [mask-image:linear-gradient(to_right,transparent_0%,black_12%,black_88%,transparent_100%)] lg:[mask-image:linear-gradient(to_bottom,transparent_0%,black_16%,black_84%,transparent_100%)]";
|
||
// İl geniş ekranda üçüncü sütunun ortasına (x≈0,82), telefonda üst satıra gelir.
|
||
const ODAK_HIZA = { lg: { x: 0.82, y: 0.5 }, dar: { x: 0.5, y: 0.17 } } as const;
|
||
|
||
/**
|
||
* Üniversite sayfasındaki konum haritası: şehir sayfasıyla aynı dot-matrix
|
||
* harita (DESIGN.md §4.17; Bilal, 24 Eyl 2026: "bu kart kısmına piksel
|
||
* dokuları ekle", sonra "4 kartın arkasına sarkabilir"). Türkiye'de il
|
||
* turuncu karelerle yanar; KKTC/yurt dışında ülke kontürü + kampüs şehrinde
|
||
* iri turuncu kare. Ebeveyn ızgara `relative isolate` olmalı.
|
||
*/
|
||
export function UniversiteKonumHaritasi({
|
||
universite,
|
||
il,
|
||
}: {
|
||
universite: string;
|
||
il: string | null;
|
||
}) {
|
||
const yurtdisi = uniUlkeKonum(universite, il);
|
||
let harita: React.ReactNode = null;
|
||
let altYazi: React.ReactNode = null;
|
||
if (yurtdisi) {
|
||
const konum = yurtdisiUniKonum(universite, il);
|
||
harita = (
|
||
<UlkePikselHaritasi
|
||
ulke={yurtdisi.ulke}
|
||
sehir={konum ? { x: konum.x, y: konum.y } : null}
|
||
etiket={`${universite} konumunun ${yurtdisi.ulkeAd} haritasındaki görünümü${yurtdisi.sehir ? ` (${yurtdisi.sehir})` : ""}`}
|
||
doldur
|
||
odakHiza={ODAK_HIZA}
|
||
/>
|
||
);
|
||
altYazi = (
|
||
<p className="pointer-events-none absolute bottom-0 left-0 text-xs font-medium text-slate-500">
|
||
{yurtdisi.ulkeAd}
|
||
{yurtdisi.sehir ? ` · ${yurtdisi.sehir}` : ""}
|
||
</p>
|
||
);
|
||
} else if (il && HARITA_ILLERI.has(il)) {
|
||
harita = (
|
||
<TurkiyePikselHaritasi
|
||
il={il}
|
||
etiket={`${universite} konumunun Türkiye haritasındaki görünümü`}
|
||
doldur
|
||
odakHiza={ODAK_HIZA}
|
||
/>
|
||
);
|
||
}
|
||
if (!harita) return null;
|
||
|
||
return (
|
||
<>
|
||
{/* Yer tutucu: telefonda tam genişlikte bir satır, lg'de üçüncü sütun */}
|
||
<section
|
||
aria-labelledby="universite-konumu"
|
||
className="relative col-span-2 min-h-44 lg:col-span-1 lg:col-start-3 lg:row-start-1 lg:row-span-2 lg:min-h-0"
|
||
>
|
||
<h2 id="universite-konumu" className="sr-only">
|
||
{universite} kampüs konumu
|
||
</h2>
|
||
{altYazi}
|
||
</section>
|
||
<div className={KATMAN_SINIFI}>
|
||
<div className={IC_MASK_SINIFI}>{harita}</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|