From 6b6e7bc901622ef1c53c0d91516500300d763f21 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Tue, 20 Jul 2021 22:04:52 +1000
Subject: [PATCH] bootstrap 5 grid "fixups" for viewer

---
 templates/viewer.html | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/templates/viewer.html b/templates/viewer.html
index a3dadf5..2060fb2 100644
--- a/templates/viewer.html
+++ b/templates/viewer.html
@@ -85,11 +85,12 @@
 
     function Toggle(id)
     {
-        b=$('#'+id )
-        b.toggleClass('badge-info')
-        b.toggleClass('badge-outline-info')
-        b.toggleClass('text-white')
+        b=$('.'+id+'_label')
+        b.toggleClass('text-success')
         b.toggleClass('text-secondary')
+        b.toggleClass('border-success')
+        b.toggleClass('border-secondary')
+        b=$('#'+id )
         if( b.attr('faces') == 1 )
             b.attr('faces', 0 )
         else
@@ -100,21 +101,17 @@
 
 <div id="viewer" class="container-fluid">
     {% set max=eids.split(',')|length %}
-    <div id="bbar" class="form-row offset-lg-1 col">
-        <span id="faces" class="badge p-2 text-secondary" onClick="Toggle('faces')" style="border: 1px solid #5bc0de" faces=0><i class="fas fa-brain fa-2x"></i></button>
-    </div>
-    <center>
         <input type="hidden" name="eids" value={{eids}}>
-        <div class="form-row col-lg-12">
+        <div class="row">
             {% if eids.find(obj.id|string) > 0 %}
-                <form id="prev" class="form form-inline" action="/viewprev" method="POST">
+                <form id="prev" class="col col-auto" action="/viewprev" method="POST">
                 <input type="hidden" name="current" value="{{obj.id}}">
                 <input type="hidden" name="eids" value="{{eids}}">
                 <button class="btn btn-outline-info h-75" id="la"><i class="fas fa-angle-double-left"></i></button>
                 </form id="prev">
             {% endif %}
             {% if obj.type.name == "Image" %}
-                <figure style="border: 1px solid #5bc0de; border-radius: 3px;">
+                <figure class="col col-auto border border-info rounded m-0 p-1" id="figure">
                     <canvas id="canvas"></canvas>
                     <script>
                         var im=new Image();
@@ -150,16 +147,20 @@
             {% for eid in eids.split(',') %}
                 {% if loop.index == max-1 %}
                     {% if eid|int != obj.id %}
-                        <form id="next" class="form form-inline" action="/viewnext" method="POST">
+                        <form id="next" class="col col-auto" action="/viewnext" method="POST">
                         <input type="hidden" name="current" value="{{obj.id}}">
                         <input type="hidden" name="eids" value="{{eids}}">
-                        <button class="btn btn-outline-info h-75" id="ra"><i class="fas fa-angle-double-right"></i></button>
+                        <button class="col col-auto btn btn-outline-info h-75" id="ra"><i class="fas fa-angle-double-right"></i></button>
                         </form id="next">
                     {% endif %}
                 {% endif %}
             {% endfor %}
         </div id="/form-row">
-    </center>
+    <div id="bbar" class="row">
+        <div id="faces" faces=0 class="faces_label col col-auto border border-secondary rounded p-1 ms-5 mt-1" onClick="Toggle('faces')">
+            <span class="faces_label text-secondary"><i class="fas fa-brain"></i><label class="sm-txt faces_label text-secondary">&nbsp;faces</label></span>
+        </div>
+    </div>
 </div class="container">
 {% endblock main_content %}
 {% block script_content %}
@@ -175,6 +176,9 @@ $( document ).keydown(function(event) {
         case "ArrowRight":
             $('#ra').click()
             break;
+        case "f":
+            Toggle('faces')
+            break;
         default:
             return; // Quit when this doesn't handle the key event.
     }