mrwnslz/diora-web
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Mobile: hide volume, add PDF zoom +/- buttons, fix zoom scroll position
All checks were successful
Build and push Docker image / build (push) Successful in 13s
Details
Test / test (push) Successful in 15s
Details

Browse source 
- Hide volume label/slider/input on mobile (≤600px)
- Add − and + buttons flanking the PDF zoom slider
- Preserve scroll fraction across zoom changes in PDF scroll mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
marwin 2026-04-02 12:22:04 +02:00
parent 1bda59e3fc
commit aff4f5aef2
2 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
static/css/app.css
View file

@ -734,8 +734,10 @@ a:hover {
justify-content: space-between;
}
.volume-slider {
width: 60px;
.volume-label,
.volume-slider,
.volume-num {
display: none;
}
.affiliate-section {

28
static/js/app.js
View file

@ -3554,7 +3554,7 @@ function toggleSettingsPanel() {
`;
} else {
panel.innerHTML = `
<label>Zoom <input type="range" id="rs-zoom" min="50" max="200" step="10" value="${readerSettings.pdfZoom}"> <span id="rs-zoom-val">${readerSettings.pdfZoom}%</span></label>
<label>Zoom <button class="btn btn-sm" id="rs-zoom-minus">−</button> <input type="range" id="rs-zoom" min="50" max="200" step="10" value="${readerSettings.pdfZoom}"> <button class="btn btn-sm" id="rs-zoom-plus">+</button> <span id="rs-zoom-val">${readerSettings.pdfZoom}%</span></label>
<button class="btn btn-sm ${readerSettings.pdfInverted ? 'active' : ''}" id="rs-invert">Invert</button>
`;
}
@ -3608,17 +3608,35 @@ function toggleSettingsPanel() {
} else {
const zoomRange = panel.querySelector('#rs-zoom');
const zoomVal = panel.querySelector('#rs-zoom-val');
zoomRange.addEventListener('input', () => {
readerSettings.pdfZoom = parseInt(zoomRange.value, 10);
zoomVal.textContent = readerSettings.pdfZoom + '%';
function applyPdfZoom(newZoom) {
const contentEl2 = $('reader-content');
// Preserve scroll position across zoom change
const fraction = contentEl2
? contentEl2.scrollTop / (contentEl2.scrollHeight - contentEl2.clientHeight || 1)
: 0;
readerSettings.pdfZoom = newZoom;
zoomRange.value = newZoom;
zoomVal.textContent = newZoom + '%';
saveReaderSettings();
if (readerSettings.pdfPaginated) {
pdfSmartZoomPage(pdfCurrentPage);
} else {
const vp = document.getElementById('pdf-viewport');
if (vp) vp.style.zoom = readerSettings.pdfZoom / 100;
}
if (contentEl2 && fraction > 0) {
requestAnimationFrame(() => {
contentEl2.scrollTop = fraction * (contentEl2.scrollHeight - contentEl2.clientHeight);
});
}
}
}
zoomRange.addEventListener('input', () => applyPdfZoom(parseInt(zoomRange.value, 10)));
panel.querySelector('#rs-zoom-minus').addEventListener('click', () =>
applyPdfZoom(Math.max(50, readerSettings.pdfZoom - 10)));
panel.querySelector('#rs-zoom-plus').addEventListener('click', () =>
applyPdfZoom(Math.min(200, readerSettings.pdfZoom + 10)));
panel.querySelector('#rs-invert').addEventListener('click', function () {
readerSettings.pdfInverted = !readerSettings.pdfInverted;