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 (
<>
<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>
{additionalTooltips.map((control) => (
<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 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",
label: "Search by Incident ID",
@ -300,6 +290,8 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
bubbles: true
});
document.dispatchEvent(flyToEvent);
setShowInfoBox(false);
setSelectedSuggestion(null);
toggleSearch();
};
@ -357,7 +349,7 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
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}
/>
@ -365,7 +357,7 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
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="flex justify-between items-center mb-3">
@ -373,7 +365,7 @@ export default function SearchTooltip({ onControlChange, activeControl }: Search
<Button
variant="ghost"
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}
>
<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 */}
{isFullscreen && (
<>
<Overlay position="top" className="m-0 bg-transparent shadow-none p-0 border-none">
<div className="flex justify-center">
{/* <Overlay position="top" className="m-0 bg-transparent shadow-none p-0 border-none"> */}
<div className="absolute flex w-full p-2">
<Tooltips
activeControl={activeControl}
onControlChange={handleControlChange}
@ -360,7 +360,7 @@ export default function CrimeMap() {
categories={categories}
/>
</div>
</Overlay>
{/* </Overlay> */}
{/* Pass selectedCategory, selectedYear, and selectedMonth to the sidebar */}
<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) {
return (
// <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}` }}>
<span>Low</span>
</div>