From 8cc435e6bd483ceea5b6d18bdc7588a62cf730f2 Mon Sep 17 00:00:00 2001
From: David Li <li.davidm96@gmail.com>
Date: Sun, 6 May 2018 12:57:02 -0400
Subject: [PATCH] Tweak reduction toolbar for phone (#162)

---
 index.html              |  9 ++++++---
 src/index.js            |  1 +
 src/ui/reductToolbar.js | 12 ++++++++++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index a4617b6c..987dbeb7 100644
--- a/index.html
+++ b/index.html
@@ -15,14 +15,14 @@
          button, #nav > a {
              font-family: inherit;
              background: lightblue;
-             font-size: 0.9rem;
-             padding: 0.25rem;
+             font-size: 0.9em;
+             padding: 0.25em;
              border: 1px solid #594764;
              border-top: 0;
              border-bottom: 0;
              border-radius: 10px;
              cursor: pointer;
-             line-height: 2rem;
+             line-height: 2em;
              text-align: center;
          }
 
@@ -193,6 +193,9 @@
              box-shadow: 0 5px 0 black;
              border-radius: 10px;
          }
+         .mobile-phone .reduct-toolbar {
+             font-size: 2em;
+         }
 
          #reduct-toolbar-proto {
              display: none;
diff --git a/src/index.js b/src/index.js
index 0b6e9f01..7560068c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -69,6 +69,7 @@ function initialize() {
     document.body.appendChild(canvas);
 
     if (gfx.viewport.IS_PHONE) {
+        document.body.classList.add("mobile-phone");
         canvas.style.width = "100%";
     }
 
diff --git a/src/ui/reductToolbar.js b/src/ui/reductToolbar.js
index fc832552..095c0efe 100644
--- a/src/ui/reductToolbar.js
+++ b/src/ui/reductToolbar.js
@@ -82,10 +82,18 @@ export default class ReductToolbar {
             const absPos = gfx.absolutePos(view);
             const absSize = gfx.absoluteSize(view);
 
-            toolbar.style.top = `${absPos.y + absSize.h + offsetY}px`;
-            const posLeft = (absPos.x - (toolbar.clientWidth / 2)) +
+            let posTop = absPos.y + absSize.h + offsetY;
+            let posLeft = (absPos.x - (toolbar.clientWidth / 2)) +
                   (absSize.w / 2) +
                   offsetX;
+
+            // TODO: refactor this to stage?
+            if (gfx.viewport.IS_PHONE) {
+                posTop *= 1.33;
+                posLeft *= 1.33;
+            }
+
+            toolbar.style.top = `${posTop}px`;
             toolbar.style.left = `${posLeft}px`;
         }