Merge pull request #1169 from nowcommunity/fix/1168-freeze-main-page-map

Freeze front page map image

frontend/src/components/FrontPage.tsx

@@ -4,7 +4,6 @@ import {
   useGetStatisticsQuery,
 } from '../redux/statisticsReducer'
 import { ENV } from '@/util/config'
-import { useEffect, useRef } from 'react'
 
 import mapSvg from '../resource/map.svg'
 import logo from '../resource/nowlogo.jpg'
@@ -14,7 +13,6 @@ import { useGetChangelogQuery } from '@/redux/changelogReducer'
 import { useUser } from '@/hooks/user'
 
 export const FrontPage = () => {
-  const mapContainerRef = useRef<HTMLDivElement | null>(null)
   const user = useUser()
   const isLoggedIn = Boolean(user.token)
   const { data: statisticsQueryData } = useGetStatisticsQuery()
@@ -24,20 +22,6 @@ export const FrontPage = () => {
     useGetLocalityStatisticsQuery()
   const { data: changelogData } = useGetChangelogQuery(undefined, { skip: !isLoggedIn })
 
-  // Map hover effect
-  useEffect(() => {
-    if (!mapContainerRef.current) return
-    mapContainerRef.current.onmousemove = (e: MouseEvent) => {
-      if (!mapContainerRef.current) return
-      const rect = mapContainerRef.current.getBoundingClientRect()
-      const height = rect.bottom - rect.top
-      const width = rect.right - rect.left
-
-      mapContainerRef.current?.style.setProperty('--x', `${((e.clientX - rect.left) / width) * 100}%`)
-      mapContainerRef.current?.style.setProperty('--y', `${((e.clientY - rect.top) / height) * 100}%`)
-    }
-  }, [])
-
   if (ENV === 'dev') {
     document.title = 'NOW Database (dev)'
   } else {
@@ -81,7 +65,7 @@ export const FrontPage = () => {
           <b>{occurrenceLabels.plural}</b> {statisticsQueryData && statisticsQueryData.localitySpeciesCount}
         </span>
       </div>
-      <div className="map-container" ref={mapContainerRef}>
+      <div className="map-container">
         <div className="map">
           <img src={mapSvg} />
         </div>

frontend/src/styles/FrontPage.css

@@ -77,11 +77,6 @@
   width: 100%;
 }
 
-#front-page .map-container:hover .map img {
-  transform: translateX(calc(var(--x) * (-1 / 1.5))) translateY(calc(var(--y) * (-1 / 1.5))) scale(1.5);
-  transform-origin: 0 0;
-}
-
 #front-page .additional-info {
   display: flex;
   justify-content: stretch;