diyoanggara
/
MIF_E31221222
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update tooltip container reference and adjust z-index for better visibility

This commit is contained in:
vergiLgood1 2025-05-05 01:53:52 +07:00
parent 8f12715072
commit 50f42f532f
4 changed files with 10 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sigap-website/app/_components/map/controls/top/additional-tooltips.tsx
View File

@ -52,7 +52,7 @@ export default function AdditionalTooltips({
return ( return (
<> <>
<div className="z-10 bg-background rounded-md p-1 flex items-center space-x-1"> <div ref={containerRef} className="z-10 bg-background rounded-md p-1 flex items-center space-x-1">
<TooltipProvider> <TooltipProvider>
{additionalTooltips.map((control) => ( {additionalTooltips.map((control) => (
<Tooltip key={control.id}> <Tooltip key={control.id}>

18
sigap-website/app/_components/map/controls/top/search-control.tsx
View File

@ -63,16 +63,6 @@ const generateSampleData = () => {
const EXPANDED_SAMPLE_DATA = generateSampleData(); const EXPANDED_SAMPLE_DATA = generateSampleData();
const ACTIONS = [ const ACTIONS = [
{
id: "crime_id",
label: "Search by Crime ID",
icon: <Search className="h-4 w-4 text-blue-500" />,
description: "e.g., CR-12345",
category: "Search",
prefix: "CR-",
regex: /^CR-\d+(-\d{4})?$/,
placeholder: "CR-12345-2023",
},
{ {
id: "incident_id", id: "incident_id",
label: "Search by Incident ID", label: "Search by Incident ID",
@ -300,6 +290,8 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
bubbles: true bubbles: true
}); });
document.dispatchEvent(flyToEvent); document.dispatchEvent(flyToEvent);
setShowInfoBox(false);
setSelectedSuggestion(null);
toggleSearch(); toggleSearch();
}; };
@ -357,7 +349,7 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
className="fixed inset-0 bg-black/40 backdrop-blur-sm z-40" className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center"
onClick={toggleSearch} onClick={toggleSearch}
/> />
@ -365,7 +357,7 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.9 }} exit={{ opacity: 0, scale: 0.9 }}
className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-[600px] max-w-[90vw]" className="fixed transform top-1/4 left-1/4 z-50 w-full max-w-lg sm:max-w-xl md:max-w-3xl"
> >
<div className="bg-background border border-border rounded-lg shadow-xl p-4"> <div className="bg-background border border-border rounded-lg shadow-xl p-4">
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-3">
@ -373,7 +365,7 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-7 w-7 rounded-full hover:bg-slate-200" className="h-7 w-7 rounded-full hover:bg-slate-200 hover:text-background"
onClick={toggleSearch} onClick={toggleSearch}
> >
<XCircle size={18} /> <XCircle size={18} />

6
sigap-website/app/_components/map/crime-map.tsx
View File

@ -345,8 +345,8 @@ export default function CrimeMap() {
{/* Components that are only visible in fullscreen mode */} {/* Components that are only visible in fullscreen mode */}
{isFullscreen && ( {isFullscreen && (
<> <>
<Overlay position="top" className="m-0 bg-transparent shadow-none p-0 border-none"> {/* <Overlay position="top" className="m-0 bg-transparent shadow-none p-0 border-none"> */}
<div className="flex justify-center"> <div className="absolute flex w-full p-2">
<Tooltips <Tooltips
activeControl={activeControl} activeControl={activeControl}
onControlChange={handleControlChange} onControlChange={handleControlChange}
@ -360,7 +360,7 @@ export default function CrimeMap() {
categories={categories} categories={categories}
/> />
</div> </div>
</Overlay> {/* </Overlay> */}
{/* Pass selectedCategory, selectedYear, and selectedMonth to the sidebar */} {/* Pass selectedCategory, selectedYear, and selectedMonth to the sidebar */}
<CrimeSidebar <CrimeSidebar

2
sigap-website/app/_components/map/legends/map-legend.tsx
View File

@ -9,7 +9,7 @@ interface MapLegendProps {
export default function MapLegend({ position = "bottom-right" }: MapLegendProps) { export default function MapLegend({ position = "bottom-right" }: MapLegendProps) {
return ( return (
// <Overlay position={position}> // <Overlay position={position}>
<div className="flex flex-row text-xs font-semibold font-sans text-background"> <div className="flex flex-row text-xs font-semibold font-sans text-background z-0">
<div className={`flex items-center gap-1.5 py-0 px-8 rounded-l-md border-y border-1 `} style={{ backgroundColor: `${CRIME_RATE_COLORS.low}` }}> <div className={`flex items-center gap-1.5 py-0 px-8 rounded-l-md border-y border-1 `} style={{ backgroundColor: `${CRIME_RATE_COLORS.low}` }}>
<span>Low</span> <span>Low</span>
</div> </div>