From b9f05d64f857f0342f2c1199c238868ac3da3401 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Tue, 20 Jul 2021 19:03:14 +1000
Subject: [PATCH] okay this now works with bootstrap 5, I dont love the sz
 buttons / mixed black and white hover text needs love - probably own class
 with own styles, but I dont want to hard-code info color, need to work out
 how to do style / css using the right bs variable for info color

---
 shared.py                |   8 +--
 templates/aistats.html   |   4 +-
 templates/base.html      | 138 ++++++++++++++++++++-------------------
 templates/file_list.html |  14 ++--
 templates/files.html     | 115 +++++++++++++-------------------
 templates/joblog.html    | 119 ++++++++++++++-------------------
 templates/jobs.html      |   6 +-
 templates/login.html     |   2 +-
 templates/persons.html   |   2 +-
 templates/refimgs.html   |   2 +-
 templates/viewer.html    |   7 +-
 11 files changed, 188 insertions(+), 229 deletions(-)

diff --git a/shared.py b/shared.py
index bef908b..15b0416 100644
--- a/shared.py
+++ b/shared.py
@@ -30,9 +30,8 @@ PA_JOB_MANAGER_PORT=55430
 
 THUMBSIZE=256
 
-def CreateSelect(name, selected, list, js=""):
-    str  = f'<select id="{name}" name="{name}" style="color:#5bc0de;border:1px solid #5bc0de;"'
-    str += f'class="sm-txt form-control form-conrol-info" onChange="{js};this.form.submit()">'
+def CreateSelect(name, selected, list, js="", add_class="" ):
+    str  = f'<select id="{name}" name="{name}" class="{add_class} sm-txt bg-white text-info border-info border-1 p-1" onChange="{js};this.form.submit()">'
     for el in list:
         str += '<option '
         if el == selected:
@@ -42,8 +41,7 @@ def CreateSelect(name, selected, list, js=""):
     return str
 
 def CreateFoldersSelect(selected):
-    str  = f'<select id="folders" name="folders" style="color:#5bc0de;border:1px solid #5bc0de;"'
-    str += f'class="sm-txt form-control form-conrol-info" onChange="this.form.submit()">'
+    str  = f'<select id="folders" name="folders" class="sm-txt bg-white text-info border-info border-1 p-1" onChange="this.form.submit()">'
     # if selected is true, then folders == true, so make this the selected option
     if( selected ):
         str += '<option selected value="True">In Folders</option>'
diff --git a/templates/aistats.html b/templates/aistats.html
index 963c781..d43244b 100644
--- a/templates/aistats.html
+++ b/templates/aistats.html
@@ -3,7 +3,7 @@
 {% block main_content %}
 <h3>Basic AI stats</h3>
     <table class="table table-striped table-sm">
-    <tbody><thead class="thead-light"><tr><th>What</th><th>Amount</th></tr></thead>
+    <tbody><thead class="table-primary"><tr><th>What</th><th>Amount</th></tr></thead>
         <tr><td>Files with a face</td><td>{{fstats['files_with_a_face']}}</td></tr>
         <tr><td>Files with a matched face</td><td>{{fstats['files_with_a_match']}}</td></tr>
         <tr><td>Files with missing matches</td><td>{{fstats['files_with_missing_matches']}}</td></tr>
@@ -13,7 +13,7 @@
     </tbody></table>
 
     <table class="table table-striped table-sm">
-    <tbody><thead class="thead-light"><tr><th>Person (tag)</th><th>Number of files matched</th></thead>
+    <tbody><thead class="table-primary"><tr><th>Person (tag)</th><th>Number of files matched</th></thead>
     {% for s in stats %}
         <tr><td>{{s[0]}}</td><td>{{s[1]}}</td></tr>
     {% endfor %}
diff --git a/templates/base.html b/templates/base.html
index a0af631..55aac17 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,12 +10,12 @@
 		<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/fontawesome-free-5.15.3-web/css/all.min.css' ) }}">
 
 		<!-- Bootstrap CSS -->
-		<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-4.6.0-dist/css/bootstrap.min.css' ) }}">
+		<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-5.0.2-dist/css/bootstrap.min.css' ) }}">
 		<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/jquery.contextMenu.css' ) }}">
 
         <!-- code to get bootstrap to work -->
         <script src="{{ url_for( 'static', filename='upstream/jquery-3.6.0.min.js')}}"></script>
-        <script src="{{ url_for( 'static', filename='upstream/bootstrap-4.6.0-dist/js/bootstrap.min.js')}}"></script>
+        <script src="{{ url_for( 'static', filename='upstream/bootstrap-5.0.2-dist/js/bootstrap.min.js')}}"></script>
         <script src="{{ url_for( 'static', filename='upstream/jquery.contextMenu.min.js')}}"></script>
         <script src="{{ url_for( 'static', filename='upstream/jquery.ui.position.min.js')}}"></script>
 
@@ -24,7 +24,7 @@
 		{% import "bootstrap/wtf.html" as wtf %}
         <style>
         .highlight { box-shadow: 0 0 7px 4px #5bc0de }
-        .sm-txt { font-size: 0.8rem }
+        .sm-txt { font-size: 0.7rem }
         </style>
 	</head>
 	<body>
@@ -50,72 +50,74 @@
 	</div>
 
 	<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
-        {% if config.env == "Production" %}
-            <a class="navbar-brand" href="/">Photo Assistant</a>
-        {% else %}
-            <a class="navbar-brand bg-secondary text-white px-2" style="border-radius:4px" href="/">PA (DEV)</a>
-        {% endif %}
-		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
-		</button>
-		<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-			<div class="navbar-nav mr-auto">
-				<div class="nav-item dropdown">
-					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="FileMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Files</a>
-					<div class="dropdown-menu" aria-labelledby="FileMenu">
-						<a class="dropdown-item" href="{{url_for('files_ip')}}">View Photos to Import</a>
-						<a class="dropdown-item" href="{{url_for('file_list_ip')}}">View Details of Photos to Import</a>
-						<a class="dropdown-item" href="{{url_for('files_sp')}}">View Stored Photos</a>
-						<a class="dropdown-item" href="{{url_for('files_rbp')}}">View Recycle Bin</a>
-					</div>
-				</div class="nav-item dropdown">
-				<div class="nav-item dropdown">
-					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="PersonMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Person</a>
-					<div class="dropdown-menu" aria-labelledby="AIMenuPerson">
-						<a class="dropdown-item" href="{{url_for('new_person')}}">Create Person</a>
-						<a class="dropdown-item" href="{{url_for('persons')}}">Show People</a>
-					</div>
-				</div class="nav-item dropdown">
-				<div class="nav-item dropdown">
-					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AIMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AI</a>
-					<div class="dropdown-menu" aria-labelledby="AIMenu">
-						<a class="dropdown-item" href="{{url_for('aistats')}}">View Stats</a>
-					</div>
-				</div class="nav-item dropdown">
-				<div class="nav-item dropdown">
-					<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AdminMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
-					<div class="dropdown-menu" aria-labelledby="AdminMenu">
-						<a class="dropdown-item" href="{{url_for('settings')}}">Edit Settings</a>
-						<a class="dropdown-item" href="{{url_for('scannow')}}">Scan now (for new files)</a>
-						<a class="dropdown-item" href="{{url_for('forcescan')}}">Force Scan (delete data & rebuild)</a>
-						<a class="dropdown-item" href="{{url_for('scan_sp')}}">Scan Storage Path</a>
-						<a class="dropdown-item" href="{{url_for('wakeup')}}">Force wake the job manager</a>
-					</div class="dropdow-menu">
-				</div class="nav-item dropdown">
-                <div class="nav-item ml-5">
-                    <a href="{{url_for('jobs')}}"}}<span class="navbar-text">Active Jobs: 
-                    {% set num_active_jobs = GetNumActiveJobs() %}
-                    {% if num_active_jobs > 0 %}
-                        <span class="badge badge-danger text-white"}}>{{num_active_jobs}}</span>
-                    {% else %}
-                        <span class="badge">0</span>
-                    {% endif %}
-                    </a>
-                </div class="nav-item">
-			</div class="navbar-nav">
+       <div class="container-fluid">
+            {% if config.env == "Production" %}
+                <a class="navbar-brand" href="/">Photo Assistant</a>
+            {% else %}
+                <a class="navbar-brand bg-secondary text-white px-2" style="border-radius:4px" href="/">PA (DEV)</a>
+            {% endif %}
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+                <div class="navbar-nav col-12">
+                    <div class="nav-item dropdown">
+                        <a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="FileMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Files</a>
+                        <div class="dropdown-menu" aria-labelledby="FileMenu">
+                            <a class="dropdown-item" href="{{url_for('files_ip')}}">View Photos to Import</a>
+                            <a class="dropdown-item" href="{{url_for('file_list_ip')}}">View Details of Photos to Import</a>
+                            <a class="dropdown-item" href="{{url_for('files_sp')}}">View Stored Photos</a>
+                            <a class="dropdown-item" href="{{url_for('files_rbp')}}">View Recycle Bin</a>
+                        </div>
+                    </div class="nav-item dropdown">
+                    <div class="nav-item dropdown">
+                        <a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="PersonMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Person</a>
+                        <div class="dropdown-menu" aria-labelledby="AIMenuPerson">
+                            <a class="dropdown-item" href="{{url_for('new_person')}}">Create Person</a>
+                            <a class="dropdown-item" href="{{url_for('persons')}}">Show People</a>
+                        </div>
+                    </div class="nav-item dropdown">
+                    <div class="nav-item dropdown">
+                        <a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AIMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AI</a>
+                        <div class="dropdown-menu" aria-labelledby="AIMenu">
+                            <a class="dropdown-item" href="{{url_for('aistats')}}">View Stats</a>
+                        </div>
+                    </div class="nav-item dropdown">
+                    <div class="nav-item dropdown">
+                        <a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AdminMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
+                        <div class="dropdown-menu" aria-labelledby="AdminMenu">
+                            <a class="dropdown-item" href="{{url_for('settings')}}">Edit Settings</a>
+                            <a class="dropdown-item" href="{{url_for('scannow')}}">Scan now (for new files)</a>
+                            <a class="dropdown-item" href="{{url_for('forcescan')}}">Force Scan (delete data & rebuild)</a>
+                            <a class="dropdown-item" href="{{url_for('scan_sp')}}">Scan Storage Path</a>
+                            <a class="dropdown-item" href="{{url_for('wakeup')}}">Force wake the job manager</a>
+                        </div class="dropdow-menu">
+                    </div class="nav-item dropdown">
+                    <div class="nav-link flex-grow-1 ms-5">
+                        <a href="{{url_for('jobs')}}"}}<span class="navbar-text">Active Jobs: 
+                            {% set num_active_jobs = GetNumActiveJobs() %}
+                            {% if num_active_jobs > 0 %}
+                                <span class="badge badge-danger text-white"}}>{{num_active_jobs}}</span>
+                            {% else %}
+                                <span class="badge">0</span>
+                            {% endif %}
+                        </a>
+                    </div class="nav-item">
 
-			<form class="form-inline my-2 my-lg-0" method="POST" onSubmit="SetViewingOptionsForSearchForm()" action="/search">
-                <input type="hidden" id="search_noo" name="noo" value="">
-                <input type="hidden" id="search_grouping" name="grouping" value="">
-                <input type="hidden" id="search_how_many" name="how_many" value="">
-                <input type="hidden" id="search_offset" name="offset" value="">
-                <input type="hidden" id="search_size" name="size" value="">
-                <input type="hidden" id="search_folders" name="folders" value="">
-                <input type="hidden" id="search_cwd" name="cwd" value="">
-				<input id="term" class="form-control mr-sm-2" type="search" placeholder="by file, date (YYYMMDD) or tag" aria-label="Search" name="term">
-				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-			</form>
-		</div class="collapse navbar-collapse">
+                    <form class="d-flex col ms-5" method="POST" onSubmit="SetViewingOptionsForSearchForm()" action="/search">
+                        <input type="hidden" id="search_noo" name="noo" value="">
+                        <input type="hidden" id="search_grouping" name="grouping" value="">
+                        <input type="hidden" id="search_how_many" name="how_many" value="">
+                        <input type="hidden" id="search_offset" name="offset" value="">
+                        <input type="hidden" id="search_size" name="size" value="">
+                        <input type="hidden" id="search_folders" name="folders" value="">
+                        <input type="hidden" id="search_cwd" name="cwd" value="">
+                        <input id="term" class="form-control" type="search" placeholder="by file, date (YYYMMDD) or tag" aria-label="Search" name="term">
+                        <button class="btn btn-outline-success" type="submit">Search</button>
+                    </form>
+                </div class="navbar-nav">
+            </div class="collapse navbar-collapse">
+        </div class="container-fluid">
 	</nav>
 	
 	{% if GetMessage()|length %}
diff --git a/templates/file_list.html b/templates/file_list.html
index 8aea975..4f68b4b 100644
--- a/templates/file_list.html
+++ b/templates/file_list.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %} {% block main_content %}
-		<div class="container">
+		<div class="container-fluid">
 			<h3 class="offset-lg-2">{{page_title}}</h3>
             <form id="main_form" method="POST">
                 <input id="offset" type="hidden" name="offset" value="{{offset}}">
@@ -8,20 +8,20 @@
                 <input id="cwd" type="hidden" name="cwd" value="">
                 <input id="folders" type="hidden" name="folders" value="False">
                 <div class="row">
-                    <div class="px-0 input-group col-lg-4">
-                        {{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)")|safe }}
-                        {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
+                    <div class="input-group col-lg-4">
+                        {{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start" )|safe }}
+                        {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"], "", "rounded-end" )|safe }}
                     </div class="input-group...">
                     <div class="col my-auto d-flex justify-content-center">
-                        <button id="prev" name="prev" class="prev sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
+                        <button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
                         <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
-                        <button id="next" name="next" class="next sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button>
+                        <button id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
                     </div class="col...">
                 </div class="row">
             </form
 			<div class="row">
 				<table class="table table-striped table-sm col-xl-12">
-				<thead><tr class="thead-light"><th>Name</th><th>Size (MB)</th><th>Path Prefix</th><th>Hash</th></tr></thead><tbody>
+				<thead><tr class="table-primary"><th>Name</th><th>Size (MB)</th><th>Path Prefix</th><th>Hash</th></tr></thead><tbody>
 
 					{% for obj in entry_data %}
 						<tr><td>
diff --git a/templates/files.html b/templates/files.html
index e8b3ada..0a58f99 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -18,10 +18,10 @@
             {% if search_term is defined %}
                 <input type="hidden" name="term" id="view_term" value="{{search_term}}">
             {% endif %}
-            <div class="row mb-2">
+            <div class="d-flex row mb-2">
                 {% if folders %}
-                    <div class="mx-3 my-auto">
-                        <span class="alert alert-primary">
+                    <div class="my-auto col">
+                        <span class="alert alert-primary py-2">
                         {% if "files_ip" in request.url %}
                           <i class="fas fa-file-upload"></i>
                           {% set tmp_path=cwd | replace( "static/Import", "" ) + "/" %}
@@ -35,79 +35,73 @@
                         {{tmp_path}}</span>
                     </div class="col my-auto">
                 {% endif %}
-                <div class="px-0 input-group col-lg-4">
-                    {{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)")|safe }}
+                <div class="col">
+                    <div class="input-group">
+                    {{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start")|safe }}
                     {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
                     {% if folders %}
                         <input type="hidden" name="grouping" id="grouping" value="{{grouping}}">
                         {{CreateFoldersSelect( folders )|safe }}
                     {% else %}
                         {{CreateFoldersSelect( folders )|safe }}
-                        <span style="border:0" class="sm-txt my-auto btn btn-outline-info disabled">grouped by:</span>
-                        {{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"])|safe }}
+                        <span class="sm-txt my-auto btn btn-outline-info disabled border-top border-bottom">grouped by:</span>
+                        {{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"], "", "rounded-end")|safe }}
                     {% endif %}
-                </div class="input-group">
+                    </div class="input-group">
+                </div class="col">
                 {% if search_term is defined %}
                     <div class="col my-auto">
-                        <span class="alert alert-primary">Searched for: '{{search_term}}'</span>
+                        <span class="alert alert-primary p-2">Searched for: '{{search_term}}'</span>
                     </div class="col my-auto">
                 {% endif %}
-                <div class="col my-auto d-flex justify-content-end">
-                    <button id="prev" name="prev" class="prev sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
+                <div class="col flex-grow-1 my-auto d-flex justify-content-center w-100">
+                    <button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
                     <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
-                    <button id="next" name="next" class="next sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button>
-                    <button id="move" disabled name="move" class="sm-txt btn btn-primary ml-4" onClick="MoveDBox(); return false;"><i class="fas fa-folder-plus"></i></button>
+                    <button id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
+                    <button id="move" disabled name="move" class="sm-txt btn btn-outline-primary ms-4" onClick="MoveDBox(); return false;"><i class="fas fa-folder-plus"></i></button>
                     {% if "files_rbp" in request.url %}
-                        <button id="del" disabled name="del" class="sm-txt btn btn-success mx-1" onClick="DelDBox('Restore'); return false;">
+                        <button id="del" disabled name="del" class="sm-txt btn btn-outline-success mx-1" onClick="DelDBox('Restore'); return false;">
                         <i class="fas fa-trash-restore-alt"></i>
                     {% else %}
-                        <button id="del" disabled name="del" class="sm-txt btn btn-danger mx-1" onClick="DelDBox('Delete'); return false;">
+                        <button id="del" disabled name="del" class="sm-txt btn btn-outline-danger mx-1" onClick="DelDBox('Delete'); return false;">
                         <i class="fas fa-trash-alt"></i>
                     {% endif %}
                     </button>
                 </div>
-                <div class="px-0 input-group col justify-content-end">
+                <div class="d-flex col justify-content-end">
+                    <div class="btn-group">
                     {% if size == "64" %}
-                        {% set bt="btn-info" %}
+                        {% set bt="btn-info text-white" %}
                     {% else %}
                         {% set bt="btn-outline-info" %}
                     {% endif %}
-                    <div class="input-group-prepend">
-                        <button id="64" style="width:98%" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
-                    </div>
+                        <button id="64" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
                     {% if size == "96" %}
-                        {% set bt="btn-info" %}
+                        {% set bt="btn-info text-white" %}
                     {% else %}
                         {% set bt="btn-outline-info" %}
                     {% endif %}
-                    <div class="input-group-append">
-                        <button id="96" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
-                    </div>
+                        <button id="96" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
                     {% if size == "128" %}
-                        {% set bt="btn-info" %}
+                        {% set bt="btn-info text-white" %}
                     {% else %}
                         {% set bt="btn-outline-info" %}
                     {% endif %}
-                    <div class="input-group-append">
-                        <button id="128" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
-                    </div>
+                        <button id="128" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
                     {% if size == "192" %}
-                        {% set bt="btn-info" %}
+                        {% set bt="btn-info text-white" %}
                     {% else %}
                         {% set bt="btn-outline-info" %}
                     {% endif %}
-                    <div class="input-group-append">
-                        <button id="192" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
-                    </div>
+                        <button id="192" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
                     {% if size == "256" %}
-                        {% set bt="btn-info" %}
+                        {% set bt="btn-info text-white" %}
                     {% else %}
                         {% set bt="btn-outline-info" %}
                     {% endif %}
-                    <div class="input-group-append">
-                        <button id="256" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
-                    </div>
-                </div class="input-group">
+                        <button id="256" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
+                    </div class="btn-group">
+                </div class="col">
                 <input id="offset" type="hidden" name="offset" value="{{offset}}">
                 <input id="size" type="hidden" name="size" value="{{size}}">
             </div class="form-row">
@@ -121,15 +115,13 @@
             <input name="eids" id="eids" type="hidden" value="{{eids.str}}">
         </form>
 
-        {% set last = namespace(printed=0) %}
-        {% if folders or grouping == "None" %}
-            <div class="row pl-3">
-        {% endif %}
+</div>
 
+        {% set last = namespace(printed=0) %}
         {# rare event of empty folder, still need to show back button #}
         {% if folders and entry_data|length == 0 %}
             {% if cwd != root %}
-                <figure class="px-1 dir entry" ecnt="1" dir="{{cwd|ParentPath}}" type="Directory">
+                <figure class="dir entry ms-1" ecnt="1" dir="{{cwd|ParentPath}}" type="Directory">
                     <span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
                         <i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
                         <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
@@ -138,7 +130,7 @@
                 </figure class="figure">
             {% else %}
                 {# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
-                <span style="font-size:{{(size|int-22)/2}}px" class="mx-1 fa-stack">
+                <span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
                     <i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i>
                     <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
                 </span>
@@ -147,7 +139,7 @@
         {% for obj in entry_data %}
             {% if loop.index==1 and folders %}
                 {% if cwd != root %}
-                    <figure class="px-1 dir entry" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}" type="Directory">
+                    <figure class="dir entry ms-1" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}" type="Directory">
                         <span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
                             <i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
                             <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
@@ -156,7 +148,7 @@
                     </figure class="figure">
                 {% else %}
                     {# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
-                    <span style="font-size:{{(size|int-22)/2}}px" class="mx-1 fa-stack">
+                    <span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
                         <i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i>
                         <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
                     </span>
@@ -167,35 +159,23 @@
             {% endif %}
             {% if grouping == "Day" %}
                 {% if last.printed != obj.file_details.day %}
-                    {% if last.printed > 0 %}
-                        </div>
-                    {% endif %}
-                    <div class="row pl-3"><h6>Day: {{obj.file_details.day}} of {{obj.file_details.month}}/{{obj.file_details.year}}</h6></div>
-                    <div class="row pl-3">
+                    <div class="row ps-3"><h6>Day: {{obj.file_details.day}} of {{obj.file_details.month}}/{{obj.file_details.year}}</h6></div>
                     {% set last.printed = obj.file_details.day %}
                 {% endif %}
             {% elif grouping == "Week" %}
                 {% if last.printed != obj.file_details.woy %}
-                    {% if last.printed > 0 %}
-                        </div>
-                    {% endif %}
-                    <div class="row pl-3"><h6>Week #: {{obj.file_details.woy}} of {{obj.file_details.year}}</h6></div>
-                    <div class="row pl-3">
+                    <div class="row ps-3"><h6>Week #: {{obj.file_details.woy}} of {{obj.file_details.year}}</h6></div>
                     {% set last.printed = obj.file_details.woy %}
                 {% endif %}
             {% elif grouping == "Month" %}
                 {% if last.printed != obj.file_details.month %}
-                    {% if last.printed > 0 %}
-                        </div>
-                    {% endif %}
-                    <div class="row pl-3"><h6>Month: {{obj.file_details.month}} of {{obj.file_details.year}}</h6></div>
-                    <div class="row pl-3">
+                    <div class="row ps-3"><h6>Month: {{obj.file_details.month}} of {{obj.file_details.year}}</h6></div>
                     {% set last.printed = obj.file_details.month %}
                 {% endif %}
             {% endif %}
             {% if obj.type.name != "Directory" %}
                 {% if (not folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(cwd)) %}
-                    <figure id="{{obj.id}}" ecnt="{{loop.index}}" class="figure entry mx-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}" type="{{obj.type.name}}">
+                    <figure id="{{obj.id}}" ecnt="{{loop.index}}" class="figure entry ms-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}" type="{{obj.type.name}}">
                         {% if obj.type.name=="Image" %}
                             <div style="position:relative; width:100%">
                                 <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
@@ -233,7 +213,7 @@
                     {% endif %}
                     {# if this dir is the toplevel of the cwd, show the folder icon #}
                     {% if dirname| TopLevelFolderOf(cwd) %}
-                        <figure class="px-1 dir entry" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}" type="Directory">
+                        <figure class="dir entry ms-1" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}" type="Directory">
                             <i style="font-size:{{size|int-22}}px" class="fas fa-folder"></i>
                             <figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
                         </figure class="figure">
@@ -241,9 +221,6 @@
                 {% endif %}
             {% endif %}
         {% endfor %}
-        {% if grouping == "None" %}
-            </div class="row pl-3">
-        {% endif %}
 
         </div>
         <div class="container-fluid">
@@ -251,9 +228,9 @@
                 <input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
                 <div class="row">
                     <div class="col my-auto d-flex justify-content-center">
-                        <button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); })" id="prev" name="prev" class="prev sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
+                        <button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); })" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
                         <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
-                        <button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); });" id="next" name="next" class="next sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button>
+                        <button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); });" id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
                     </div>
                 </div>
             </form>
@@ -424,8 +401,8 @@ function MoveDBox()
 
 function ChangeSize(clicked_button,sz)
 {
-	$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
-	$(clicked_button).addClass('btn-info').removeClass('btn-outline-info')
+	$('.sz-but.btn-info').removeClass('btn-info text-white').addClass('btn-outline-info')
+	$(clicked_button).addClass('btn-info text-white').removeClass('btn-outline-info')
 	$('.thumb').attr( {height: sz, style: 'font-size:'+sz+'px' } )
 	$('#size').val(sz)
     sz=sz-22
diff --git a/templates/joblog.html b/templates/joblog.html
index 1af69ee..1d56f39 100644
--- a/templates/joblog.html
+++ b/templates/joblog.html
@@ -3,86 +3,67 @@
 {% block main_content %}
 <div class="container-fluid">
 	<h3>{{page_title}}</h3>
-	<div class="row col-lg-12">
-		<label class="form-control-plaintext col-lg-2">Job #:</label>
-		<label class="form-control-plaintext col-lg-10">{{job.id}}</label>
-	</div>
-	<div class="row col-lg-12">
-		<label class="form-control-plaintext col-lg-2">Name:</label>
-		<label class="form-control-plaintext col-lg-10">{{job.name}}</label>
-	</div>
-	<div class="row col-lg-12">
-		<label class="form-control-plaintext col-lg-2">Start Time:</label>
-		<label class="form-control-plaintext col-lg-10">{{job.start_time|vicdate}}</label>
-	</div>
-	<div class="row col-lg-12">
-		<label class="form-control-plaintext col-lg-2">Duration:</label>
-		<label class="form-control-plaintext col-lg-10">{{duration}}</label>
-	</div>
-	<div class="row col-lg-12">
-		<label class="form-control-plaintext col-lg-2">Last Update:</label>
-		<label class="form-control-plaintext col-lg-10">{{job.last_update|vicdate}}</label>
-	</div>
-	<div class="row col-lg-12">
-		<label class="form-control-plaintext col-lg-2">Current state:</label>
+	<dl class="row">
+		<dt class="col-2">Job #:</dt>
+		<dd class="col-10">{{job.id}}</dt>
+		<dt class="col-2">Name:</dt>
+		<dd class="col-10">{{job.name}}</dt>
+		<dt class="col-2">Start Time:</dt>
+		<dd class="col-10">{{job.start_time|vicdate}}</dt>
+		<dt class="col-2">Duration:</dt>
+		<dd class="col-10">{{duration}}</dd>
+		<dt class="col-2">Last Update:</dt>
+		<dd class="col-10">{{job.last_update|vicdate}}</dd>
+		<dt class="col-2">Current state:</dt>
         {% if job.state == "Failed" %}
-            <label class="form-control-plaintext col-lg-10 bg-danger text-white">{{job.state}}</label>
+            <dd class="col-10 bg-danger text-white">{{job.state}}</dd>
         {% elif job.state == "Withdrawn" %}
-            <label class="form-control-plaintext col-lg-10 bg-secondary text-white">{{job.state}}</label>
+            <dd class="col-10 bg-secondary text-white">{{job.state}}</dd>
         {% else %}
-            <label class="form-control-plaintext col-lg-10">{{job.state}}</label>
+            <dd class="col-10">{{job.state}}</dd>
         {% endif %}
-	</div>
-    {% if job.wait_for != None %}
-        <div class="row col-lg-12">
-            <label class="form-control-plaintext col-lg-2">Waiting on Job:</label>
-            <label class="form-control-plaintext col-lg-10"><a href="{{url_for('joblog', id=job.wait_for)}}">Job (id={{job.wait_for}})</a></label>
-        </div>
-    {% endif %}
-	<div class="row col-lg-12">
-		<label class="form-control-plaintext col-lg-2">Current File:</label>
-		<label class="form-control-plaintext col-lg-10">{{job.current_file}}</label>
-	</div>
-    <div class="row col-lg-12">
-         <label class="form-control-plaintext col-lg-2">Files in pass:</label>
-    {% if job.num_files and job.num_files > 0 %}
-         <div class="col-lg-10 px-0">
+        {% if job.wait_for != None %}
+            <dd class="col-2">Waiting on Job:</dd>
+            <dl class="col-10"><a href="{{url_for('joblog', id=job.wait_for)}}">Job (id={{job.wait_for}})</a></dl>
+        {% endif %}
+		<dt class="col-2">Current File:</dt>
+		<dd class="col-10">{{job.current_file}}</dd>
+        <dt class="col-2">Files in pass:</label>
+        {% if job.num_files and job.num_files > 0 %}
+         <dd class="col-10">
             {% set prog=(job.current_file_num/job.num_files*100)|round|int %}
-            <div class="progress mt-2" style="height:24px">
+            <div class="progress my-auto h-100">
                 <div class="progress-bar bg-info" role="progressbar" style="width: {{prog}}%;" aria-valuenow="{{prog}}" aria-valuemin="0" aria-valuemax="100">{{job.current_file_num}} of {{job.num_files}} - {{prog}}%</div>
             </div>
+         </dd>
     {% elif job.num_files == 0 and job.current_file_num > 0 %}
-        <label class="form-control-plaintext
-        col-lg-10">{{job.current_file_num}} of Unknown Total</label>
+        <dd class="col-10">{{job.current_file_num}} of Unknown Total</dd>
     {% else %}
-        <label class="form-control-plaintext col-lg-10">N/A</label>
+        <dd class="col-10">N/A</dd>
     {% endif %}
-	</div>
-	</div>
-    <div class="row col-lg-12">
-        <table id="jobort_tbl" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
-            <thead><tr class="thead-light"><th>When</th><th>Details</th></tr></thead>
-            <tbody>
-            {% for log in logs %}
-                <tr><td>{{log.log_date|vicdate}}</td><td>{{log.log|safe}}</td></tr>
-            {% endfor %}
-            {% if log_cnt > logs|length %}
-                <tr>
-                    <td class="align-middle">Remaining logs truncated</td>
-                    <td>
-                        <button type="button" class="btn btn-info my-0 py-1" onClick="document.body.innerHTML+='<form id=_fm method=POST action={{url_for('joblog', id=job.id)}}></form>';document.getElementById('_fm').submit();">Show all logs</button>
-                    </td>
-                </tr>
-            {% endif %}
-            </tbody>
-        </table>
-    </div>
+    </dl>
+    <table id="jobort_tbl" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
+        <thead><tr class="table-primary"><th>When</th><th>Details</th></tr></thead>
+        <tbody>
+        {% for log in logs %}
+            <tr><td>{{log.log_date|vicdate}}</td><td>{{log.log|safe}}</td></tr>
+        {% endfor %}
+        {% if log_cnt > logs|length %}
+            <tr>
+                <td class="align-middle">Remaining logs truncated</td>
+                <td>
+                    <button type="button" class="btn btn-outline-info my-0 py-1" onClick="document.body.innerHTML+='<form id=_fm method=POST action={{url_for('joblog', id=job.id)}}></form>';document.getElementById('_fm').submit();">Show all logs</button>
+                </td>
+            </tr>
+        {% endif %}
+        </tbody>
+    </table>
 </div class="containter">
 {% endblock main_content %}
 {% block script_content %}
-<script>
-    {% if first_logs_only and job.pa_job_state != "Completed" %}
-        setTimeout(function(){ window.location.reload(1); }, 3000 )
-    {% endif %}
-</script>
+    <script>
+        {% if first_logs_only and job.pa_job_state != "Completed" %}
+            setTimeout(function(){ window.location.reload(1); }, 3000 )
+        {% endif %}
+    </script>
 {% endblock script_content %}
diff --git a/templates/jobs.html b/templates/jobs.html
index 33a3edb..aee2e31 100644
--- a/templates/jobs.html
+++ b/templates/jobs.html
@@ -49,19 +49,21 @@
     {% endfor %}
 </script>
 
+<div class="container-fluid">
 <h3>{{page_title}}</h3>
 <table id="job_tbl" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
 	<thead>
-		<tr class="thead-light"><th>Active Jobs</th><th>Job Started</th><th>Progress</th></tr>
+		<tr class="table-primary"><th>Active Jobs</th><th>Job Started</th><th>Progress</th></tr>
 	</thead>
 	<tbody>
     <script>
         for(el in active_rows)
             document.write(active_rows[el])
-        document.write( '<tr class="thead-light"><th>Completed Jobs</th><th>Job Started</th><th>Job Completed</th></tr>' )
+        document.write( '<tr class="table-primary"><th>Completed Jobs</th><th>Job Started</th><th>Job Completed</th></tr>' )
         for(el in completed_rows)
             document.write(completed_rows[el])
     </script>
 	</tbody>
 </table>
+</div class="container-fluid">
 {% endblock main_content %}
diff --git a/templates/login.html b/templates/login.html
index 5b38214..9dddc8a 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -8,7 +8,7 @@
 <link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/fontawesome-free-5.15.3-web/css/all.min.css' ) }}">
 
 <!-- Bootstrap CSS -->
-<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-4.6.0-dist/css/bootstrap.min.css' ) }}">
+<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-5.0.2-dist/css/bootstrap.min.css' ) }}">
 <link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/jquery.contextMenu.css' ) }}">
 
 <!-- code to get bootstrap to work -->
diff --git a/templates/persons.html b/templates/persons.html
index d47c11a..c2048a5 100644
--- a/templates/persons.html
+++ b/templates/persons.html
@@ -4,7 +4,7 @@
 <h3>Show All People</h3>
 <table id="person_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
 	<thead>
-		<tr class="thead-light"><th>Tag</th><th>Firstname(s)</th><th>Surname</th><th></th></tr>
+		<tr class="table-primary"><th>Tag</th><th>Firstname(s)</th><th>Surname</th><th></th></tr>
 	</thead>
 	<tbody>
 	{% for person in persons %}
diff --git a/templates/refimgs.html b/templates/refimgs.html
index 1af2343..64f7ffd 100644
--- a/templates/refimgs.html
+++ b/templates/refimgs.html
@@ -4,7 +4,7 @@
 <h3>Show All Reference Images</h3>
 <table id="refimg_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
 	<thead>
-		<tr class="thead-light"><th>Filename</th></tr>
+		<tr class="table-primary"><th>Filename</th></tr>
 	</thead>
 	<tbody>
 	{% for refimg in refimgs %}
diff --git a/templates/viewer.html b/templates/viewer.html
index e7b6523..a3dadf5 100644
--- a/templates/viewer.html
+++ b/templates/viewer.html
@@ -56,15 +56,14 @@
                     context.beginPath()
                     context.lineWidth = 0.1
                     context.font = "30px Arial"
-                    context.globalAlpha = 0.7
+                    context.globalAlpha = 0.6
                     bbox = context.measureText(faces[i].who);
-                    console.log(bbox)
                     f_h=bbox.fontBoundingBoxAscent
                     if( bbox.fontBoundingBoxDescent )
                         f_h += bbox.fontBoundingBoxDescent
                     f_h -= 8
                     context.rect( x+w/2-bbox.width/2, y-f_h, bbox.width, f_h )
-                    context.fillStyle="black"
+                    context.fillStyle="white"
                     context.fill()
                     context.stroke();
                     context.beginPath()
@@ -102,7 +101,7 @@
 <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" data-toggle="button" onClick="Toggle('faces')" style="border: 1px solid #5bc0de" faces=0><i class="fas fa-brain fa-2x"></i></button>
+        <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}}>