Skip to content

[WIP] Adjust metronome view for responsive design #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
awjcreation merged 2 commits into from
Jun 21, 2026
Merged

[WIP] Adjust metronome view for responsive design #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1f6f8a
Initial plan
Copilot Jun 21, 2026
0164dcb
feat: add responsive metronome viewport scaling
Copilot Jun 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -642,6 +642,7 @@ let metroPendulumFrame = null;
let metroPendulumStartedAt = 0;
let metroWasRunningBeforeModal = false;
let metroPausedByModal = false;
let metroLayoutFrame = null;

function metronomeHtml(){
const meterLabel = meter === 6 ? '6/8' : `${meter}/4`;
Expand Down Expand Up @@ -726,6 +727,7 @@ function initMetronome(){
renderMetroControls();
syncCleanMetronomeUi();
setBpm(bpm, {restart:false});
scheduleCleanMetronomeLayoutSync();

document.querySelector('#startMetro')?.addEventListener('click', () => metroRunning ? stopMetronome() : startMetronome());
document.querySelector('#metroResetTop')?.addEventListener('click', resetMetronomeSettings);
Expand Down Expand Up @@ -753,6 +755,83 @@ function initMetronome(){
}));
}

function scheduleCleanMetronomeLayoutSync(){
if(currentView !== 'metronome') return;
if(metroLayoutFrame) cancelAnimationFrame(metroLayoutFrame);
metroLayoutFrame = requestAnimationFrame(() => {
metroLayoutFrame = null;
syncCleanMetronomeLayout();
});
}

function syncCleanMetronomeLayout(){
const screen = document.querySelector('.metro-clean-screen');
const main = document.querySelector('#metroCleanMain');
const visual = document.querySelector('#metroCleanVisual');
if(!screen || !main || !visual) return;

const viewportWidth = Math.max(320, Math.round(
window.visualViewport?.width ||
window.innerWidth ||
document.documentElement.clientWidth ||
screen.clientWidth ||
0
));
const viewportHeight = Math.max(320, Math.round(
window.visualViewport?.height ||
window.innerHeight ||
document.documentElement.clientHeight ||
screen.clientHeight ||
0
));
const landscape = viewportWidth > viewportHeight;
const head = screen.querySelector('.view-head');
const actions = screen.querySelector('.metro-clean-actions');
const screenStyle = getComputedStyle(screen);
const mainStyle = getComputedStyle(main);
const actionsStyle = actions ? getComputedStyle(actions) : null;
const screenHeight = screen.clientHeight || Math.round(screen.getBoundingClientRect().height) || viewportHeight;
const availableWidth = Math.max(
260,
Math.min(main.clientWidth || screen.clientWidth || viewportWidth, viewportWidth - 28)
);
const availableHeight = Math.max(
230,
screenHeight -
(head?.offsetHeight || 0) -
((parseFloat(screenStyle.paddingTop) || 0) + (parseFloat(screenStyle.paddingBottom) || 0)) -
(actions?.offsetHeight || 0) -
(actionsStyle ? (parseFloat(actionsStyle.marginTop) || 0) : 0) -
16
);

const baseVisualWidth = landscape ? 384 : 360;
const baseVisualRatio = landscape ? 0.98 : 1.16;
const baseVisualHeight = baseVisualWidth * baseVisualRatio;
const baseMainHeight =
baseVisualHeight +
(landscape ? 56 : 62) +
(landscape ? 58 : 62) +
((parseFloat(mainStyle.rowGap || mainStyle.gap) || 18) * 2);
const scale = Math.max(
0.56,
Math.min(
availableWidth / baseVisualWidth,
availableHeight / baseMainHeight,
1.18
)
);

screen.classList.toggle('metro-clean-landscape', landscape);
screen.classList.toggle('metro-clean-portrait', !landscape);
screen.style.setProperty('--metro-scale', scale.toFixed(3));
screen.style.setProperty('--metro-visual-width', `${Math.round(baseVisualWidth * scale)}px`);
screen.style.setProperty('--metro-visual-ratio', baseVisualRatio.toFixed(3));
}

window.addEventListener('resize', scheduleCleanMetronomeLayoutSync);
window.visualViewport?.addEventListener?.('resize', scheduleCleanMetronomeLayoutSync);

function pauseMetronomeForModal(){
if(metroPausedByModal) return;
metroWasRunningBeforeModal = metroRunning;
Expand Down Expand Up @@ -918,6 +997,7 @@ function syncCleanMetronomeUi(){
visual.style.setProperty('--metro-duration', `${60000 / bpm}ms`);
visual.classList.toggle('running', metroRunning);
}
scheduleCleanMetronomeLayoutSync();
}

function setBpm(v, opts={restart:true}){
Expand Down
105 changes: 105 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4701,3 +4701,108 @@ label[for="chordSearch"]{
#metroCleanBpmButton {
cursor: pointer !important;
}

/* EasyTune v56 — responsive metronome scales to the app viewport */
.metro-clean-screen{
--metro-scale:1;
--metro-visual-width:360px;
--metro-visual-ratio:1.16;
}
.metro-clean-main{
width:min(100%, 760px) !important;
margin:0 auto !important;
gap:clamp(10px, 1.8vh, 18px) !important;
justify-items:stretch !important;
}
.metro-clean-visual{
width:min(100%, var(--metro-visual-width)) !important;
height:calc(var(--metro-visual-width) * var(--metro-visual-ratio)) !important;
min-height:0 !important;
margin:0 auto !important;
border-radius:clamp(18px, calc(24px * var(--metro-scale)), 28px) !important;
}
.metro-clean-visual::before{
width:calc(300px * var(--metro-scale)) !important;
height:calc(300px * var(--metro-scale)) !important;
}
.metro-clean-scale{
top:calc(56px * var(--metro-scale)) !important;
width:calc(190px * var(--metro-scale)) !important;
height:calc(78px * var(--metro-scale)) !important;
border-radius:calc(190px * var(--metro-scale)) calc(190px * var(--metro-scale)) 0 0 !important;
}
.metro-clean-scale::before,
.metro-clean-scale::after{
top:calc(44px * var(--metro-scale)) !important;
width:calc(36px * var(--metro-scale)) !important;
}
.metro-clean-scale::before{
left:calc(18px * var(--metro-scale)) !important;
}
.metro-clean-scale::after{
right:calc(18px * var(--metro-scale)) !important;
}
.metro-clean-pendulum{
top:calc(74px * var(--metro-scale)) !important;
width:max(3px, calc(4px * var(--metro-scale))) !important;
height:calc(230px * var(--metro-scale)) !important;
}
.metro-clean-pendulum span{
bottom:calc(-17px * var(--metro-scale)) !important;
width:calc(34px * var(--metro-scale)) !important;
height:calc(34px * var(--metro-scale)) !important;
}
.metro-clean-bpm{
min-width:0 !important;
padding:calc(10px * var(--metro-scale)) calc(16px * var(--metro-scale)) !important;
}
.metro-clean-bpm strong{
font-size:clamp(52px, calc(112px * var(--metro-scale)), 112px) !important;
}
.metro-clean-bpm span{
margin-top:clamp(6px, calc(10px * var(--metro-scale)), 12px) !important;
font-size:clamp(13px, calc(16px * var(--metro-scale)), 16px) !important;
}
.metro-clean-beats{
min-height:clamp(48px, calc(62px * var(--metro-scale)), 68px) !important;
padding:clamp(10px, calc(16px * var(--metro-scale)), 16px) clamp(8px, calc(12px * var(--metro-scale)), 12px) !important;
gap:clamp(8px, calc(12px * var(--metro-scale)), 14px) !important;
}
.beat-wrap{
gap:clamp(4px, calc(6px * var(--metro-scale)), 6px) !important;
}
.beat-number{
font-size:clamp(10px, calc(12px * var(--metro-scale)), 12px) !important;
}
.metro-clean-beats .beat{
width:clamp(14px, calc(18px * var(--metro-scale)), 18px) !important;
height:clamp(14px, calc(18px * var(--metro-scale)), 18px) !important;
}
.metro-clean-meta{
width:100% !important;
gap:clamp(8px, calc(10px * var(--metro-scale)), 12px) !important;
}
.metro-clean-meta button{
min-height:clamp(50px, calc(62px * var(--metro-scale)), 64px) !important;
padding:clamp(8px, calc(10px * var(--metro-scale)), 10px) clamp(4px, calc(8px * var(--metro-scale)), 8px) !important;
}
.metro-clean-meta span{
font-size:clamp(11px, calc(12px * var(--metro-scale)), 12px) !important;
}
.metro-clean-meta strong{
font-size:clamp(15px, calc(18px * var(--metro-scale)), 18px) !important;
}
.metro-clean-actions{
width:min(100%, 520px) !important;
margin:clamp(10px, 1.8vh, 20px) auto 0 !important;
}
.metro-clean-actions .primary-btn{
min-height:clamp(50px, calc(56px * var(--metro-scale)), 58px) !important;
font-size:clamp(17px, calc(18px * var(--metro-scale)), 18px) !important;
}
.metro-clean-screen.metro-clean-landscape .metro-clean-main{
gap:clamp(8px, 1.3vh, 14px) !important;
}
.metro-clean-screen.metro-clean-landscape .metro-clean-meta button{
min-height:clamp(48px, calc(56px * var(--metro-scale)), 58px) !important;
}
Loading