mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

fix(map): optimize hit areas for desktop mouse clusters and add touch events for mobile responsiveness
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 27s
Details
Build & Deploy / 🧪 QA (push) Successful in 1m21s
Details
Build & Deploy / 🏗️ Build (push) Successful in 2m31s
Details
Build & Deploy / 🚀 Deploy (push) Successful in 29s
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 53s
Details
Build & Deploy / 🔔 Notify (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-06-19 00:02:13 +02:00
parent e677089ff9
commit afe3565155
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/blocks/InteractiveGermanyMap.tsx
View File

@@ -165,10 +165,12 @@ export function InteractiveGermanyMap({
</div>
{/* Minor Location Markers (The 100+ generic projects) */}
{finalLocations.filter(l => l.type === 'minor_node').map((loc, idx) => (
{finalLocations.filter(l => l.type === 'minor_node').map((loc, idx) => {
const isActive = activeLocation === loc;
return (
<div
key={`minor-${idx}`}
className="absolute z-10 group/minor cursor-pointer w-10 h-10 flex items-center justify-center"
className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
style={{
left: `${loc.x}%`,
top: `${loc.y}%`,
@@ -176,12 +178,13 @@ export function InteractiveGermanyMap({
}}
onMouseEnter={() => handleMouseEnter(loc)}
onMouseLeave={handleMouseLeave}
onTouchStart={() => handleMouseEnter(loc)}
onClick={() => handleMouseEnter(loc)}
>
<div className="w-1.5 h-1.5 bg-primary/80 rounded-full group-hover/minor:bg-white group-hover/minor:scale-150 transition-all duration-300" />
<div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${isActive ? 'bg-white scale-150 shadow-[0_0_10px_rgba(130,237,32,1)]' : 'bg-primary/80 group-hover/minor:bg-white group-hover/minor:scale-150'}`} />
<div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
</div>
))}
)})}
{/* Major Location Markers (HQ, Branch, Project) */}
{finalLocations.filter(l => l.type !== 'minor_node').map((loc, idx) => {
@@ -192,10 +195,11 @@ export function InteractiveGermanyMap({
return (
<div
key={loc.id}
className={`absolute transform -translate-x-1/2 -translate-y-1/2 group/pin cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20'}`}
className={`absolute transform -translate-x-1/2 -translate-y-1/2 group/pin cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20 hover:z-40'}`}
style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
onMouseEnter={() => handleMouseEnter(loc)}
onMouseLeave={handleMouseLeave}
onTouchStart={() => handleMouseEnter(loc)}
onClick={() => handleMouseEnter(loc)}
>
{/* Ping Animation for HQ / Branch */}