jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-09-02 09:34:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix issues with resizing on small screens

Browse Source
This commit is contained in:
Jens Mohrmann
2025-12-30 22:30:48 +01:00
parent d909649e00
commit fe5442eda0
3 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.css
View File

@@ -735,13 +735,13 @@ button {
flex: 0 0 auto;
min-height: 120px;
/* Reduced to allow more space for fretboard */
max-height: 180px;
/* max-height removed to allow full staff visibility */
transform: scale(1.0);
/* No scaling to prevent overflow */
transform-origin: center center;
justify-content: center;
margin-bottom: 0;
padding-top: 10px;
margin-bottom: 5px;
padding-top: 5px;
z-index: 1;
}

8
src/App.tsx
View File

@@ -77,10 +77,12 @@ function App() {
const feedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const [isFullscreen, setIsFullscreen] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
useEffect(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth);
setWindowHeight(window.innerHeight);
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
@@ -507,7 +509,11 @@ function App() {
clef={activeClef}
transpose={activeTranspose}
width={Math.min(windowWidth - 40, 500)}
height={activeClef === 'grand' ? 260 : 180}
height={
activeClef === 'grand'
? (windowHeight < 500 ? 190 : 260) // Compact Grand Staff if short screen
: (windowHeight < 500 ? 120 : 180) // Compact Single Staff
}
hideTargetNote={settings.gameMode === 'ear_training' && !revealed}
hoverMidi={settings.showHint ? hoveredMidi : null}
/>

18
src/components/SheetMusic.tsx
View File

@@ -63,15 +63,20 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
let stavesMeasure1: Record<string, Stave> = {};
let stavesMeasure2: Record<string, Stave> = {};
const isCompact = height < 200;
const trebleY = isCompact ? 10 : 20;
const bassY = isCompact ? 85 : 110;
// Gap reduced from 90 (110-20) to 75 (85-10) in compact mode
// --- Create Staves for Measure 1 ---
if (clef === 'grand') {
// Measure 1: Treble
const m1Treble = new Stave(startX, 20, measureWidth);
const m1Treble = new Stave(startX, trebleY, measureWidth);
m1Treble.addClef('treble').addKeySignature(keySignature);
m1Treble.setContext(context).draw();
// Measure 1: Bass
const m1Bass = new Stave(startX, 110, measureWidth);
const m1Bass = new Stave(startX, bassY, measureWidth);
m1Bass.addClef('bass').addKeySignature(keySignature);
m1Bass.setContext(context).draw();
@@ -93,14 +98,14 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
if (numMeasures === 2) {
// Measure 2: Treble
const m2Treble = new Stave(startX + measureWidth, 20, measureWidth);
const m2Treble = new Stave(startX + measureWidth, trebleY, measureWidth);
// No clef/key sig repeated typically for just next measure in same system,
// UNLESS it's a new system. Here it's same system.
// But VexFlow might require setting context context.
m2Treble.setContext(context).draw();
// Measure 2: Bass
const m2Bass = new Stave(startX + measureWidth, 110, measureWidth);
const m2Bass = new Stave(startX + measureWidth, bassY, measureWidth);
m2Bass.setContext(context).draw();
stavesMeasure2 = { treble: m2Treble, bass: m2Bass };
@@ -119,14 +124,15 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
} else {
// Single Stave
const m1Stave = new Stave(startX, 30, measureWidth);
const staveY = isCompact ? 10 : 30;
const m1Stave = new Stave(startX, staveY, measureWidth);
m1Stave.addClef(clef).addKeySignature(keySignature);
m1Stave.setContext(context).draw();
stavesMeasure1 = { [clef]: m1Stave };
if (numMeasures === 2) {
const m2Stave = new Stave(startX + measureWidth, 30, measureWidth);
const m2Stave = new Stave(startX + measureWidth, staveY, measureWidth);
m2Stave.setContext(context).draw();
stavesMeasure2 = { [clef]: m2Stave };
}