From 91daed42c4602371ecc8560df8646de49acaaa52 Mon Sep 17 00:00:00 2001 From: Arne Keller Date: Wed, 29 Sep 2021 10:15:51 +0200 Subject: [PATCH] Optimize frontend script and style --- frontend/src/mathjax-proof-tree.ts | 17 ++++++++--------- frontend/styles/view/main/upper-bar.css | 2 ++ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/frontend/src/mathjax-proof-tree.ts b/frontend/src/mathjax-proof-tree.ts index 2b536b5..431d2cd 100644 --- a/frontend/src/mathjax-proof-tree.ts +++ b/frontend/src/mathjax-proof-tree.ts @@ -304,14 +304,9 @@ class MathjaxProofTree extends MathjaxAdapter { if (explainer) { const ctm1 = svg.getBoundingClientRect(); const ctm2 = this.defElBackground!.getBoundingClientRect(); - explainer.style.left = (ctm2.left - ctm1.left) + "px"; - explainer.style.top = (ctm2.bottom - ctm1.top) + "px"; - // TODO(performance): this should be more efficient, but somehow flickers - /* - const dx = (ctm2.left - ctm1.left) - explainer.offsetLeft; - const dy = (ctm2.bottom - ctm1.top) - explainer.offsetTop; - explainer.style.transform = "translate(" + dx + "px," + dy + "px)"; - */ + const dx = (ctm2.left - ctm1.left) - explainer.offsetLeft; + const dy = (ctm2.bottom - ctm1.top) - explainer.offsetTop; + explainer.style.transform = "translate(" + dx + "px," + dy + "px)"; } }); // @ts-ignore @@ -569,7 +564,11 @@ class MathjaxProofTree extends MathjaxAdapter { } this.shadowRoot! .querySelectorAll(".typicalc-definition")! - .forEach((it) => it.style.display = "none"); + .forEach((it) => { + if (it.style) { + it.style.display = "none" + } + }); let defElBackground = this.shadowRoot!.getElementById(this.hoverTextBackgroundElID); if (defElBackground) { defElBackground.parentElement!.removeChild(defElBackground); diff --git a/frontend/styles/view/main/upper-bar.css b/frontend/styles/view/main/upper-bar.css index 8898f3a..3a98600 100644 --- a/frontend/styles/view/main/upper-bar.css +++ b/frontend/styles/view/main/upper-bar.css @@ -20,6 +20,8 @@ #input-bar { width: 75%; + /* require a larger width on small screens! */ + min-width: min(100%, 1100px); flex-grow: 1; align-items: flex-end; padding: 0 1em;