From 07408278b1382a7c0c0786bdcd0684c4b8e7ffbe Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Thu, 22 Jul 2021 19:53:09 +1000
Subject: [PATCH] more bootstrap 5 fixes

---
 templates/person.html | 44 +++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/templates/person.html b/templates/person.html
index e2c3839..443c6a9 100644
--- a/templates/person.html
+++ b/templates/person.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %} {% block main_content %}
 <script>
     // Define this once and before it will be called, hence at the top of this file
-    function DrawRefimg(img, canvas, orig_face )
+    function DrawRefimg(fig, img, canvas, orig_face )
     {
         // FIXME: should get this from shared.py, not sure why this doesnt work at present
         thumbsize=256
@@ -16,6 +16,7 @@
 
         // actually draw the pixel images to the canvas at the right size
         context.drawImage(img, 0, 0, img.width/(img.height/canvas.height), canvas.height);
+        fig.width(canvas.width)
 
         // draw rectangle on face
         context.beginPath();
@@ -31,34 +32,34 @@
 </script>
 
 <div class="container-fluid">
-    <div class="row col-lg-12"><h3 class="offset-lg-3">{{page_title}}</h3></div>
+    <div class="row col-12"><h3 class="offset-3">{{page_title}}</h3></div>
     <form id="pfm" class="form form-inline" action="" method="POST">
         {% for field in form %}
             {% if field.type == 'HiddenField' or field.type == 'CSRFTokenField' %}
-                {{field}}<br>
+                {{field}}
             {% elif field.type != 'SubmitField' %}
-                <div class="row col-lg-12">
-                {{ field.label( class="col-lg-3" ) }}
+                <div class="row col-12">
+                {{ field.label( class="col-3" ) }}
                 {{ field( class="form-control col" ) }}
-                </div class="row col-lg-12">
+                </div class="row col-12">
             {% endif %}
         {% endfor %}
-        <div class="row col-lg-12">
-            <span class="col-lg-3"><center>Reference Images:</center></span>
+        <div class="row col-12">
+            <label class="col-3">Reference Images:</label>
             {% for refimg in person.refimg %}
                 {% set offset="" %}
                 {% if (loop.index % 10) == 0 %}
-                    {% set offset= "offset-lg-3" %}
+                    {% set offset= "offset-3" %}
                 {% endif %}
-                <div id="RI{{refimg.id}}" class="px-0 col-lg-1 w-100 {{offset}}">
-                    <center>
+                <div id="RI{{refimg.id}}" class="col-1 px-0 {{offset}}">
                     <input type="hidden" id="ref-img-id-{{refimg.id}}" name="ref-img-id-{{refimg.id}}" value="1"></input>
-                    <figure style="border: 1px solid #5bc0de; border-radius: 3px;" class="figure my-auto h-100 w-100">
+                    <figure id="fig_{{refimg.id}}">
                         <div style="position:relative">
                             <canvas id="c_{{refimg.id}}" height="128"></canvas>
                             <script>
                                 var im_{{refimg.id}}=new Image();
                                 im_{{refimg.id}}.src="data:image/jpeg;base64,{{refimg.thumbnail}}";
+                                fig_{{refimg.id}}=$('#fig_{{refimg.id}}')
 
                                 // store this stuff in an javascript Object to use when document is ready event is triggered
                                 var orig_face_{{refimg.id}}=new Object;
@@ -70,7 +71,7 @@
                                 orig_face_{{refimg.id}}.orig_h = {{refimg.orig_h}}
 
                                 // when the document is ready, then DrawRefimg
-                                $(function() { DrawRefimg(im_{{refimg.id}}, c_{{refimg.id}}, orig_face_{{refimg.id}} ) });
+                                $(function() { DrawRefimg( fig_{{refimg.id}}, im_{{refimg.id}}, c_{{refimg.id}}, orig_face_{{refimg.id}} ) });
 
                             </script>
                             <div style="position:absolute; top: 2px; right: 2px;">
@@ -80,29 +81,28 @@
                             <figcaption class="figure-caption text-center text-wrap text-break">{{refimg.fname}}</figcaption>
                         </div>
                     </figure>
-                    </center>
                 </div id="/RI*">
             {% endfor %}
-        </div class="row col-lg-12">
-        <div class="row col-lg-12">
+        </div class="row col-12">
+        <div class="row col-12">
         <br>
         </div class="form-row">
-        <div class="row col-lg-12">
-            {{ form.save( id="save", class="btn btn-primary offset-lg-3 col-lg-2" )}}
+        <div class="row col-12">
+            {{ form.save( id="save", class="btn btn-primary offset-3 col-2" )}}
             {% if 'Edit' in page_title %}
-                {{ form.delete( class="btn btn-outline-danger col-lg-2" )}}
+                {{ form.delete( class="btn btn-outline-danger col-2" )}}
             {% endif %}
         </div class="form-row">
     </form>
     {% if person.id %}
         <form id="new_ri" class="form" action="{{url_for('add_refimg')}}" method="POST" enctype="multipart/form-data">
             <input type="hidden" name="person_id" value="{{person.id}}"></input>
-            <div class="row col-lg-12">
-                <label class="btn btn-success offset-lg-3 col-lg-2">
+            <div class="row col-12">
+                <label class="btn btn-success offset-3 col-2">
                     Add reference image
                     <input name="refimg_file" type="file" onChange="$('#new_ri').submit()" style="display:none;" id="new_file_chooser">
                 </label>
-            </div class="row col-lg-12">
+            </div class="row col-12">
         </form>
     {% endif %}
 </div class="container">