Skip to content

Upgrade Bootstrap 4 to Bootstrap 5 across monorepo #374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tlambert03 wants to merge 2 commits into from
Closed

Upgrade Bootstrap 4 to Bootstrap 5 across monorepo #374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
73b54a1
Upgrade from Bootstrap 4 to Bootstrap 5
claude Nov 14, 2025
b1284a8
Fix Bootstrap 5 migration issues - comprehensive update
claude Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions backend/config/settings/base.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
"django_structlog", # Structured logging
"scout_apm.django", # APM monitoring
"crispy_forms", # Form layouts
# "crispy_bootstrap4",
"crispy_bootstrap5",
"allauth", # registration
"allauth.account", # registration
"allauth.socialaccount", # registration
Expand Down Expand Up @@ -208,8 +208,8 @@
]

# See: http://django-crispy-forms.readthedocs.io/en/latest/install.html#template-packs
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap4"
CRISPY_TEMPLATE_PACK = "bootstrap4"
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
CRISPY_TEMPLATE_PACK = "bootstrap5"


# STATIC FILE CONFIGURATION
Expand Down
6 changes: 3 additions & 3 deletions backend/favit/templates/favit/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load i18n fpbase_tags %}
{% if authenticated %}
<div class="favit{% if undo %} is-favorited{% endif %}" data-toggle="tooltip" data-placement="top" title="{% if undo %}Remove from{% else %}Add to{% endif %} favorites" >
<a class="btn favorite" id="add_remove_favorite" href="" data-action-url="{% url 'favit:add_or_remove' %}" data-model="{{ target_model }}" data-target="target_{{ target_object_id }}">
<div class="favit{% if undo %} is-favorited{% endif %}" data-bs-toggle="tooltip" data-placement="top" title="{% if undo %}Remove from{% else %}Add to{% endif %} favorites" >
<a class="btn favorite" id="add_remove_favorite" href="" data-action-url="{% url 'favit:add_or_remove' %}" data-model="{{ target_model }}" data-bs-target="target_{{ target_object_id }}">
<span class="icon-toggle d-none d-sm-inline">
{% icon "heart" class_="icon-filled" %}
{% icon "heart-outline" class_="icon-outline" %}
Expand All @@ -18,7 +18,7 @@
</div>

{% else %}
<div class="favit" data-toggle="tooltip" data-placement="top" title="Log in to add favorites" >
<div class="favit" data-bs-toggle="tooltip" data-placement="top" title="Log in to add favorites" >
<a class="btn favorite" href="{% url 'account_login' %}?next={% firstof path '/' %}">
<span class="icon-toggle d-none d-sm-inline">
{% icon "heart" class_="icon-filled" %}
Expand Down
16 changes: 8 additions & 8 deletions backend/fpbase/templates/_nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load i18n avatar_tags %}

<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
Expand All @@ -11,7 +11,7 @@
</a>
<!-- Links -->
{% if request.user.is_authenticated %}
<div class="nav-item dropdown list-unstyled order-sm-3"><a id="user-profile-dropdown" class="ml-3" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% avatar user 36 class="rounded" id="user_avatar" %}</a>
<div class="nav-item dropdown list-unstyled order-sm-3"><a id="user-profile-dropdown" class="ms-3" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% avatar user 36 class="rounded" id="user_avatar" %}</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
{# URL provided by django-allauth/account/urls.py #}
<a class="dropdown-item" href="{% url 'users:detail' request.user.username %}">profile</a>
Expand All @@ -23,9 +23,9 @@
</div>
{% endif %}
<div class="collapse navbar-collapse" id="collapsingNavbar">
<ul class="nav navbar-nav navbar-dark ml-auto w-100 justify-content-end {% if not request.get_full_path == "/" %}flex-column-reverse{% endif %} flex-md-row">
<ul class="nav navbar-nav navbar-dark ms-auto w-100 justify-content-end {% if not request.get_full_path == "/" %}flex-column-reverse{% endif %} flex-md-row">
<li class="nav-item dropdown {% if request.user.is_authenticated %}pt-1{%endif%}">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">info</a>
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">info</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'about' %}">about FPbase</a>
<a class="dropdown-item" href="{% url 'help' %}">help &amp; FAQs</a>
Expand All @@ -40,7 +40,7 @@
</li>

<li class="nav-item dropdown {% if request.user.is_authenticated %}pt-1{%endif%}">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">tools</a>
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">tools</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'proteins:spectra' %}">spectra viewer</a>
<a class="dropdown-item" href="{% url 'proteins:microscopes' %}">microscopes</a>
Expand All @@ -51,8 +51,8 @@
</li>


<li class="nav-item dropdown {% if request.user.is_authenticated %}pt-1 mr-2{%endif%}">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">explore</a>
<li class="nav-item dropdown {% if request.user.is_authenticated %}pt-1 me-2{%endif%}">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">explore</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<h6 class="dropdown-header">SEARCH</h6>
<a class="dropdown-item" href="{% url 'proteins:search' %}">advanced search</a>
Expand All @@ -71,7 +71,7 @@ <h6 class="dropdown-header">SUBMIT</h6>
{% if not request.user.is_authenticated %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="log-in-link" class="nav-link mr-2" href="{% url 'account_login' %}?next={% firstof request.path '/' %}">{% trans "sign in" %}</a>
<a id="log-in-link" class="nav-link me-2" href="{% url 'account_login' %}?next={% firstof request.path '/' %}">{% trans "sign in" %}</a>
</li>
{% endif %}
{% if not request.get_full_path == "/" %}
Expand Down
11 changes: 5 additions & 6 deletions backend/fpbase/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@

<!-- jQuery and plugins from CDN - must load before Vite bundles for legacy inline script compatibility -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha512-igl8WEUuas9k5dtnhKqyyld6TzzRjvMqLC79jkgT3z02FvJyHAuUtyemm/P/jYSne1xwFI06ezQxEwweaiV7VA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js" integrity="sha512-RtZU3AyMVArmHLiW0suEZ9McadTdegwbgtiQl5Qqo9kunkVg1ofwueXD8/8wv3Af8jkME3DDe3yLfR8HSJfT2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/autocomplete.js/0.38.1/autocomplete.jquery.min.js" integrity="sha512-HJ+lF1L08pRq/4okkWG+Rsskjy0p1FtkcYX0RhVaHq6J/pwflJumUbmiCBiXdu0UUevBJvMGb2QHfCzXV5TpfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Expand Down Expand Up @@ -110,8 +110,7 @@
<div class="container">
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% else %}info{% endif %}">{{ message|safe }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
{% endfor %}
Expand All @@ -124,14 +123,14 @@
</div> <!-- /container -->

{% block footer %}
<footer class="footer container-fluid pl-0">
<footer class="footer container-fluid ps-0">
<div class="container">
<div class="row">
<div class="col-12 text-right">
<div class="col-12 text-end">

<p>©FPbase, <span id='curyear'>2018</span>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" id="licenselink">
{% webp_picture 'images/by-sa.png' 'ml-2 mb-1 mt-1' 'BY-SA Creative Commons License' %}</a><br>
{% webp_picture 'images/by-sa.png' 'ms-2 mb-1 mt-1' 'BY-SA Creative Commons License' %}</a><br>
<a href="{% url 'terms' %}">Terms</a> &amp; <a href="{% url 'privacy' %}">Privacy</a><br>

{% block extrafooter %}{% endblock extrafooter %}</p>
Expand Down
12 changes: 6 additions & 6 deletions ...nd/fpbase/templates/bootstrap4/field.html → ...nd/fpbase/templates/bootstrap5/field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@
{% endif %}

{% if field|is_checkboxselectmultiple %}
{% include 'bootstrap4/layout/checkboxselectmultiple.html' %}
{% include 'bootstrap5/layout/checkboxselectmultiple.html' %}
{% endif %}

{% if field|is_radioselect %}
{% include 'bootstrap4/layout/radioselect.html' %}
{% include 'bootstrap5/layout/radioselect.html' %}
{% endif %}

{% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
Expand All @@ -30,14 +30,14 @@
{% crispy_field field 'class' 'form-check-input' %}
{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
</label>
{% include 'bootstrap4/layout/help_text_and_errors.html' %}
{% include 'bootstrap5/layout/help_text_and_errors.html' %}
{% elif field|is_file %}
{% include 'bootstrap4/layout/field_file.html' %}
{% include 'bootstrap4/layout/help_text_and_errors.html' %}
{% include 'bootstrap5/layout/field_file.html' %}
{% include 'bootstrap5/layout/help_text_and_errors.html' %}
{% else %}
<div class="{{ field_class }}">
{% crispy_field field %}
{% include 'bootstrap4/layout/help_text_and_errors.html' %}
{% include 'bootstrap5/layout/help_text_and_errors.html' %}
</div>
{% endif %}
{% endif %}
Expand Down
0 ...bootstrap4/layout/field_errors_block.html → ...bootstrap5/layout/field_errors_block.html
View file
Open in desktop
File renamed without changes.
0 ...mplates/bootstrap4/layout/field_file.html → ...mplates/bootstrap5/layout/field_file.html
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions backend/fpbase/templates/pages/_moderation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<div class="alert alert-info clearfix" role="alert">
<div class="d-inline-block align-middle">
<strong>{% icon "info" class_="mr-2" aria_hidden="true" %}</strong>This protein has unmoderated changes.
<strong>{% icon "info" class_="me-2" aria_hidden="true" %}</strong>This protein has unmoderated changes.
<a href="#" class="alert-link">Click here</a> to view the last moderated version of this protein
</div>
</div>
Expand All @@ -14,7 +14,7 @@ <h5 class="mt-4"><strong>Version History</strong></h5>
<p>When a change is made to the database, the revision changeset is logged and revertible (by a moderator) for a certain period of time. If the protein has a previously moderated version, you may click on the link to view the previous verision. When viewing an older revision of a protein page, the following alert will be visible at the top of the page:</p>

<div class="alert alert-warning clearfix" role="alert">
<strong>{% icon "warning" class_="mr-2" aria_hidden="true" %}</strong>You are viewing an older revision of this protein, from <code>[date]</code>. <a href="#" class="alert-link">Click here</a> to view the current version.
<strong>{% icon "warning" class_="me-2" aria_hidden="true" %}</strong>You are viewing an older revision of this protein, from <code>[date]</code>. <a href="#" class="alert-link">Click here</a> to view the current version.
</div>


Expand Down
2 changes: 1 addition & 1 deletion backend/fpbase/templates/pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% block meta-description %}FPbase is a free and open-source, web-based, community-editable database for fluorescent proteins and their properties. It accepts user contributions but is also moderated.{% endblock %}

{% block content %}
<h1 class='mb-4'><strong>FP</strong>base <img class='float-right' style="opacity: 0.9;" src="{% static 'images/GFP_spinner.gif' %}" class="pt-4 mb-4"></h1>
<h1 class='mb-4'><strong>FP</strong>base <img class='float-end' style="opacity: 0.9;" src="{% static 'images/GFP_spinner.gif' %}" class="pt-4 mb-4"></h1>

<h3><strong>A fluorescent protein database</strong></h3>

Expand Down
2 changes: 1 addition & 1 deletion backend/fpbase/templates/pages/contributing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h3 class="mt-4"><strong>Contributing</strong></h3>
</li>
<li>
<strong>Add references to existing proteins</strong><br>
<p>In the references section of each protein page, there is a <a href="#" class='text-info' ><button class='btn btn-sm btn-secondary mr-1 ml-1'>{% icon "collection" class_="mr-2" %}Add a reference</button></a> button that will allow you to add additional references. This is an excellent place to track publications that may not have introduced the fluorescent protein, but have performed additional characterization of it</p>
<p>In the references section of each protein page, there is a <a href="#" class='text-info' ><button class='btn btn-sm btn-secondary me-1 ms-1'>{% icon "collection" class_="me-2" %}Add a reference</button></a> button that will allow you to add additional references. This is an excellent place to track publications that may not have introduced the fluorescent protein, but have performed additional characterization of it</p>
</li>
<li>
<strong>Create Public Collections</strong><br>
Expand Down
2 changes: 1 addition & 1 deletion backend/fpbase/templates/pages/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ <h1 class="cover-heading text-center mb-4">Find a Protein</h1>
{% webp_picture 'images/gfp_white_40.png' 'gfpicon' 'white gfp icon' %}{{stats.proteins}} <a href="{% url 'proteins:table' %}" class='text-white'>Proteins</a>
</span>
<span>
{% icon "chart" class_="mr-2" %}{{stats.protspectra}} <a href="{% url 'proteins:spectra' %}" class='text-white'>FP Spectra</a>
{% icon "chart" class_="me-2" %}{{stats.protspectra}} <a href="{% url 'proteins:spectra' %}" class='text-white'>FP Spectra</a>
</span>
</div>

Expand Down
4 changes: 2 additions & 2 deletions backend/fpbase/templates/pages/home_old.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@
<div class="col-md-4 order-sm-1"></div>
<div class="col-md-7 text-center order-sm-2 text-white mt-5 mt-md-0">
<div class="d-flex bd-highlight small-sm" style='opacity:0.70; font-size: 16px'>
<div class="p-1 flex-fill bd-highlight">{% icon "sun" class_="mr-2" %}{{stats.proteins}} <a href="{% url 'proteins:table' %}" class='text-white'>Proteins</a></div>
<div class="p-1 flex-fill bd-highlight">{% icon "chart" class_="mr-2" %}{{stats.protspectra}} <a href="{% url 'proteins:spectra' %}" class='text-white'>FP Spectra</a></div></div>
<div class="p-1 flex-fill bd-highlight">{% icon "sun" class_="me-2" %}{{stats.proteins}} <a href="{% url 'proteins:table' %}" class='text-white'>Proteins</a></div>
<div class="p-1 flex-fill bd-highlight">{% icon "chart" class_="me-2" %}{{stats.protspectra}} <a href="{% url 'proteins:spectra' %}" class='text-white'>FP Spectra</a></div></div>

</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions backend/fpbase/templates/pages/terms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ <h5 id="logging"><strong>Error Logging</strong></h5>

<h4 id="license"><strong>License</strong></h4>

<p class='mt-3'><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" class="float-left pt-2 pr-4"/></a><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">FPbase</span> is created by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/tlambert03" property="cc:attributionName" rel="cc:attributionURL">Talley Lambert</a> and is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. Source code is available at <a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/tlambert03/FPbase" rel="dct:source">GitHub</a>.</p>
<p class='mt-3'><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" class="float-start pt-2 pe-4"/></a><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">FPbase</span> is created by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/tlambert03" property="cc:attributionName" rel="cc:attributionURL">Talley Lambert</a> and is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. Source code is available at <a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/tlambert03/FPbase" rel="dct:source">GitHub</a>.</p>

<p class='mt-2'> <img src='https://upload.wikimedia.org/wikipedia/commons/f/f8/License_icon-mit-88x31-2.svg' class="float-left pt-2 pr-4"/>The interactive visualization of fluorescent proteins is modified from the <a href="https://github.com/FPvisualization/fpvisualization.github.io">FPvisualization repository on GitHub</a>, developed by <a href='https://github.com/tlambert03'>Talley Lambert</a> and <a href='https://github.com/kthorn'>Kurt Thorn</a> and licensed under the <a rel="license" href="https://github.com/FPvisualization/fpvisualization.github.io/blob/master/LICENSE">MIT license</a>.</p>
<p class='mt-2'> <img src='https://upload.wikimedia.org/wikipedia/commons/f/f8/License_icon-mit-88x31-2.svg' class="float-start pt-2 pe-4"/>The interactive visualization of fluorescent proteins is modified from the <a href="https://github.com/FPvisualization/fpvisualization.github.io">FPvisualization repository on GitHub</a>, developed by <a href='https://github.com/tlambert03'>Talley Lambert</a> and <a href='https://github.com/kthorn'>Kurt Thorn</a> and licensed under the <a rel="license" href="https://github.com/FPvisualization/fpvisualization.github.io/blob/master/LICENSE">MIT license</a>.</p>


{% endblock content %}
Expand Down
4 changes: 2 additions & 2 deletions backend/fpbase/templates/users/user_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
<div class='mb-2'>{% avatar user %}</div>
<ul class="list-unstyled">
<li>Username: {{ object.username }}</li>
<li>Name: {{ object.name | default:'' }} <a class=" ml-2 text-muted small" href="{% url 'users:update' %}" role="button">change</a></li>
<li>Email: {{ object.email | default:'' }} <a class=" ml-2 text-muted small" href="{% url 'account_email' %}" role="button">change</a></li>
<li>Name: {{ object.name | default:'' }} <a class=" ms-2 text-muted small" href="{% url 'users:update' %}" role="button">change</a></li>
<li>Email: {{ object.email | default:'' }} <a class=" ms-2 text-muted small" href="{% url 'account_email' %}" role="button">change</a></li>
</ul>
</div>
</div>
Expand Down
Loading
Loading