From ae0d27b2849e80ab97f94eb4a0d911798739ed9e Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Sat, 31 Jul 2021 22:49:40 +1000
Subject: [PATCH] first pass of usable fullscreen, will need arrow keys to
 remember state, or realistically pre-load? but for now you can fullscreen the
 image you are on

---
 templates/viewer.html | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/templates/viewer.html b/templates/viewer.html
index ebd9cff..4637960 100644
--- a/templates/viewer.html
+++ b/templates/viewer.html
@@ -211,26 +211,25 @@
                 <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#next"/></svg>
             </button>
         </div>
-        
         <span class="col col-auto my-auto">Show:</span>
-        <div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center">
+        <div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
           <input class="form-check-input" type="checkbox" id="fname" onChange="$('.figure-caption').toggle()"
           {% if sels['fname']=='true' %} checked {% endif %} >
-          <label class="form-check-label" for="fname">Filename</label>
+          <label class="form-check-label ps-1" for="fname">Filename</label>
         </div>
-        <div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center">
+        <div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
           <input class="form-check-input" type="checkbox" onChange="FaceToggle()" id="faces"
               {% if not obj.file_details.faces %} disabled {% endif %}
               {% if sels['faces']=='true' %} checked {% endif %} 
               >
-          <label class="form-check-label" for="faces">Faces</label>
+          <label class="form-check-label ps-1" for="faces">Faces</label>
         </div>
-        <div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center">
+        <div class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
           <input class="form-check-input" type="checkbox" onChange="DrawImg()" id="distance"
               {% if not obj.file_details.faces or sels['faces']=='false' %} disabled {% endif %} 
               {% if sels['distance']=='true' %} checked {% endif %}
               >
-          <label class="form-check-label" for="distance">Distance</label>
+          <label class="form-check-label ps-1" for="distance">Distance</label>
         </div>
         <div class="col col-auto my-auto">
             AI Model:
@@ -256,7 +255,7 @@
             <button class="btn btn-outline-info p-1">
                 <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#flip_v"/></svg>
             </button>
-            <button class="btn btn-outline-info p-1">
+            <button class="btn btn-outline-info p-1" onClick="document.getElementById('canvas').requestFullscreen()">
                 <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('static', filename='upstream/icons.svg')}}#fullscreen"/></svg>
             </button>
         </div>