Merge pull request #37 from ok2/codex/fix-analog-clock-tick-marker-spacing-and-layout
This commit is contained in:
commit
b7a074a75d
10
clock.js
10
clock.js
@ -41,7 +41,8 @@
|
||||
}
|
||||
|
||||
// Position markers based on the current clock size
|
||||
const markerRadius = clock.offsetWidth / 2 - 20;
|
||||
const borderOffset = clock.offsetWidth > 300 ? 30 : 20;
|
||||
const markerRadius = clock.offsetWidth / 2 - borderOffset;
|
||||
markers.forEach((m, i) => {
|
||||
const angle = (i / 16) * 2 * Math.PI;
|
||||
const x = markerRadius * Math.sin(angle);
|
||||
@ -65,9 +66,14 @@
|
||||
const x = innerR * Math.sin(angle);
|
||||
const y = -innerR * Math.cos(angle);
|
||||
t.style.height = `${len}px`;
|
||||
t.style.left = `${clock.offsetWidth / 2 + x}px`;
|
||||
t.style.left = `${clock.offsetWidth / 2 + x - t.offsetWidth / 2}px`;
|
||||
t.style.top = `${clock.offsetHeight / 2 + y}px`;
|
||||
t.style.transform = `rotate(${angle}rad)`;
|
||||
if (clock.offsetWidth < 200 && !t.classList.contains('big') && !t.classList.contains('mid')) {
|
||||
t.style.display = 'none';
|
||||
} else {
|
||||
t.style.display = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user