make info boxes in viewer more compact
This commit is contained in:
parent
3d0d2686f5
commit
17dc404ba3
|
@ -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 {
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue