Tweak reduction toolbar for phone (#162)

lidavidm · May 6, 2018 · 8cc435e · 8cc435e
1 parent 5346c3a
commit 8cc435e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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`;
         }