From 3d964ca10ef25fab69f2d9c0dcd23ad1517c9dca Mon Sep 17 00:00:00 2001
From: baripembo <erikawei@gmail.com>
Date: Fri, 15 Apr 2022 09:49:12 -0400
Subject: [PATCH] mobile tooltip tweaks

---
 taxes-and-the-ultra-wealthy/script.js  | 43 ++++++++++++++++++-------
 taxes-and-the-ultra-wealthy/styles.css | 44 +++++++++++++++++++++++++-
 2 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/taxes-and-the-ultra-wealthy/script.js b/taxes-and-the-ultra-wealthy/script.js
index ec286af..1e42690 100644
--- a/taxes-and-the-ultra-wealthy/script.js
+++ b/taxes-and-the-ultra-wealthy/script.js
@@ -389,25 +389,41 @@ let tooltip = d3.select('body').append('div')
     .attr('class', 'tooltip')
     .style('opacity', 0);
 
+let tooltipContent = tooltip.append('div')
+    .attr('class', 'tooltip-content');
+
+tooltip.append('div')
+    .attr('class', 'tooltip-close')
+    .html('x');
+
+tooltip.on('click', function() {
+    tooltip.transition()
+        .duration(200)
+        .style('opacity', 0);
+});
+
 function showTooltip(selection, curText){ 
     selection
         .on('mouseover', function(event) {
             tooltip.transition()
                 .duration(200)
                 .style('opacity', 1);
-            tooltip.html(curText);
+            tooltip.classed('active', true);
+            tooltipContent.html(curText);
         })
         .on('mousemove', function(event) {
             let rect = d3.select('.tooltip').node().getBoundingClientRect();
+            let leftPos = event.pageX - rect.width/2;
+
+            if ((leftPos + rect.width) > window.innerWidth) { //make sure tooltip doesnt go off right side of screen
+                leftPos -= (leftPos + rect.width) - window.innerWidth;
+            }
             tooltip
-                .style('left', `${event.pageX - rect.width/2}px`)
-                .style('top', `${event.pageY - rect.height - 10}px`);
-        })
-        .on('mouseout', function(d) {
-            tooltip.transition()
-                .duration(200)
-                .style('opacity', 0);
+                .style('left', `${leftPos<0 ? 0 : leftPos}px`)
+                .style('top', `${event.pageY - rect.height - 20}px`);
+            tooltip.classed('active', true);
         })
+        .on('mouseout', closeTooltip)
         .on('keydown', function(event) {
             tooltip.html(curText);
             let rect = d3.select('.tooltip').node().getBoundingClientRect();
@@ -417,13 +433,16 @@ function showTooltip(selection, curText){
                     .style('left', `${document.body.scrollLeft + boundingRect.x + boundingRect.width/2 -rect.width/2}px`)
                     .style('top', `${document.body.scrollTop + (boundingRect.y - boundingRect.height/2) - rect.height}px`)
                     .transition().duration(200).style('opacity',1);
+                tooltip.classed('active', true);
             } else if (event.keyCode == 27) { // escape key
-                tooltip.transition().duration(200).style('opacity',0);
+                closeTooltip();
             }
         })
-        .on('focusout', function() {
-            tooltip.transition().duration(200).style('opacity',0);
-        })
+        .on('focusout', closeTooltip)
+}
+function closeTooltip() {
+    tooltip.transition().duration(200).style('opacity',0);
+    tooltip.classed('active', false);
 }
 function removeTooltip(selection){ 
     selection
diff --git a/taxes-and-the-ultra-wealthy/styles.css b/taxes-and-the-ultra-wealthy/styles.css
index b6c47aa..9bda78c 100644
--- a/taxes-and-the-ultra-wealthy/styles.css
+++ b/taxes-and-the-ultra-wealthy/styles.css
@@ -133,7 +133,10 @@ span.hint {
     pointer-events: none;
     text-align: center;
     width: 300px;
-    z-index: 2;
+    z-index: 200;
+}
+.tooltip.active {
+    pointer-events: auto;
 }
 .tooltip::after, .slider-tooltip::after {
     background: #FFFAF4;
@@ -159,6 +162,13 @@ span.hint {
     color: var(--blue-darkest);
 }
 
+.tooltip-close {    
+    display: none;
+    position: absolute;
+    right: 10px;
+    top: 5px;
+}
+
 /******************************/
 /******** RANGE INPUTS ********/
 /******************************/
@@ -1573,6 +1583,10 @@ section[game='break-the-cycle'] #cta {
         width: 115%; /* goes into the margin-right */
     }
 
+    section.game-body[game="file-taxes"] .controls label {
+        font-size: 1rem;
+    }
+
     section[game='break-the-cycle'] h2 {
         font-size: 1.7rem;
     }
@@ -1616,7 +1630,35 @@ section[game='break-the-cycle'] #cta {
         margin-bottom: .2rem;
     }
 
+    section.overlay#share .share-block {
+        padding: 0 40px;
+    }
+    section.overlay#share .share-block .btn-group {
+        justify-content: center;
+    }
+    .share-buttons {
+        gap: 10px;
+    }
+    .share-block .copy-url-wrapper .share_item__btn__wrapper {
+        min-width: 115px;
+        width: auto;
+    }
     .share_item__btn__wrapper {
         width: 100%;
     }
+    .share_item__btn__wrapper svg {
+        margin-right: 0.5rem;
+    }
+
+    .tooltip {
+        font-size: 1rem;
+        line-height: 1.4rem;
+        padding-top: 25px;
+    }
+    .tooltip-close {
+        color: #999;
+        font-family: sans-serif;
+        font-weight: bold;
+        display: block;
+    }
 }