fix: mobile css/map hover

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

src/main.rs

@@ -17,8 +17,8 @@ async fn main() -> Result<()> {
     }
 
     let app = Liwan::try_new(config)?;
-
     app.run_background_tasks();
+
     tokio::select! {
         res = web::start_webserver(app.clone(), s) => res,
         res = tokio::task::spawn_blocking(move || app.clone().events.process(r)) => res?

src/web/routes/event.rs

@@ -74,6 +74,10 @@ impl EventApi {
             _ => (None, None),
         };
 
+        let path = url.path().to_string();
+        let path = if path.len() > 1 && path.ends_with('/') { path.trim_end_matches('/').to_string() } else { path };
+        let fqdn = url.host().unwrap_or_default().to_string();
+
         let event = Event {
             visitor_id,
             referrer,
@@ -83,8 +87,8 @@ impl EventApi {
             created_at: chrono::Utc::now(),
             entity_id: event.entity_id,
             event: event.name,
-            fqdn: url.host().unwrap_or_default().to_string().into(),
-            path: url.path().to_string().into(),
+            fqdn: fqdn.into(),
+            path: path.into(),
             mobile: Some(useragent::is_mobile(&client)),
             platform: client.os.family.to_string().into(),
         };

src/web/webext.rs

@@ -63,6 +63,12 @@ impl<T, E: Display> PoemErrExt<T> for Result<T, E> {
 
 pub struct EmbeddedFilesEndpoint<E: RustEmbed + Send + Sync>(PhantomData<E>);
 
+impl<E: RustEmbed + Send + Sync> Default for EmbeddedFilesEndpoint<E> {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
 impl<E: RustEmbed + Send + Sync> EmbeddedFilesEndpoint<E> {
     pub fn new() -> Self {
         EmbeddedFilesEndpoint(PhantomData)

tracker/script.min.js

@@ -110,12 +110,13 @@ const trackPageviews = () => {
 		event("pageview");
 	};
 
-	if (history.pushState) {
-		const originalPushState = history.pushState;
-		history.pushState = (...args: Parameters<typeof history.pushState>) => {
-			originalPushState(...args);
-			page();
-		};
+	if (window.history.pushState) {
+		window.history.pushState = new Proxy(window.history.pushState, {
+			apply: (target, thisArg, argArray) => {
+				target.apply(thisArg, argArray);
+				page();
+			},
+		});
 		window.addEventListener("popstate", page);
 	}
 	page();

tracker/script.ts

@@ -17,7 +17,7 @@
   }
 
   > h1 {
-    font-size: 1.7rem;
+    font-size: 1.4rem;
     margin: 0;
     align-items: first baseline;
   }
@@ -34,6 +34,10 @@ div.graph {
   gap: 1rem;
   row-gap: 1rem;
   margin: 0 -0.4rem;
+
+  @media (max-width: 40rem) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .geoCard.geoCard {
@@ -75,4 +79,35 @@ div.graph {
       padding-left: 0;
     }
   }
+
+  @media (max-width: 40rem) {
+    grid-column: span 1;
+    flex-direction: column;
+    .geoTable,
+    .geoMap {
+      width: 100%;
+    }
+
+    .geoMap {
+      &::after {
+        top: unset;
+        width: 100%;
+        left: 0;
+        height: 2rem;
+        background: linear-gradient(
+          to bottom,
+          transparent,
+          var(--pico-card-background-color)
+        );
+      }
+    }
+
+    .geoTable {
+      padding: 1rem;
+      padding-top: 0;
+      > div {
+        padding: 0;
+      }
+    }
+  }
 }

web/src/components/project.module.css

@@ -1,5 +1,5 @@
 import styles from "./project.module.css";
-import "./worldmap.module.css";
+import _map from "./worldmap.module.css";
 
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { LockIcon } from "lucide-react";

web/src/components/project.tsx

@@ -39,6 +39,7 @@
 .header {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 1rem;
 
   a {
     cursor: pointer;
@@ -160,7 +161,7 @@ button.stat {
   &[data-active="true"] {
     h2 {
       text-decoration: underline;
-      font-weight: 500;
+      font-weight: 600;
     }
     h2,
     h3 {

web/src/components/projects.module.css

@@ -1,5 +1,6 @@
-.tooltipContainer {
-  all: unset;
+.tooltipContainer.tooltipContainer {
+  padding: 0;
+  background: none;
 }
 
 .worldmap {

web/src/components/worldmap.module.css

@@ -3,7 +3,9 @@
 @import "react-tooltip/dist/react-tooltip.css" layer(tooltip);
 
 @layer pico {
-  :root {
+  :root[data-theme="dark"] {
+    --pico-background-color: #0a0c10;
+    --pico-card-background-color: #141a1d;
   }
 
   @media only screen and (prefers-color-scheme: dark) {