north-star / commit
aligned the text better
src/app.js | 8 ++++++-- src/index.html | 2 +- src/style.css | 15 ++++++++++++--- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/app.js b/src/app.js index e3af922..59867bc 100644 --- a/src/app.js +++ b/src/app.js @@ -648,10 +648,14 @@ const render = () => { newArrow.style.display = 'block'; newArrow.currentAngle = null; // track the current angle for smooth rotation + const arrowLabelAnchor = document.createElement('div'); + arrowLabelAnchor.className = 'arrow-label-anchor'; + const arrowLabel = document.createElement('span'); arrowLabel.className = 'arrow-label'; arrowLabel.textContent = target.name; - newArrow.appendChild(arrowLabel); + arrowLabelAnchor.appendChild(arrowLabel); + newArrow.appendChild(arrowLabelAnchor); document.getElementById('content').appendChild(newArrow); existingArrow = newArrow; @@ -686,7 +690,7 @@ const render = () => { const arrowLabel = existingArrow.querySelector('.arrow-label'); if (arrowLabel) { arrowLabel.textContent = target.name; - arrowLabel.style.transform = `translate(-50%, -100%) rotate(${-currentArrowAngle}deg)`; + arrowLabel.style.transform = `rotate(${-currentArrowAngle}deg)`; } } diff --git a/src/index.html b/src/index.html index 67ab0ed..133a37d 100644 --- a/src/index.html +++ b/src/index.html @@ -23,7 +23,7 @@ <input id="self-name-input" name="selfName" type="text" maxlength="32" enterkeyhint="done" /> <input id="self-color-input" name="selfColor" type="color" /> </form> - <div id="default-arrow" style="display: none;" class="arrow">⇡</div> + <div id="default-arrow" style="display: none;" class="arrow">⭡</div> <div id="content"> <div class="panel-actions"> <button id="calibrate-heading-link" class="participants-toggle" type="button">Calibrate North</button> diff --git a/src/style.css b/src/style.css index d50226b..eca13bf 100644 --- a/src/style.css +++ b/src/style.css @@ -259,11 +259,20 @@ a { 0 0 8px rgba(0, 0, 0, 0.35); } -.arrow-label { +.arrow-label-anchor { position: absolute; - top: 6%; + top: 4.8%; left: 50%; - translate: -50% -100%; + translate: -50% -50%; + width: 0; + height: 0; +} + +.arrow-label { + position: absolute; + top: 0; + left: 0; + translate: -50% -50%; font-family: system-ui, sans-serif; font-size: clamp(18px, 3vmin, 34px); font-weight: 600;