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

internal/icons.svg

@@ -208,4 +208,7 @@
       <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
       <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
     </svg>
+    <svg id="back" viewBox="0 0 16 16">
+      <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
+    </svg>
 </svg>

internal/js/files_support.js

@@ -580,7 +580,7 @@ function getPage(pageNumber, successCallback, viewingIdx=0)
         dataType: 'json',
         success: function(res) { 
             document.entries=res;
-            successCallback(res,viewingIdx); 
+            successCallback(res,viewingIdx)
             resetNextPrevButtons()
             // if search, disable folders
             if( OPT.search_term )
@@ -710,7 +710,6 @@ function changeOPT(successCallback) {
             // put data back into booleans, ints, etc
             OPT.folders=( OPT.folders == 'True' )
             OPT.how_many=parseInt(OPT.how_many)
-            console.log('OPT.size='+OPT.size)
             $('.how_many_text').html( ` ${OPT.how_many} files ` )
             OPT.root_eid=parseInt(OPT.root_eid)
             OPT.size=parseInt(OPT.size)
@@ -924,3 +923,16 @@ $.contextMenu({
         };
     }
 });
+
+// quick function that allows us to go out of the viewer and back, the viewercomes from files_ip/sp
+// so just redraw the page with drawPageOfFigures() as we have all the data 
+function goOutOfViewer()
+{
+    // if this returns -1, we have used arrows to go onto a new page(s)
+    if( getPageNumberForId( $('#figures').find('.figure').first().prop('id') ) == -1 )
+        drawPageOfFigures()
+
+    // hide viewer div, then show files_div
+    $('#viewer_div').addClass('d-none')
+    $('#files_div').removeClass('d-none')
+}

templates/files.html

@@ -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" 
+                <!-- Left Buttons Column -->
-                    style="padding: 10%" id="la" 
+                <div class="col-auto d-flex flex-column">
-                    onClick="
+                    <!-- Up Button (Small) -->
-                        getPreviousEntry()
+                    <button title="Back to list" class="btn btn-outline-info btn-sm p-1 mb-1" onclick="goOutOfViewer()">
-                        setDisabledForViewingNextPrevBttons()
+                        <svg width="16" height="16" fill="currentColor">
-                        ViewImageOrVideo()
+                            <use xlink:href="/internal/icons.svg#back"></use>
-                        ">
+                        </svg>
-                    <svg width="16" height="16" fill="currentColor">
+                    </button>
-                        <use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
+                    <!-- Left Button (large/flex-grow-1) -->
-                </button>
+                    <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" 
+                <!-- Right-hand Buttons Column -->
-                    onClick="
+                <div class="col-auto d-flex flex-column">
-                        getNextEntry()
+                    <!-- Up Button (Small) -->
-                        setDisabledForViewingNextPrevBttons()
+                    <button title="Back to list" class="btn btn-outline-info btn-sm p-1 mb-1" onclick="goOutOfViewer()">
-                        ViewImageOrVideo()
+                        <svg width="16" height="16" fill="currentColor">
-                    ">
+                            <use xlink:href="/internal/icons.svg#back"></use>
-                    <svg width="16" height="16" fill="currentColor">
+                        </svg>
-                        <use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
+                    </button>
-                </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 #}