make info boxes in viewer more compact

This commit is contained in:
xenofem 2024-01-26 13:40:16 -05:00
parent 3d0d2686f5
commit 17dc404ba3
3 changed files with 20 additions and 7 deletions

View file

@ -88,6 +88,15 @@ html, body {
#page-num {
left: 10px;
text-align: center;
}
#page-num table {
border-spacing: 0;
}
#current-page {
border-bottom: 2px solid;
}
#duration {

View file

@ -61,22 +61,21 @@ document.addEventListener('DOMContentLoaded', () => {
const display = document.getElementById('image-container');
display.style.backgroundImage = `url("${current.src}")`;
document.getElementById('page-num')
.innerText = [
(pageNum + 1).toLocaleString(),
pages.length.toLocaleString()
].join('\u200a/\u200a');
document.getElementById('current-page').innerText = (pageNum + 1).toLocaleString();
}
const durationDisplay = document.getElementById('duration');
function changeDuration(secs, pause) {
duration = secs;
localStorage.setItem(`${WORK_ID}-duration`, duration);
paused = pause;
document.getElementById('duration').textContent = (paused ? '[paused] ' : '') + duration.toLocaleString() + 's';
durationDisplay.textContent = duration.toLocaleString() + 's';
if (paused) {
durationDisplay.style.textDecoration = "line-through";
stopTimer();
} else {
durationDisplay.style.textDecoration = "";
startTimer();
}
}

View file

@ -15,7 +15,12 @@
{% endfor %}
</div>
<div id="progress"></div>
<div id="page-num"></div>
<div id="page-num">
<table>
<tr><td id="current-page"></td></tr>
<tr><td id="total-pages">{{ images | length }}</td></tr>
</table>
</div>
<div id="duration"></div>
<div id="controls">
<div id="tap-left" class="tap">