Merge pull request #63 from UW-Macrostrat/scroll

Page change scroll

Author: davidsklar99

pages/+Page.client.ts

@@ -2,9 +2,10 @@ import { Image, Footer } from "~/components/general";
 import "@macrostrat/style-system";
 import h from "./main.module.sass";
 import "@macrostrat/style-system";
+import { useEffect } from "react";
 
 export function Page()  {
-    return h("div", { className: "main-page" }, [
+    return h("div", { className: "main-page"}, [
       h("div", { className: "new_container field" }, [
           h("div", { className: "mask" }, [
             h(Image, { src: "main-page/field.jpg", className: "start-img back-img", alt: "Field" }),

src/components/general/index.ts

@@ -10,9 +10,20 @@ import mapboxgl from "mapbox-gl";
 import { SETTINGS } from "@macrostrat-web/settings";
 import { rockdApiURL, rockdApiOldURL } from "@macrostrat-web/settings";
 import { useState } from "react";
+import { navigate } from "vike/client/router";
 
 export function Footer() {
-  const isDarkMode = useDarkMode().isEnabled;
+  const footerLinks1 = [
+    { href: "/", icon: "home", text: "Home" },
+    { href: "/explore", icon: "geosearch", text: "Explore" },
+    { href: "/trip/1", icon: "route", text: "Trip" },
+  ];
+
+  const footerLinks2 = [
+    { href: "/metrics", icon: "chart", text: "Metrics" },
+    { href: "/terms", icon: "manual", text: "Terms and Conditions" },
+    { href: "/privacy", icon: "lock", text: "Privacy" },
+  ];
 
   return h("div", { className: "footer" }, [
     h("div", { className: "titles" }, [
@@ -32,83 +43,32 @@ export function Footer() {
       ]),
     ]),
     h("div", { className: "footer-links" }, [
-      h("ul", [
-        h(
-          "li",
-          h("a", { href: "/" }, [
-            h(Icon, {
-              className: "footer-icon" + (isDarkMode ? "icon-dark-mode" : ""),
-              icon: "home",
-              style: { color: "white" },
-            }),
-            h("p", "Home"),
-          ])
-        ),
-        h(
-          "li",
-          h("a", { href: "/explore" }, [
-            h(Icon, {
-              className: "footer-icon" + (isDarkMode ? "icon-dark-mode" : ""),
-              icon: "geosearch",
-              style: { color: "white" },
-            }),
-            h("p", "Explore"),
-          ])
-        ),
-        h(
-          "li",
-          h("a", { href: "/trip/1" }, [
-            h(Icon, {
-              className: "footer-icon" + (isDarkMode ? "icon-dark-mode" : ""),
-              icon: "route",
-              style: { color: "white" },
-            }),
-            h("p", "Trip"),
-          ])
-        ),
-      ]),
-      h("ul", [
-        h(
-          "li",
-          h("a", { href: "/metrics" }, [
-            h(Icon, {
-              className: "footer-icon" + (isDarkMode ? "icon-dark-mode" : ""),
-              icon: "chart",
-              style: { color: "white" },
-            }),
-            h("p", "Metrics"),
-          ])
-        ),
-        h(
-          "li",
-          h("a", { href: "/terms" }, [
-            h(Icon, {
-              className: "footer-icon" + (isDarkMode ? "icon-dark-mode" : ""),
-              icon: "manual",
-              style: { color: "white" },
-            }),
-            h("p", "Terms and Conditions"),
-          ])
-        ),
-        h(
-          "li",
-          h("a", { href: "/privacy" }, [
-            h(Icon, {
-              className: "footer-icon" + (isDarkMode ? "icon-dark-mode" : ""),
-              icon: "lock",
-              style: { color: "white" },
-            }),
-            h("p", "Privacy"),
-          ])
-        ),
-      ]),
+      h("ul", footerLinks1.map((props) => h(FooterLink, props))),
+      h("ul", footerLinks2.map((props) => h(FooterLink, props))),
     ]),
     h("div.dark-mode", [
       h(DarkModeButton, { className: "dark-mode-button", showText: true }),
     ]),
   ]);
 }
 
+function FooterLink({ href, icon, text }) {
+  const isDarkMode = useDarkMode().isEnabled;
+
+  return h("li", { onClick: (e) => {
+      e.preventDefault(); 
+      window.open(href, "_self"); 
+  }}, [
+    h(Icon, {
+      className: "footer-icon",
+      icon,
+      style: { color: isDarkMode ? "black" : "white" },
+    }),
+    h("p", text),
+  ]);
+}
+
+
 export function Image(props: ImageProps) {
     const { src, className, width, height, onClick, alt } = props
    const [hasError, setHasError] = useState(false);

src/components/general/layout.module.sass

@@ -65,13 +65,10 @@
     .footer-icon
       filter: var(--anti-img-color)
 
-    a 
-      color: var(--panel-text)
+    li
       display: flex
       gap: 5px
-
-      &:hover
-        color: var(--panel-text)
+      cursor: pointer
 
 .row
   width: 100%