style: sync pop ups

Author: francelu

website/js/delegations.js

@@ -989,42 +989,31 @@
     const overlay = d3.select("body")
       .append("div")
       .attr("class", "medal-detail-overlay")
-      .style("position", "fixed")
-      .style("inset", "0")
-      .style("z-index", "99999")
-      .style("background", "rgba(0, 0, 0, 0.96)")
-      .style("color", "white")
-      .style("display", "flex")
-      .style("flex-direction", "column")
-      .style("align-items", "center")
-      .style("justify-content", "center")
-      .style("padding", "34px")
-      .style("box-sizing", "border-box");
-
-    const header = overlay.append("div")
-      .style("width", "min(1200px, 96vw)")
-      .style("display", "flex")
-      .style("align-items", "center")
-      .style("justify-content", "space-between")
-      .style("margin-bottom", "18px");
-
-    header.append("div")
-      .html(`
-        <div style="font-family:'Elms Sans', sans-serif; font-size:28px; font-weight:800;">
-          ${detail.medal} medals in ${detail.sport}
-        </div>
-        <div style="font-family:'Elms Sans', sans-serif; font-size:15px; color:rgba(255,255,255,0.72); margin-top:4px;">
-          ${detail.season} Olympics, ${detail.year} · grouped by ${detail.mode}
-        </div>
-      `);
+
+    const box = overlay.append("div")
+      .attr("class", "medal-detail-box")
+
+    const header = box.append("div")
+      .attr("class", "medal-detail-header");
+
+    const titleBlock = header.append("div")
+      .attr("class", "medal-detail-title-block");
+      
+    titleBlock.append("div")
+      .attr("class", "medal-detail-title")
+      .text(`${detail.medal} medals in ${detail.sport}`)
+
+    titleBlock.append("div")
+      .attr("class", "medal-detail-note")
+      .text(`${detail.season} Olympics, ${detail.year} · grouped by ${detail.mode}`);
 
     header.append("button")
       .attr("class", "medal-popup-close")
       .text("Close")
       .on("click", () => overlay.remove());
 
-    const chart = overlay.append("div")
-      .style("width", "min(1200px, 96vw)");
+    const chart = box.append("div")
+      .attr("class", "medal-detail-chart")
 
     drawDetailSankey(chart, detail);
 
@@ -1250,6 +1239,7 @@
     return text.length <= maxLength ? text : text.slice(0, maxLength - 1) + "…";
   }
 
+  //TODO: delete ?
   function getTooltip() {
     let tooltip = d3.select("body").select(".medal-tooltip");
 

website/js/geopolitics-conflicts.js

@@ -382,7 +382,6 @@
                 data: participationData,
                 xKey: "year",
                 yKey: "value",
-                title: `Participation around ${selected.year}`,
                 yLabel: "Participating countries",
                 highlightValue: selected.year,
                 tooltipFormatter: d => formatNeighborTooltip(d, "Participating countries")
@@ -741,7 +740,7 @@
     svg.append("text")
       .attr("x", margin.left)
       .attr("y", 24)
-      .attr("font-family", "Arial, sans-serif")
+      .attr("font-family", "Elms Sans, sans-serif")
       .attr("font-size", 18)
       .attr("font-weight", 700)
       .attr("fill", "white")
@@ -752,7 +751,7 @@
         .attr("x", width / 2)
         .attr("y", height / 2)
         .attr("text-anchor", "middle")
-        .attr("font-family", "Arial, sans-serif")
+        .attr("font-family", "Elms Sans, sans-serif")
         .attr("font-size", 22)
         .attr("fill", "white")
         .text("No data available");
@@ -818,7 +817,7 @@
       .call(d3.axisBottom(x).tickSizeOuter(0))
       .call(g => g.selectAll("text")
         .attr("fill", "white")
-        .attr("font-family", "Arial, sans-serif")
+        .attr("font-family", "Elms Sans, sans-serif")
         .attr("font-size", 12)
         .attr("transform", "rotate(-28)")
         .attr("text-anchor", "end"))
@@ -829,15 +828,15 @@
       .call(d3.axisLeft(y).ticks(5))
       .call(g => g.selectAll("text")
         .attr("fill", "white")
-        .attr("font-family", "Arial, sans-serif")
+        .attr("font-family", "Elms Sans, sans-serif")
         .attr("font-size", 12))
       .call(g => g.selectAll("path,line").attr("stroke", "white"));
 
     svg.append("text")
       .attr("x", margin.left)
       .attr("y", 42)
       .attr("fill", "rgba(255,255,255,0.72)")
-      .attr("font-family", "Arial, sans-serif")
+      .attr("font-family", "Elms Sans, sans-serif")
       .attr("font-size", 12)
       .text(yLabel);
   }

website/styles.css

@@ -674,6 +674,7 @@ h4 {
   color: #f4b400;
 }
 
+/* TODO: delete ? */
 .geo-tooltip {
   position: fixed;
   pointer-events: none;
@@ -690,6 +691,7 @@ h4 {
   transition: opacity 0.12s ease;
 }
 
+.medal-detail-overlay,
 .geo-popup-overlay {
   position: fixed;
   inset: 0;
@@ -702,6 +704,7 @@ h4 {
   box-sizing: border-box;
 }
 
+.medal-detail-box,
 .geo-popup-box {
   width: min(980px, 94vw);
   max-height: 88vh;
@@ -713,6 +716,7 @@ h4 {
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
 }
 
+.medal-detail-header,
 .geo-popup-header {
   display: flex;
   justify-content: space-between;
@@ -721,10 +725,12 @@ h4 {
   margin-bottom: 12px;
 }
 
+.medal-detail-title-block,
 .geo-popup-title-block {
   text-align: left;
 }
 
+.medal-detail-title,
 .geo-popup-title {
   color: white;
   font-family: "Elms Sans", sans-serif;
@@ -733,15 +739,17 @@ h4 {
   text-align: left;
 }
 
+.medal-detail-note,
 .geo-popup-note {
   margin-top: 6px;
   color: #ffd166;
   font-family: "Elms Sans", sans-serif;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.35;
   text-align: left;
 }
 
+.medal-popup-close,
 .geo-popup-close {
   background: #ffd166;
   color: #111;
@@ -753,6 +761,7 @@ h4 {
   cursor: pointer;
 }
 
+.medal-popup-close:hover,
 .geo-popup-close:hover {
   filter: brightness(1.06);
 }
@@ -914,21 +923,6 @@ h4 {
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
 }
 
-.medal-popup-close {
-  background: #ffd166;
-  color: #111;
-  border: 2px solid white;
-  border-radius: 10px;
-  padding: 8px 14px;
-  font-size: 15px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.medal-popup-close:hover {
-  filter: brightness(1.06);
-}
-
 /* =============================================
    Body types section
    =========================================== */