added a functional (small) up button in the viewer, all works

This commit is contained in:
2025-10-11 09:19:51 +11:00
parent 6419e20d7e
commit 346defde8b
3 changed files with 48 additions and 21 deletions

View File

@@ -117,16 +117,22 @@
<div id="viewer_div" class="d-none">
<div id="viewer" class="container-fluid">
<div class="row">
<button title="Show previous image" class="col-auto btn btn-outline-info px-2"
style="padding: 10%" id="la"
onClick="
getPreviousEntry()
setDisabledForViewingNextPrevBttons()
ViewImageOrVideo()
">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
</button>
<!-- Left Buttons Column -->
<div class="col-auto d-flex flex-column">
<!-- Up Button (Small) -->
<button title="Back to list" class="btn btn-outline-info btn-sm p-1 mb-1" onclick="goOutOfViewer()">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="/internal/icons.svg#back"></use>
</svg>
</button>
<!-- Left Button (large/flex-grow-1) -->
<button title="Show previous image" class="btn btn-outline-info px-2 flex-grow-1"
style="padding: 10%" id="la"
onClick="getPreviousEntry(); setDisabledForViewingNextPrevBttons(); ViewImageOrVideo()">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
</button>
</div>
<figure class="col col-auto border border-info rounded m-0 p-1" id="figure">
<canvas id="canvas"></canvas>
<img id="throbber" src="{{url_for('internal', filename='throbber.gif')}}" style="display:none;">
@@ -146,15 +152,21 @@
<figcaption id="vid-cap" class="figure-caption text-center text-wrap text-break">
<span id="fname_v"></span></figcaption>
</div>
<button title="Show next image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="ra"
onClick="
getNextEntry()
setDisabledForViewingNextPrevBttons()
ViewImageOrVideo()
">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
</button>
<!-- Right-hand Buttons Column -->
<div class="col-auto d-flex flex-column">
<!-- Up Button (Small) -->
<button title="Back to list" class="btn btn-outline-info btn-sm p-1 mb-1" onclick="goOutOfViewer()">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="/internal/icons.svg#back"></use>
</svg>
</button>
<!-- Right Button (large/flex-grow-1) -->
<button title="Show next image" class="btn btn-outline-info px-2 flex-grow-1" style="padding: 10%" id="ra"
onClick="getNextEntry(); setDisabledForViewingNextPrevBttons(); ViewImageOrVideo()">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
</button>
</div>
</div class="row">
<div class="row">
{# this whole div, just takes up the same space as the left button and is hidden for alignment only #}