From 05611799ff9af990714052a60783f656f53c4813 Mon Sep 17 00:00:00 2001
From: Dylan Hillerbrand <dhillerbrand@gmail.com>
Date: Mon, 2 Dec 2024 10:15:08 -0500
Subject: [PATCH] fix(global search bar): display result data with embedded
 search bar

Create two new extendable templates for two common use cases with an embedded search bar: one more generally for the embedded search bar and one for views that display filterable tables.

Adjust all current views to use these templates where relevant.

Put the search bar in a bootstrap column so that dynamic search result previews fill the correct horizontal space.

Refs: DDMAL#1703
---
 .../main_app/templates/century_detail.html    | 31 ++++----
 .../main_app/templates/chant_search.html      | 76 ++++++++----------
 .../templates/chant_seq_by_cantus_id.html     | 18 ++---
 .../main_app/templates/contact.html           | 20 +++--
 .../main_app/templates/feast_detail.html      | 19 ++---
 .../main_app/templates/feast_list.html        | 32 +++-----
 .../filterable_table_with_search_bar.html     | 46 +++++++++++
 .../main_app/templates/genre_detail.html      | 17 ++--
 .../main_app/templates/genre_list.html        | 58 +++++++-------
 .../main_app/templates/indexer_list.html      | 23 +++---
 .../templates/institution_detail.html         | 79 +++++++++----------
 .../main_app/templates/institution_list.html  | 77 +++++++++---------
 .../main_app/templates/items_count.html       | 12 +--
 .../main_app/templates/notation_detail.html   | 33 ++++----
 .../main_app/templates/pagination.html        |  9 ++-
 .../main_app/templates/provenance_detail.html | 33 ++++----
 .../main_app/templates/sequence_detail.html   | 34 ++++----
 .../main_app/templates/sequence_list.html     | 20 ++---
 .../main_app/templates/service_detail.html    | 15 ++--
 .../main_app/templates/service_list.html      | 13 +--
 .../single_column_with_search_bar.html        | 29 +++++++
 .../main_app/templates/source_edit.html       |  1 -
 .../main_app/templates/source_list.html       | 20 ++---
 .../main_app/templates/user_detail.html       | 13 +--
 .../main_app/templates/user_list.html         | 24 +++---
 25 files changed, 374 insertions(+), 378 deletions(-)
 create mode 100644 django/cantusdb_project/main_app/templates/filterable_table_with_search_bar.html
 create mode 100644 django/cantusdb_project/main_app/templates/single_column_with_search_bar.html

diff --git a/django/cantusdb_project/main_app/templates/century_detail.html b/django/cantusdb_project/main_app/templates/century_detail.html
index b3c7e6e9c..631c6afe3 100644
--- a/django/cantusdb_project/main_app/templates/century_detail.html
+++ b/django/cantusdb_project/main_app/templates/century_detail.html
@@ -1,23 +1,24 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 
 {% block title %}
     <title>{{ century.name }} | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>{{ century.name }}</h3>
-    <ul>
-        {% for source in sources %}
-            <li>
-                <a href="{% url 'source-detail' source.id %}" title="{{ source.short_heading }}">
-                    {{ source.heading }}
-                </a>
-            </li>
-        {% endfor %}
-    </ul>
+{% endblock %}
+{% block maincontent %}
+<div class="row">
+    <div class="col">
+        <ul>
+            {% for source in sources %}
+                <li>
+                    <a href="{% url 'source-detail' source.id %}" title="{{ source.short_heading }}">
+                        {{ source.heading }}
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
 </div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/chant_search.html b/django/cantusdb_project/main_app/templates/chant_search.html
index 5ade5b0e1..a5a877d17 100644
--- a/django/cantusdb_project/main_app/templates/chant_search.html
+++ b/django/cantusdb_project/main_app/templates/chant_search.html
@@ -1,4 +1,5 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
+{% load humanize %}
 
 {% block title %}
     <title>Search Chants | Cantus Database</title>
@@ -8,53 +9,44 @@
     <script src="/static/js/chant_search.js"></script>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>Search Chants</h3>
+{% endblock %}
+{% block maincontent %}
     {% if source %}
         <p>
             <b>Searching in source: <a href="{% url 'source-detail' source.id %}" target="_blank">{{ source.short_heading }}</a></b>
         </p>
     {% elif keyword %}
-        <p>
-            <small>
+        <p class="small">
                 » <a href="https://cantusindex.org/search?t={{ keyword }}" title="Search {{ keyword }} on CantusIndex.org" target="_blank">
                     Search <b>{{ keyword }}</b> on CantusIndex.org
                 </a>
-            </small>
         </p>
     {% endif %}
 
     {% if chants.all %}
-        <p>
-            <small>Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of <b>{{ page_obj.paginator.count }}
-                    chant{{ page_obj.paginator.count|pluralize }}</b></small>
+        <p class="small">
+            Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of <b>{{ page_obj.paginator.count|intcomma }}</b>
+                    chant{{ page_obj.paginator.count|pluralize }}.
         </p>
     {% endif %}
-
     <form method="get">
         <div class="form-row align-items-end">
-            <div class="form-group m-1 col-12">
-                <label for="keywordSearch"><small>Keyword search</small></label>
-            </div>
-        </div>
-        <div class="form-row align-items-end">
-            <div class="form-group m-1 col-lg-3 col-sm-3 col-3">
+            <div class="form-group col-sm-3 col-12">
+                <label for="keywordSearch" class="small">Keyword search</label>
                 <select class="form-control custom-select custom-select-sm" id="opFilter" name="op">
                     <option selected value="contains">Contains</option>
                     <option value="starts_with">Starts with</option>
                 </select>
             </div>
-            <div class="form-group m-1 col-lg col-sm col-">
+            <div class="form-group col-sm-9 col-12">
                 <input type="text" class="form-control form-control-sm" name="keyword" id="keywordSearch" value="{{ request.GET.keyword }}" />
             </div>
         </div>
         <div class="form-row align-items-end">
-            <div class="form-group m-1 col-lg-3 col-sm-6">
-                <label for="serviceFilter"><small>Service</small></label>
+            <div class="form-group col-lg-3 col-sm-6 col-12">
+                <label for="serviceFilter" class="small">Service</label>
                 <select id="serviceFilter" name="service" class="form-control custom-select custom-select-sm">
                     <option value="">- Any -</option>
                     {% for service in services %}
@@ -62,8 +54,8 @@ <h3>Search Chants</h3>
                     {% endfor %}
                 </select>
             </div>
-            <div class="form-group m-1 col-lg-3 col-sm">
-                <label for="genreFilter"><small>Genre</small></label>
+            <div class="form-group col-lg-3 col-sm-6 col-12">
+                <label for="genreFilter" class="small">Genre</label>
                 <select id="genreFilter" name="genre" class="form-control custom-select custom-select-sm">
                     <option value="">- Any -</option>
                     {% for genre in genres %}
@@ -71,24 +63,24 @@ <h3>Search Chants</h3>
                     {% endfor %}
                 </select>
             </div>
-            <div class="form-group m-1 col-lg-3 col-sm-6">
-                <label for="cantus_id"><small>Cantus ID</small></label>
+            <div class="form-group col-lg-3 col-sm-6 col-12">
+                <label for="cantus_id" class="small">Cantus ID</label>
                 <input type="text" class="form-control form-control-sm" name="cantus_id" id="cantus_id" value="{{ request.GET.cantus_id }}" />
             </div>
-            <div class="form-group m-1 col-lg col-sm">
-                <label for="mode"><small>Mode</small></label>
+            <div class="form-group col-lg-3 col-sm-6 col-12">
+                <label for="mode" class="small">Mode</label>
                 <input type="text" class="form-control form-control-sm" name="mode" id="mode" value="{{ request.GET.mode }}" />
             </div>
-            <div class="form-group m-1 col-lg-3 col-sm-6">
-                <label for="feast"><small>Feast</small></label>
+            <div class="form-group col-lg-3 col-sm-6 col-12">
+                <label for="feast" class="small">Feast</label>
                 <input type="text" class="form-control form-control-sm" name="feast" id="feast" value="{{ request.GET.feast }}" />
             </div>
-            <div class="form-group m-1 col-lg-3 col-sm">
-                <label for="position"><small>Position</small></label>
+            <div class="form-group col-lg-3 col-sm-6 col-12">
+                <label for="position" class="small">Position</label>
                 <input type="text" class="form-control form-control-sm" name="position" id="position" value="{{ request.GET.position }}" />
             </div>
-            <div class="form-group m-1 col-lg-3 col-sm-6">
-                <label for="melodiesFilter"><small>Melodies</small></label>
+            <div class="form-group col-lg-3 col-sm-6 col-12">
+                <label for="melodiesFilter" class="small">Melodies</label>
                 <select class="form-control custom-select custom-select-sm" id="melodiesFilter" name="melodies">
                     <option value="">- Any -</option>
                     <option value="true">Chants with melodies</option>
@@ -97,25 +89,21 @@ <h3>Search Chants</h3>
         </div>
         {% if source %}
             <div class="form-row align-items-end">
-                <div class="form-group m-1 col-12">
-                    <label for="indexingNotesSearch"><small>Indexing notes search</small></label>
-                </div>
-            </div>
-            <div class="form-row align-items-end">
-                <div class="form-group m-1 col-lg-3 col-sm-3 col-3">
+                <div class="form-group col-sm-3 col-12">
+                    <label for="indexingNotesSearch" class="small">Indexing notes search</label>
                     <select class="form-control custom-select custom-select-sm" id="indexingNotesOp" name="indexing_notes_op">
                         <option selected value="contains">Contains</option>
                         <option value="starts_with">Starts with</option>
                     </select>
                 </div>
-                <div class="form-group m-1 col-lg col-sm col-">
+                <div class="form-group col-sm-9 col-12">
                     <input type="text" class="form-control form-control-sm"  id="indexingNotesSearch" name="indexing_notes" value="{{ request.GET.indexing_notes }}" />
                 </div>
             </div>
         {% endif %}
 
         <div class="form-row align-items-end">
-            <div class="form-group m-2 col-lg">
+            <div class="form-group col-lg">
                 <button type="submit" class="btn btn-dark btn-sm" id="btn-submit"> Apply </button>
             </div>
         </div>
@@ -315,12 +303,10 @@ <h3>Search Chants</h3>
                 </tbody>
             </table>
         </div>
-
         {% include "pagination.html" %}
     {% else %}
         {% if request.GET %}
-            No chants found.
+            <p class="text-center">No chants found.</p>
         {% endif %}
     {% endif %}
-</div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/chant_seq_by_cantus_id.html b/django/cantusdb_project/main_app/templates/chant_seq_by_cantus_id.html
index 19543c760..5ad5a6344 100644
--- a/django/cantusdb_project/main_app/templates/chant_seq_by_cantus_id.html
+++ b/django/cantusdb_project/main_app/templates/chant_seq_by_cantus_id.html
@@ -1,21 +1,17 @@
-{% extends "base.html" %}
+{% extends "filterable_table_with_search_bar.html" %}
 
 {% block title %}
     <title>Chants by Cantus ID: {{ cantus_id }} | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-    <!-- global search bar-->
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>
         Chants by Cantus ID: <a href="https://cantusindex.org/id/{{ cantus_id }}" target="_blank">
             {{ cantus_id }}
         </a>
     </h3>
-    <small>Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of <b>{{ page_obj.paginator.count }}</b> chants</small>
+{% endblock %}
+{% block list_table %}
     <div class="table-responsive">
         <table class="table table-bordered table-sm small">
             <thead>
@@ -78,9 +74,9 @@ <h3>
                         <td class="text-wrap">
                             {{ chant.mode|default:"" }}
                         </td>
-                        <td class="text-wrap" style="font-family: volpiano; font-size:30px">
+                        <td class="text-wrap text-center">
                             {% if chant.volpiano %}
-                                <a href="{% url 'chant-detail' chant.id %}" style="text-decoration: none" title="Chant has volpiano melody">1</a>
+                                <a href="{% url 'chant-detail' chant.id %}" style="text-decoration: none" title="Chant has volpiano melody">♫</a>
                             {% endif %}
                         </td>
                         <td class="text-wrap">
@@ -93,6 +89,4 @@ <h3>
             </tbody>
         </table>
     </div>
-    {% include "pagination.html" %}
-</div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/contact.html b/django/cantusdb_project/main_app/templates/contact.html
index 50ddfe0f2..e0d1b2702 100644
--- a/django/cantusdb_project/main_app/templates/contact.html
+++ b/django/cantusdb_project/main_app/templates/contact.html
@@ -1,18 +1,16 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 
 {% block title %}
     <title>Contact | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <!-- global search bar-->
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
-
+{% block header %}
     <h3>Contact</h3>
-    <p style="padding-top: 25px;">Please direct questions or comments about Cantus Database to Debra Lacoste at <a href="mailto:debra.lacoste@dal.ca">debra.lacoste@dal.ca</a>.</p>
-
-</div>
+{% endblock %}
+{% block maincontent %}
+    <div class="row">
+        <div class="col">
+            <p class="pt-4">Please direct questions or comments about Cantus Database to Debra Lacoste at <a href="mailto:debra.lacoste@dal.ca">debra.lacoste@dal.ca</a>.</p>
+        </div>
+    </div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/feast_detail.html b/django/cantusdb_project/main_app/templates/feast_detail.html
index 5dde5423c..9ecf2da28 100644
--- a/django/cantusdb_project/main_app/templates/feast_detail.html
+++ b/django/cantusdb_project/main_app/templates/feast_detail.html
@@ -1,19 +1,17 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 {% load helper_tags %} {# for month_to_string #}
 
 {% block title %}
     <title>{{ feast.name }} | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>{{ feast.name }}</h3>
-    <p>{{ feast.description }}</p>
-
-    <br>
+{% endblock %}
+{% block maincontent %}
+    <div class="row px-3">
+        <p>{{ feast.description }}</p>
+    </div>
     <div class="row">
         {% if feast.feast_code %}
             <div class="col">
@@ -42,8 +40,6 @@ <h3>{{ feast.name }}</h3>
             </div>
         {% endif %}
     </div>
-
-    <br>
     <div class="row">
         {% if frequent_chants %}
             <div class="col">
@@ -104,5 +100,4 @@ <h4>Sources containing the feast</h4>
             </div>
         {% endif %}
     </div>
-</div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/feast_list.html b/django/cantusdb_project/main_app/templates/feast_list.html
index 045fd7806..e5677a9ba 100644
--- a/django/cantusdb_project/main_app/templates/feast_list.html
+++ b/django/cantusdb_project/main_app/templates/feast_list.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "filterable_table_with_search_bar.html" %}
 {% load helper_tags %} {# for month_to_string #}
 
 {% block title %}
@@ -9,21 +9,17 @@
     <script src="/static/js/feast_list.js"></script>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
-
+{% block header %}
     <h3>List of Feasts</h3>
-    <small>Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of {{ page_obj.paginator.count }}</small>
+{% endblock %}
+{% block list_filter_form %}
     <form method="get">
         <div class="form-row align-items-end">
-            <div class="form-group m-1 col-lg-5">
+            <div class="form-group mr-1 col-lg-5">
                 <label for="feastSearch"><small>Search feasts/feast codes</small></label>
                 <input id="feastSearch" name="q" type="text" class="form-control form-control-sm" placeholder="Type any part of a word or feast code" value="{{ request.GET.q }}" />
             </div>
-            <div class="form-group m-1 col-lg">
+            <div class="form-group mr-1 col-lg">
                 <label for="dateFilter"><small>Temp/Sanc</small></label>
                 <select id="dateFilter" name="date" class="form-control custom-select custom-select-sm">
                     <option value="">- Any -</option>
@@ -31,7 +27,7 @@ <h3>List of Feasts</h3>
                     <option value="sanc">Sanctorale</option>
                 </select>
             </div>
-            <div class="form-group m-1 col-lg">
+            <div class="form-group mr-1 col-lg">
                 <label for="monthFilter"><small>Month</small></label>
                 <select id="monthFilter" name="month" class="form-control custom-select custom-select-sm">
                     <option value="">- Any -</option>
@@ -49,18 +45,20 @@ <h3>List of Feasts</h3>
                     <option value="10">October</option>
                 </select>
             </div>
-            <div class="form-group m-1 col-lg-2">
-                <label for="sortBy"><small>Sort By</small></label>
+            <div class="form-group mr-1 col-lg-2">
+                <label for="sortBy"><small>Sort by</small></label>
                 <select class="form-control custom-select custom-select-sm" id="sortBy" name="sort_by">
                     <option value="name">Feast Name</option>
                     <option value="feast_code">Feast Code (Date)</option>
                 </select>
             </div>
-            <div class="form-group m-1 col-lg">
+            <div class="form-group col-lg">
                 <button type="submit" class="btn btn-dark btn-sm"> Apply </button>
             </div>
         </div>
     </form>
+{% endblock %}
+{% block list_table %}
     {% if feasts %}
         <table class="table table-bordered table-sm small">
             <thead>
@@ -89,10 +87,6 @@ <h3>List of Feasts</h3>
                     </tr>
                 {% endfor %}
             </tbody>
-        </table>
-        {% include "pagination.html" %}    
-    {% else %}
-        No feasts found.
+        </table>  
     {% endif %}
-</div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/filterable_table_with_search_bar.html b/django/cantusdb_project/main_app/templates/filterable_table_with_search_bar.html
new file mode 100644
index 000000000..ae1ad6a88
--- /dev/null
+++ b/django/cantusdb_project/main_app/templates/filterable_table_with_search_bar.html
@@ -0,0 +1,46 @@
+{% extends "single_column_with_search_bar.html" %}
+{% load humanize %}
+{# A template for use with list pages. The template introduces the following blocks:
+    - list_filter_form: a block for the form displayed above the table that powers list/table filtering
+    - list_table: a block for the table that displays the list
+    A header block is inherited from `single_column_with_search_bar.html` and is displayed alongside
+    global search bar at the top of the page.
+    This template also handles display of an object count shown beneath the header: "Displaying x-y of N
+    [object type]". Views using this template must pass a `Page` object as `page_obj` in the context (this 
+    happens by default in views with a `MultipleObjectMixin`). The template uses the `context_object_name`
+    attribute of the view to determine the object type to display in this object count.
+    Pagination is included at the bottom of the page, except if no results are found.
+    #}
+
+{% block maincontent %}
+    <div class="row">
+        <div class="col">
+            <p class="small mx-0">Displaying {{ page_obj.start_index|intcomma }}-{{ page_obj.end_index|intcomma }} of <b>{{ page_obj.paginator.count|intcomma }}</b> {{ view.context_object_name }}.</p>
+        </div>
+    </div>
+    <div class="mb-3">
+        {% block list_filter_form %}
+        {% endblock %}
+    </div>      
+    {% if page_obj.paginator.count > 0 %}
+        <div class="row">
+            <div class="col">
+                {% block list_table %}
+                {% endblock %}
+            </div>
+        </div>
+    {% else %}
+        <div class="row mt-4">
+            <div class="col">
+                <p class="text-center">No {{ view.context_object_name }} found.</p>
+            </div>
+        </div>
+    {% endif %}
+    {% if page_obj.paginator.num_pages > 1%}
+        <div class="row">
+            <div class="col">
+                {% include "pagination.html" %}
+            </div>
+        </div>
+    {% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/django/cantusdb_project/main_app/templates/genre_detail.html b/django/cantusdb_project/main_app/templates/genre_detail.html
index bd32c5cbf..181e3d4de 100644
--- a/django/cantusdb_project/main_app/templates/genre_detail.html
+++ b/django/cantusdb_project/main_app/templates/genre_detail.html
@@ -1,16 +1,17 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 
 {% block title %}
     <title>{{ genre.name }} | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
-
+{% block header %}
     <h3>{{ genre.name }}</h3>
-    <p>{{ genre.description }}</p>
+{% endblock %}
+
+{% block maincontent %}
+<div class="row">
+    <div class="col">
+        <p>{{ genre.description }}</p>
+    </div>
 </div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/genre_list.html b/django/cantusdb_project/main_app/templates/genre_list.html
index e68d8e5e5..77f8d86bc 100644
--- a/django/cantusdb_project/main_app/templates/genre_list.html
+++ b/django/cantusdb_project/main_app/templates/genre_list.html
@@ -1,37 +1,35 @@
-{% extends "base.html" %}
+{% extends "filterable_table_with_search_bar.html" %}
 {% load helper_tags %}
 {% block title %}
     <title>List of Genres | Cantus Database</title>
 {% endblock %}
-{% block content %}
-    <div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-        <object align="right" class="search-bar">
-            {% include "global_search_bar.html" %}
-        </object>
-        <h3>
-            List of Genres
-        </h3>
-        <small>Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of <b>{{ page_obj.paginator.count }}</b></small>
-        <table class="table table-sm small table-bordered">
-            <thead>
+{% block scripts %}
+    <script src="/static/js/genre_list.js"></script>
+{% endblock %}
+{% block header %}
+    <h3>
+        List of Genres
+    </h3>
+{% endblock %}
+{% block list_table %}
+    <table class="table table-sm small table-bordered">
+        <thead>
+            <tr>
+                {% sortable_header request "name" "Abbreviation" %}
+                {% sortable_header request "description" "Genre" %}
+            </tr>
+        </thead>
+        <tbody>
+            {% for genre in genres %}
                 <tr>
-                    {% sortable_header request "name" "Abbreviation" %}
-                    {% sortable_header request "description" "Genre" %}
+                    <td style="text-align:center">
+                        <a href="{% url 'genre-detail' genre.id %}"><b>{{ genre.name }}</b></a>
+                    </td>
+                    <td style="text-align:center">
+                        {{ genre.description|default:"" }}
+                    </td>
                 </tr>
-            </thead>
-            <tbody>
-                {% for genre in genres %}
-                    <tr>
-                        <td style="text-align:center">
-                            <a href="{% url 'genre-detail' genre.id %}"><b>{{ genre.name }}</b></a>
-                        </td>
-                        <td style="text-align:center">
-                            {{ genre.description|default:"" }}
-                        </td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-        {% include "pagination.html" %}
-    </div>
+            {% endfor %}
+        </tbody>
+    </table>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/indexer_list.html b/django/cantusdb_project/main_app/templates/indexer_list.html
index eb1144f12..7a14bcae2 100644
--- a/django/cantusdb_project/main_app/templates/indexer_list.html
+++ b/django/cantusdb_project/main_app/templates/indexer_list.html
@@ -1,26 +1,23 @@
-{% extends "base.html" %}
+{% extends "filterable_table_with_search_bar.html" %}
 
 {% block title %}
     <title>List of Indexers | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>List of Indexers</h3>
-    <small>Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of <b>{{ page_obj.paginator.count }}</b></small>
-    <form method="get">
-        <div class="input-group w-25">
-            <input type="text" class="form-control" placeholder="Type any part of a word" name="q" value="{{ request.GET.q }}">
+{% endblock %}
+{% block list_filter_form %}
+    <form method="get" class="form-row">
+        <div class="input-group col-5">
+            <input type="text" class="form-control" placeholder="Type any part of name, institution, city, or country" name="q" value="{{ request.GET.q }}">
             <div class="input-group-append">
                 <button type="submit" class="btn btn-dark btn-sm"> Search </button>
             </div>
         </div>
     </form>
-    <br>
-    
+{% endblock %}
+{% block list_table %}
     <table class="table table-bordered table-sm small">
         <thead>
             <tr>
@@ -51,6 +48,4 @@ <h3>List of Indexers</h3>
             {% endfor %}
         </tbody>
     </table>
-    {% include "pagination.html" %}
-</div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/institution_detail.html b/django/cantusdb_project/main_app/templates/institution_detail.html
index b22ba9bbb..dda7961c5 100644
--- a/django/cantusdb_project/main_app/templates/institution_detail.html
+++ b/django/cantusdb_project/main_app/templates/institution_detail.html
@@ -1,17 +1,15 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 
 {% block title %}
 
 {% endblock %}
 
-{% block content %}
-    <div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-        <object align="right" class="search-bar">
-            {% include "global_search_bar.html" %}
-        </object>
-        <h3>{{ institution.name }} {% if institution.siglum %}({{ institution.siglum }}){% endif %}</h3>
-        <h4>{% if institution.city %}{{ institution.city }}{% else %}[No City]{% endif %}, {{ institution.country }}</h4>
-        {% if institution_authorities %}
+{% block header %}
+    <h3>{{ institution.name }} {% if institution.siglum %}({{ institution.siglum }}){% endif %}</h3>
+    <h4>{% if institution.city %}{{ institution.city }}{% else %}[No City]{% endif %}, {{ institution.country }}</h4>
+{% endblock %}
+{% block maincontent %}
+    {% if institution_authorities %}
         <hr />
         <div class="row">
             <div class="col">
@@ -20,20 +18,42 @@ <h4>{% if institution.city %}{{ institution.city }}{% else %}[No City]{% endif %
                 {% endfor %}
             </div>
         </div>
+    {% endif %}
+    <hr />
+    <div class="row">
+        {% if num_cantus_sources > 0 %}
+        <div class="col">
+            <h5>Cantus Database</h5>
+            <table class="table table-bordered table-sm small">
+                <thead>
+                    <tr>
+                        <th>Sources</th>
+                    </tr>
+                </thead>
+                <tbody>
+                {% for source in cantus_sources %}
+                    <tr>
+                        <td>
+                            <a href="{% url "source-detail" source.id %}"><b>{{ source.shelfmark }}{% if source.name %} ("{{ source.name }}"){% endif %}</b></a>
+                        </td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
         {% endif %}
-        <hr />
-        <div class="row">
-            {% if num_cantus_sources > 0 %}
+    
+        {% if num_bower_sources > 0 %}
             <div class="col">
-                <h5>Cantus Database</h5>
+                <h5>Clavis Sequentiarum (Sequence Database by Calvin Bower)</h5>
                 <table class="table table-bordered table-sm small">
                     <thead>
-                        <tr>
-                            <th>Sources</th>
-                        </tr>
+                    <tr>
+                        <th>Sources</th>
+                    </tr>
                     </thead>
                     <tbody>
-                    {% for source in cantus_sources %}
+                    {% for source in bower_sources %}
                         <tr>
                             <td>
                                 <a href="{% url "source-detail" source.id %}"><b>{{ source.shelfmark }}{% if source.name %} ("{{ source.name }}"){% endif %}</b></a>
@@ -43,29 +63,6 @@ <h5>Cantus Database</h5>
                     </tbody>
                 </table>
             </div>
-            {% endif %}
-        
-            {% if num_bower_sources > 0 %}
-                <div class="col">
-                    <h5>Clavis Sequentiarum (Sequence Database by Calvin Bower)</h5>
-                    <table class="table table-bordered table-sm small">
-                        <thead>
-                        <tr>
-                            <th>Sources</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% for source in bower_sources %}
-                            <tr>
-                                <td>
-                                    <a href="{% url "source-detail" source.id %}"><b>{{ source.shelfmark }}{% if source.name %} ("{{ source.name }}"){% endif %}</b></a>
-                                </td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-            {% endif %}
-        </div>
+        {% endif %}
     </div>
 {% endblock %}
\ No newline at end of file
diff --git a/django/cantusdb_project/main_app/templates/institution_list.html b/django/cantusdb_project/main_app/templates/institution_list.html
index b4fa0c1a7..b7bdc3dd8 100644
--- a/django/cantusdb_project/main_app/templates/institution_list.html
+++ b/django/cantusdb_project/main_app/templates/institution_list.html
@@ -1,48 +1,43 @@
-{% extends "base.html" %}
+{% extends "filterable_table_with_search_bar.html" %}
 
 {% block title %}
-
+    <title>Institutions | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-    <div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-        <object align="right" class="search-bar">
-            {% include "global_search_bar.html" %}
-        </object>
-        <h3>Institutions</h3>
-        <small>Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of {{ page_obj.paginator.count }}</small>
-        <table class="table table-bordered table-sm small">
-            <thead>
+{% block header %}
+    <h3>Institutions</h3>
+{% endblock %}
+{% block list_table %}
+    <table class="table table-bordered table-sm small">
+        <thead>
+            <tr>
+                <th scope="col" class="text-wrap" title="Country">Country</th>
+                <th scope="col" class="text-wrap" title="City">City</th>
+                <th scope="col" class="text-wrap" title="Name">Name</th>
+                <th scope="col" class="text-wrap" title="Sources">Sources</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for institution in institutions %}
                 <tr>
-                    <th scope="col" class="text-wrap" title="Country">Country</th>
-                    <th scope="col" class="text-wrap" title="City">City</th>
-                    <th scope="col" class="text-wrap" title="Name">Name</th>
-                    <th scope="col" class="text-wrap" title="Sources">Sources</th>
+                    <td class="text-wrap">
+                        {{ institution.country }}
+                    </td>
+                    <td>
+                        {% if institution.city %}
+                            {{ institution.city }}
+                        {% else %}
+                            [No City]
+                        {% endif %}
+                    </td>
+                    <td class="text-wrap">
+                        <a href="{% url "institution-detail" institution.id %}">
+                            <b>{{ institution.name }} {% if institution.siglum %}({{ institution.siglum }}){% endif %}</b>
+                        </a>
+                    </td>
+                    <td>{{ institution.num_sources }}</td>
                 </tr>
-            </thead>
-            <tbody>
-                {% for institution in institutions %}
-                    <tr>
-                        <td class="text-wrap">
-                            {{ institution.country }}
-                        </td>
-                        <td>
-                            {% if institution.city %}
-                                {{ institution.city }}
-                            {% else %}
-                                [No City]
-                            {% endif %}
-                        </td>
-                        <td class="text-wrap">
-                            <a href="{% url "institution-detail" institution.id %}">
-                                <b>{{ institution.name }} {% if institution.siglum %}({{ institution.siglum }}){% endif %}</b>
-                            </a>
-                        </td>
-                        <td>{{ institution.num_sources }}</td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-        {% include "pagination.html" %}
-    </div>
+            {% endfor %}
+        </tbody>
+    </table>
 {% endblock %}
\ No newline at end of file
diff --git a/django/cantusdb_project/main_app/templates/items_count.html b/django/cantusdb_project/main_app/templates/items_count.html
index 4f0dcf277..3559cf2a9 100644
--- a/django/cantusdb_project/main_app/templates/items_count.html
+++ b/django/cantusdb_project/main_app/templates/items_count.html
@@ -1,16 +1,14 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 {% load humanize %}
 
 {% block title %}
     <title>Content Statistics | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>Content Statistics</h3>
+{% endblock %}
+{% block maincontent %}
     <table class="table table-sm table-bordered table-striped">
         <thead>
             <tr>
@@ -35,6 +33,4 @@ <h3>Content Statistics</h3>
             </tr>
         </tbody>
     </table>
-
-</div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/notation_detail.html b/django/cantusdb_project/main_app/templates/notation_detail.html
index cd01c3327..ba9d3367f 100644
--- a/django/cantusdb_project/main_app/templates/notation_detail.html
+++ b/django/cantusdb_project/main_app/templates/notation_detail.html
@@ -1,23 +1,24 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 
 {% block title %}
     <title>{{ notation.name }} | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>{{ notation.name }}</h3>
-    <ul>
-        {% for source in sources %}
-            <li>
-                <a href="{% url 'source-detail' source.id %}" title="{{ source.heading }}">
-                    ({{ source.holding_institution.siglum }}) {{ source.heading }}
-                </a>
-            </li>
-        {% endfor %}
-    </ul>
-</div>
+{% endblock %}
+{% block maincontent %}
+    <div class="row">
+        <div class="col">
+            <ul>
+                {% for source in sources %}
+                    <li>
+                        <a href="{% url 'source-detail' source.id %}" title="{{ source.heading }}">
+                            ({{ source.holding_institution.siglum }}) {{ source.heading }}
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/pagination.html b/django/cantusdb_project/main_app/templates/pagination.html
index 3f1074e8b..03b3efeeb 100644
--- a/django/cantusdb_project/main_app/templates/pagination.html
+++ b/django/cantusdb_project/main_app/templates/pagination.html
@@ -1,7 +1,8 @@
 {% load helper_tags %} {# for url_add_get_params #}
+{% load humanize %}
 
 <div class="pagination">
-    <span class="step-links">
+    <span class="step-links small">
         {% if page_obj.has_previous %}
             <a href="?{% url_add_get_params page=1 %}">&laquo; first</a>
         {% endif %}
@@ -13,9 +14,9 @@
         {% for num in page_obj.paginator.page_range %}
             {% if num > page_obj.number|add:'-6' and num < page_obj.number|add:'6' %}
                 {% if num == page_obj.number %}
-                    <b>{{ num }}</b>
+                    <b>{{ num|intcomma }}</b>
                 {% else %}
-                    <a href="?{% url_add_get_params page=num %}">{{ num }}</a>
+                    <a href="?{% url_add_get_params page=num %}">{{ num|intcomma }}</a>
                 {% endif %}
             {% endif %}
         {% endfor %}
@@ -30,4 +31,4 @@
     </span>
 </div>
 
-<span class="current">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
\ No newline at end of file
+<span class="current small">Page {{ page_obj.number|intcomma }} of {{ page_obj.paginator.num_pages|intcomma }}</span>
\ No newline at end of file
diff --git a/django/cantusdb_project/main_app/templates/provenance_detail.html b/django/cantusdb_project/main_app/templates/provenance_detail.html
index 13abcbfdb..5057b549d 100644
--- a/django/cantusdb_project/main_app/templates/provenance_detail.html
+++ b/django/cantusdb_project/main_app/templates/provenance_detail.html
@@ -1,23 +1,24 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 
 {% block title %}
     <title>{{ provenance.name }} | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>{{ provenance.name }}</h3>
-    <ul>
-        {% for source in sources %}
-            <li>
-                <a href="{% url 'source-detail' source.id %}" title="{{ source.heading }}">
-                    {{ source.heading }}
-                </a>
-            </li>
-        {% endfor %}
-    </ul>
-</div>
+{% endblock %}
+{% block maincontent %}
+    <div class="row">
+        <div class="col">
+            <ul>
+                {% for source in sources %}
+                    <li>
+                        <a href="{% url 'source-detail' source.id %}" title="{{ source.heading }}">
+                            {{ source.heading }}
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/sequence_detail.html b/django/cantusdb_project/main_app/templates/sequence_detail.html
index cb0323bb2..9ae13fc02 100644
--- a/django/cantusdb_project/main_app/templates/sequence_detail.html
+++ b/django/cantusdb_project/main_app/templates/sequence_detail.html
@@ -1,28 +1,26 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 
 {% block title %}
     <title>{{ sequence.title }} | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <!--Display "submit success" message -->
-    {% if messages %}
-        <div class="alert alert-success alert-dismissible">
-            {% for message in messages %}
-                {{ message }}
-            {% endfor %}
-        </div>
-    {% endif %}
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>{{ sequence.title }}</h3>
     {% if user_can_edit_sequence %}
-        <p>
-            View | <a href="{% url "sequence-edit" sequence.id %}">Edit</a>
-        </p>
+    <p>
+        View | <a href="{% url "sequence-edit" sequence.id %}">Edit</a>
+    </p>
     {% endif %}
+{% endblock %}
+{% block maincontent %}
+<!--Display "submit success" message -->
+{% if messages %}
+<div class="alert alert-success alert-dismissible">
+    {% for message in messages %}
+        {{ message }}
+    {% endfor %}
+</div>
+{% endif %}
     <dl>
         <dt>
             Siglum
@@ -223,6 +221,4 @@ <h4>Concordances</h4>
             </table>
         </div>
     {% endif %}
-</div>
-
 {% endblock %}
\ No newline at end of file
diff --git a/django/cantusdb_project/main_app/templates/sequence_list.html b/django/cantusdb_project/main_app/templates/sequence_list.html
index a74ba919f..ab5bc7d72 100644
--- a/django/cantusdb_project/main_app/templates/sequence_list.html
+++ b/django/cantusdb_project/main_app/templates/sequence_list.html
@@ -1,19 +1,15 @@
-{% extends "base.html" %}
+{% extends "filterable_table_with_search_bar.html" %}
 
 {% block title %}
     <title>Clavis Sequentiarum (Calvin Bower) | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>Clavis Sequentiarum (Calvin Bower)</h3>
-    <small>Displaying <b>{{ page_obj.start_index }}-{{ page_obj.end_index }}</b> of <b>{{ page_obj.paginator.count }}</b></small>
-
+{% endblock %}
+{% block list_filter_form %}
     <form method="get">
-        <div class="form-row align-items-end">
+        <div class="form-row align-items-end mb-2">
             <div class="form-group m-1">
                 <label for="incipit"><small><b>Incipit (any part)</b></small></label>
                 <input type="text" class="form-control form-control-sm" name="incipit" value="{{ request.GET.incipit }}" id="incipit">
@@ -31,6 +27,8 @@ <h3>Clavis Sequentiarum (Calvin Bower)</h3>
             </div>
         </div>
     </form>
+{% endblock %}
+{% block list_table %}
     {% if sequences %}
         <div class="table-responsive">
             <table class="table table-bordered table-sm small">
@@ -86,9 +84,5 @@ <h3>Clavis Sequentiarum (Calvin Bower)</h3>
                 </tbody>
             </table>
         </div>
-    {% else %}
-        No sequences found.
     {% endif %}
-    {% include "pagination.html" %}
-</div>
 {% endblock %}
\ No newline at end of file
diff --git a/django/cantusdb_project/main_app/templates/service_detail.html b/django/cantusdb_project/main_app/templates/service_detail.html
index 8c4f14f80..7fc2d387a 100644
--- a/django/cantusdb_project/main_app/templates/service_detail.html
+++ b/django/cantusdb_project/main_app/templates/service_detail.html
@@ -1,15 +1,16 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 
 {% block title %}
     <title>{{ service.name }} | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>{{ service.name }}</h3>
-    <p>{{ service.description }}</p>
+{% endblock %}
+{% block maincontent %}
+<div class="row">
+    <div class="col">
+        <p>{{ service.description }}</p>
+    </div>
 </div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/service_list.html b/django/cantusdb_project/main_app/templates/service_list.html
index 19e6871c4..526210905 100644
--- a/django/cantusdb_project/main_app/templates/service_list.html
+++ b/django/cantusdb_project/main_app/templates/service_list.html
@@ -1,16 +1,13 @@
-{% extends "base.html" %}
+{% extends "filterable_table_with_search_bar.html" %}
 
 {% block title %}
     <title>Service Abbreviations | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>Service Abbreviations</h3>
-    <small>Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of {{ page_obj.paginator.count }}</small>
+{% endblock %}
+{% block list_table %}
     <table class="table table-bordered table-sm small">
         <thead>
             <tr>
@@ -29,6 +26,4 @@ <h3>Service Abbreviations</h3>
             {% endfor %}
         </tbody>
     </table>
-    {% include "pagination.html" %}
-</div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/single_column_with_search_bar.html b/django/cantusdb_project/main_app/templates/single_column_with_search_bar.html
new file mode 100644
index 000000000..c1cd4774a
--- /dev/null
+++ b/django/cantusdb_project/main_app/templates/single_column_with_search_bar.html
@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{# A template that provides a single column layout with a search bar in the upper-right corner. On
+    narrower screens, the search bar jumps above the main header. #}
+{# The template introduces the following blocks:
+    - header: a block for content that should appear in the upper-left corner of the content area
+    - maincontent: a block for the main content of the page (under the header and search bar)
+    #} 
+
+{% block content %}
+<div class="p-3 mx-auto bg-white rounded container">
+    <div class="row">
+        <div class="col-lg-4 search-bar order-lg-2">
+            {% include "global_search_bar.html" %}
+        </div>
+        <div class="col-lg-8 order-lg-1 pt-2 pt-lg-0">
+            {% block header %}
+            {# Contents of header block show in the upper-left corner of content, in the same row as the search bar #}
+            {% endblock %}
+        </div>
+    </div>
+    <div class="row">
+        <div class="container">
+            {% block maincontent %}
+            {# Contents of maincontent block show below the header block and search bar #}
+            {% endblock %}
+        </div>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/django/cantusdb_project/main_app/templates/source_edit.html b/django/cantusdb_project/main_app/templates/source_edit.html
index ecc7539f2..a7a1650f2 100644
--- a/django/cantusdb_project/main_app/templates/source_edit.html
+++ b/django/cantusdb_project/main_app/templates/source_edit.html
@@ -11,7 +11,6 @@
     {{ form.media }}
 {% endblock %}
 
-
 {% block uppersidebar %}
     <div class="search-bar mb-3">
         {% include "global_search_bar.html" %}
diff --git a/django/cantusdb_project/main_app/templates/source_list.html b/django/cantusdb_project/main_app/templates/source_list.html
index d4e73a583..8fe4c5de0 100644
--- a/django/cantusdb_project/main_app/templates/source_list.html
+++ b/django/cantusdb_project/main_app/templates/source_list.html
@@ -1,7 +1,6 @@
-{% extends "base.html" %}
+{% extends "filterable_table_with_search_bar.html" %}
 {% load helper_tags %}
 
-
 {% block title %}
     <title>Browse Sources | Cantus Database</title>
 {% endblock %}
@@ -10,15 +9,10 @@
     <script src="/static/js/source_list.js"></script>
 {% endblock %}
 
-{% block content %}
-    <div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-    <!-- global search bar-->
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>Browse Sources</h3>
-    <small>Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of <b>{{ page_obj.paginator.count }}</b> sources</small>
-
+{% endblock %}
+{% block list_filter_form %}
     <form method="get">
         <div class="form-row align-items-end">
             <div class="form-group m-1 col-lg">
@@ -93,6 +87,8 @@ <h3>Browse Sources</h3>
             </div> 
         </div>
     </form>
+{% endblock %}
+{% block list_table %}
     {% if sources %}
         <table class="table table-sm small table-bordered table-responsive">
             <thead>
@@ -163,9 +159,5 @@ <h3>Browse Sources</h3>
                 {% endfor %}
             </tbody>
         </table>
-        {% include "pagination.html" %}
-    {% else %}
-        No sources found.
     {% endif %}
-</div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/user_detail.html b/django/cantusdb_project/main_app/templates/user_detail.html
index 16735d703..d99d09815 100644
--- a/django/cantusdb_project/main_app/templates/user_detail.html
+++ b/django/cantusdb_project/main_app/templates/user_detail.html
@@ -1,15 +1,10 @@
-{% extends "base.html" %}
+{% extends "single_column_with_search_bar.html" %}
 
 {% block title %}
     <title>{{ user.full_name|default_if_none:"User" }} | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 mx-auto bg-white rounded">
-    <!-- global search bar-->
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>
         {% if user.full_name %}
             {{ user.full_name }}
@@ -17,6 +12,8 @@ <h3>
             User {{ user.id }}
         {% endif %}
     </h3>
+{% endblock %}
+{% block maincontent %}
     <dl class="list-inline">
         {% if user.institution %}
             <dt>Institution</dt>
@@ -90,6 +87,4 @@ <h5>Edited</h5>
             </ul>
         {% endif %}
     {% endif %}
-    <h4>
-</div>
 {% endblock %}
diff --git a/django/cantusdb_project/main_app/templates/user_list.html b/django/cantusdb_project/main_app/templates/user_list.html
index 76192ee5e..b2d8bf1e6 100644
--- a/django/cantusdb_project/main_app/templates/user_list.html
+++ b/django/cantusdb_project/main_app/templates/user_list.html
@@ -1,26 +1,24 @@
-{% extends "base.html" %}
+{% extends "filterable_table_with_search_bar.html" %}
 
 {% block title %}
     <title>All Users | Cantus Database</title>
 {% endblock %}
 
-{% block content %}
-<div class="mr-3 p-3 col-md-12 mx-auto bg-white rounded">
-    <object align="right" class="search-bar">
-        {% include "global_search_bar.html" %}
-    </object>
+{% block header %}
     <h3>All Users</h3>
-    <small>Displaying {{ page_obj.start_index }}-{{ page_obj.end_index }} of <b>{{ page_obj.paginator.count }}</b></small>
-    <form method="get">
-        <div class="input-group w-25">
-            <input type="text" class="form-control" placeholder="Type any part of a word" name="q" value="{{ request.GET.q }}">
+{% endblock %}
+
+{% block list_filter_form %}
+    <form method="get" class="form-row">
+        <div class="input-group col-5">
+            <input type="text" class="form-control" placeholder="Type any part of name, institution, city, or country" name="q" value="{{ request.GET.q }}">
             <div class="input-group-append">
                 <button type="submit" class="btn btn-dark btn-sm"> Search </button>
             </div>
         </div>
     </form>
-    <br>
-    
+{% endblock %}
+{% block list_table %}
     <table class="table table-bordered table-sm small">
         <thead>
             <tr>
@@ -47,6 +45,4 @@ <h3>All Users</h3>
             {% endfor %}
         </tbody>
     </table>
-    {% include "pagination.html" %}
-</div>
 {% endblock %}