more bootstrap 5 fixes

This commit is contained in:
2021-07-22 19:53:09 +10:00
parent 085dbcdf3a
commit 07408278b1

View File

@@ -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">