website: sample controls for smaller screens (still needs more love)

3 files changed, 22 insertions, 13 deletions

diff --git a/docs/res/base.css b/docs/res/base.css
index 9580ac3e9..264de8bfd 100644
--- a/docs/res/base.css
+++ b/docs/res/base.css
@@ -268,6 +268,7 @@ h1 > a, h2 > a, h3 > a {
   .row.menu ul li {
     margin-right: 30px;
     margin-bottom: -1px;
+    text-indent: -0.5px;
   }
     .row.menu ul li > a {
       color: inherit;
diff --git a/docs/res/ctxedit.css b/docs/res/ctxedit.css
index 26ec13517..e0fadddbe 100644
--- a/docs/res/ctxedit.css
+++ b/docs/res/ctxedit.css
@@ -26,10 +26,14 @@
   opacity:0;
   transition: 90ms all cubic-bezier(0.25, 0.47, 0.44, 0.93);
   transform: translate(0, var(--strip-height));
+
+  outline: none;
+  pointer-events: none;
 }
 #ctxedit-ui.visible {
   opacity:1;
   transform: translate(0, 0);
+  pointer-events: initial;
 }
 #ctxedit-ui .wrapper {
   display: flex;
@@ -180,6 +184,20 @@
   #ctxedit-ui .button.dismiss-button { background-image: url(dismiss.svg); }
 
 
+
+/* narrow viewports */
+@media only screen and (max-width: 639px) {
+  #ctxedit-ui {
+    background: black;
+    height: calc(var(--strip-height) * 4);
+  }
+  #ctxedit-ui .wrapper {
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+}
+
+
 .font-preload {
   position: fixed;
   display: block;
diff --git a/docs/res/ctxedit.js b/docs/res/ctxedit.js
index 6d91b4272..2f2b52574 100644
--- a/docs/res/ctxedit.js
+++ b/docs/res/ctxedit.js
@@ -186,23 +186,12 @@ class Editable {
     }
 
     // left indent
-    let leftMargin = 0
-    // TODO: Find a formula for this: F(size) -> leftMargin
     // TODO: Consider making this part of dynamic metrics.
-         if (size >= 162) { leftMargin = -10; }
-    else if (size >= 146) { leftMargin = -9; }
-    else if (size >= 130) { leftMargin = -8; }
-    else if (size >= 114) { leftMargin = -7; }
-    else if (size >= 98)  { leftMargin = -6; }
-    else if (size >= 79)  { leftMargin = -5; }
-    else if (size >= 64)  { leftMargin = -4; }
-    else if (size >= 48)  { leftMargin = -3; }
-    else if (size >= 32)  { leftMargin = -2; }
-    else if (size >= 16)  { leftMargin = -1; }
+    let leftMargin = size / -16
     if (leftMargin == 0) {
       this.el.style.marginLeft = null
     } else {
-      this.el.style.marginLeft = leftMargin + 'px'
+      this.el.style.marginLeft = leftMargin.toFixed(1) + 'px'
     }
   }
 
@@ -347,6 +336,7 @@ class CtxEdit {
 
       input.addEventListener('pointerdown', showValTip)
       input.addEventListener('pointerup', hideValTip)
+      input.addEventListener('pointercancel', hideValTip)
 
       let timer = null
       input.addEventListener('input', ev => {