Fix tooltip close button rendering on mobile. (Closes #11)

dsifford · Mar 25, 2016 · 011e52a · 011e52a
1 parent faf20c5
commit 011e52a
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 13 deletions.
diff --git a/inc/css/shortcodes.css b/inc/css/shortcodes.css
@@ -33,20 +33,55 @@
 	pointer-events: none;
 }
 
-.abt_tooltip_touch_close:before {
+.abt_tooltip_touch_close-container {
+	width: 50px;
+	height: 50px;
 	position: absolute;
-	color: #f1f1f1;
-	content: '✖';
 	top: -10px;
-	text-align: center;
-	background: #555;
-	width: 24px;
-	height: 24px;
-	border-radius: 50px;
 	right: -10px;
-	font: 20px monospace;
+	text-align: right;
 }
 
+.abt_tooltip_touch_close {
+	position: relative;
+	border-radius: 50%;
+    width: 26px;
+    height: 26px;
+	box-sizing: border-box;
+	display: inline-block;
+	vertical-align: middle;
+	font-style: normal;
+	color: #f1f1f1;
+	background: #555;
+	text-indent: -9999px;
+	transform: rotate(45deg);
+}
+
+.abt_tooltip_touch_close:before {
+	width: 14px;
+	content: '';
+	pointer-events: none;
+	height: 2px;
+	box-shadow: inset 0 0 0 32px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.abt_tooltip_touch_close:after {
+	height: 14px;
+	content: '';
+	pointer-events: none;
+	width: 2px;
+	box-shadow: inset 0 0 0 32px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+
 
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */

diff --git a/inc/js/peer-review.js b/inc/js/peer-review.js
@@ -89,12 +89,15 @@ var ABT_Frontend;
             tooltipArrow.className = 'abt_tooltip_arrow';
             if (this._isTouchDevice()) {
                 var closeButton = document.createElement('div');
+                var touchContainer = document.createElement('div');
+                touchContainer.className = 'abt_tooltip_touch_close-container';
                 closeButton.className = 'abt_tooltip_touch_close';
-                closeButton.addEventListener('touchend', function () { return tooltip.remove(); });
+                touchContainer.addEventListener('touchend', function () { return tooltip.remove(); });
                 tooltip.style.left = '0';
                 tooltip.style.right = '0';
                 tooltip.style.maxWidth = '90%';
-                tooltip.appendChild(closeButton);
+                touchContainer.appendChild(closeButton);
+                tooltip.appendChild(touchContainer);
                 document.body.appendChild(tooltip);
                 tooltip.appendChild(tooltipArrow);
                 tooltipArrow.style.left = "calc(" + rect.left + "px - 5% + " + ((rect.right - rect.left) / 2) + "px - 3px)";

diff --git a/inc/js/peer-review.ts b/inc/js/peer-review.ts
@@ -131,13 +131,17 @@ module ABT_Frontend {
       if (this._isTouchDevice()) {
 
         let closeButton: HTMLDivElement = document.createElement('div');
+        let touchContainer: HTMLDivElement = document.createElement('div');
+        touchContainer.className = 'abt_tooltip_touch_close-container';
         closeButton.className = 'abt_tooltip_touch_close';
-        closeButton.addEventListener('touchend', () => tooltip.remove());
+        touchContainer.addEventListener('touchend', () => tooltip.remove());
 
         tooltip.style.left = '0';
         tooltip.style.right = '0';
         tooltip.style.maxWidth = '90%'
-        tooltip.appendChild(closeButton);
+        touchContainer.appendChild(closeButton);
+        tooltip.appendChild(touchContainer);
+        // tooltip.appendChild(closeButton);
         document.body.appendChild(tooltip);
         tooltip.appendChild(tooltipArrow);