diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-10-08 09:08:52 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-10-11 09:38:34 +0300 |
commit | 624ba4b9fac0d2bd0c1690000e4823448e2995c8 (patch) | |
tree | 4acda5532695b23309955a2a08075e9d59bb9e15 /docs/res | |
parent | 9232a81ec390392744653afba56fe091b5132554 (diff) | |
download | inter-624ba4b9fac0d2bd0c1690000e4823448e2995c8.tar.xz |
website: sample controls for smaller screens (still needs more love)
Diffstat (limited to 'docs/res')
-rw-r--r-- | docs/res/base.css | 1 | ||||
-rw-r--r-- | docs/res/ctxedit.css | 18 | ||||
-rw-r--r-- | docs/res/ctxedit.js | 16 |
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 => { |