Fix UX bug, start implementing map page #63 #53 #107 #109

iodepo · Feb 13, 2024 · 4adc876 · 4adc876
1 parent 8f823fe
commit 4adc876
Show file tree

Hide file tree

Showing 32 changed files with 522,350 additions and 378 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,9 +16,13 @@
     "bootstrap-icons": "^1.9.0",
     "bootstrap-scss": "^5.1.3",
     "element-resize-event": "^3.0.3",
+    "geojson2h3": "^1.2.0",
+    "geolib": "^3.3.4",
+    "h3-js": "^4.1.0",
     "history": "^4.10.1",
     "lodash": "^4.4.2",
     "mapbox-gl": "^2.9",
+    "maplibre-gl": "^4.0.0",
     "nodemon": "^3.0.1",
     "papaparse": "^5.4.1",
     "react": "^18.1.0",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -18,10 +18,29 @@
         color: white;
       }
     </style>
+    <!-- Matomo -->
+    <script>
+      var _paq = (window._paq = window._paq || []);
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(["trackPageView"]);
+      _paq.push(["enableLinkTracking"]);
+      (function () {
+        var u = "//matomo.trust-it.it/";
+        _paq.push(["setTrackerUrl", u + "matomo.php"]);
+        _paq.push(["setSiteId", "1"]);
+        var d = document,
+          g = d.createElement("script"),
+          s = d.getElementsByTagName("script")[0];
+        g.async = true;
+        g.src = u + "matomo.js";
+        s.parentNode.insertBefore(g, s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script>
+    <!-- <script>
       //open first popover available in your page
       let popover = document.getElementById("popover");
       popover.style.display = "block";
@@ -45,7 +64,7 @@ <h1>This is still a beta version.</h1>
       >
         close this warning
       </a>
-    </div>
+    </div> -->
     <div id="root"></div>
   </body>
 </html>
diff --git a/frontend/src/components/home/CardTopic.js b/frontend/src/components/home/CardTopic.js
@@ -27,6 +27,24 @@ const CardTopic = (props) => {
             border: 2,
             borderColor: palette + "borderColor",
             display: "flex",
+            transition: "transform 0.3s",
+            "&:hover": {
+              transform: "scale(1.1)",
+            },
+            "@keyframes pulse": {
+              "0%": {
+                transform: "scale(1)",
+              },
+              "50%": {
+                transform: "scale(1.1)",
+              },
+              "100%": {
+                transform: "scale(1)",
+              },
+            },
+            "&:hover .MuiAvatar-root": {
+              animation: "pulse 1s infinite",
+            },
           }}
           elevation={0}
         >

diff --git a/frontend/src/components/home/MapViewerEntrypoint.js b/frontend/src/components/home/MapViewerEntrypoint.js
@@ -5,11 +5,18 @@ import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import { useAppTranslation } from "context/context/AppTranslation";
 import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
+import MapContainer from "components/map-view/MapContainer";
+import { useNavigate } from "react-router-dom";
 
 export default function MapViewerEntrypoint() {
   const translationState = useAppTranslation();
-  const palette = "custom.homepage.footer.";
+  const palette = "custom.homepage.mapViewerEntrypoint.";
 
+  const navigate = useNavigate();
+
+  const goToMap = () => {
+    navigate(`/map-viewer`);
+  };
   return (
     <Container
       maxWidth="xl"
@@ -29,19 +36,21 @@ export default function MapViewerEntrypoint() {
           >
             <Box
               sx={{
-                backgroundColor: "white",
                 height: "100%",
                 borderRadius: "30px",
                 border: "6px solid black",
                 width: "100%",
+                position: "relative",
               }}
-            ></Box>
+            >
+              <MapContainer isHome={true} />
+            </Box>
           </Box>
         </Grid>
         <Grid item xs={5}>
           <Typography
             fontWeight={{ xs: 800, lg: 700 }}
-            sx={{ fontSize: "36px", color: "white" }}
+            sx={{ fontSize: "36px", color: palette + "colorTypography" }}
             gutterBottom
           >
             Lorem ipsum dolor sit amet consecte Mauris.
@@ -60,12 +69,12 @@ export default function MapViewerEntrypoint() {
             sx={{
               borderRadius: { xs: 2, lg: 1 },
               width: { xs: "100%", lg: "auto" },
-              backgroundColor: "#40AAD3",
+              backgroundColor: palette + "buttonBgColor",
               marginTop: 2,
               textTransform: "none",
             }}
             onClick={() => {
-              goToCatalogue("CreativeWork");
+              goToMap("CreativeWork");
             }}
             endIcon={<ArrowRightAltIcon />}
           >

diff --git a/frontend/src/components/home/SearchHubEntrypoint.js b/frontend/src/components/home/SearchHubEntrypoint.js
@@ -3,20 +3,21 @@ import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
-import { useSearchParam } from "utilities/generalUtility";
 import { useNavigate } from "react-router-dom";
+import { useSearchParam } from "../../utilities/generalUtility";
 
 export default function SearchHubEntrypoint() {
   const [region, setRegion] = useSearchParam("region", "global");
   const navigate = useNavigate();
   const goToCatalogue = (type) => {
     navigate(`/results/${type}?${region ? "region=" + region : ""}`);
   };
+  const palette = "custom.homepage.searchHubEntrypoint.";
   return (
     <Container maxWidth="md" sx={{ marginBottom: 6 }}>
       <Typography
         fontWeight={{ xs: 800, lg: 700 }}
-        sx={{ fontSize: "36px", color: "white" }}
+        sx={{ fontSize: "36px", color: palette + "colorTypography" }}
         gutterBottom
       >
         Lorem ipsum dolor sit amet consecte Mauris.
@@ -35,7 +36,7 @@ export default function SearchHubEntrypoint() {
         sx={{
           borderRadius: { xs: 2, lg: 1 },
           width: { xs: "100%", lg: "auto" },
-          backgroundColor: "#40AAD3",
+          backgroundColor: palette + "buttonBgColor",
           marginTop: 2,
           textTransform: "none",
         }}

diff --git a/frontend/src/components/home/TypesCount.js b/frontend/src/components/home/TypesCount.js
@@ -85,11 +85,16 @@ export default function TypesCount() {
                 <Grid item xs={5}>
                   <SearchHubEntrypoint />
                 </Grid>
-                <Grid item container spacing={2} xs={7} sx={{ p: "24px" }}>
+                <Grid
+                  item
+                  container
+                  spacing={2}
+                  xs={7} /* sx={{ p: "24px" }} */
+                >
                   <Grid item xs={12}>
                     <Search />
                   </Grid>
-                  <Grid item container spacing={2} p={3} xs={12}>
+                  <Grid item container spacing={2} xs={12}>
                     {CATEGORIES.map((cat, index) => {
                       if (cat.id !== "SpatialData")
                         return (