Skip to content

Commit

Permalink
CONCD-924 (#2521)
Browse files Browse the repository at this point in the history 
* CONCD-924 used bootstrap-5-migrate-tool to update templates

* CONCD-924 only import components we need

* CONCD-924 updated django templates

* CONCD-924 a few more components that we need (nav, dropdown, etc.)

* CONCD-924 updating Pipfile.lock

* CONCD-924 updated unit tests
  • Loading branch information
@rasarkar
rasarkar authored Sep 11, 2024
1 parent 0edaa72 commit a7bbfaa
Show file tree
Hide file tree
Showing 43 changed files with 608 additions and 556 deletions.
2 changes: 1 addition & 1 deletion Pipfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ whitenoise = ">=4.1.3"
openpyxl = "<3.1"
django-storages = "*"
markdown = ">=3.0.1"
"django-bootstrap4" = "*"
"django-bootstrap5" = "*"
django-robots = "*"
setuptools-scm = "*"
django-ratelimit = ">=4"
Expand Down
690 changes: 364 additions & 326 deletions Pipfile.lock
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion concordia/settings_template.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
"django.contrib.sites",
# Replaces "django.contrib.staticfiles",
"concordia.apps.ConcordiaStaticFilesConfig",
"bootstrap4",
"django_bootstrap5",
"maintenance_mode",
"concordia.apps.ConcordiaAppConfig",
"exporter",
Expand Down
23 changes: 22 additions & 1 deletion concordia/static/scss/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@ $list-inline-padding: 12px;
// variables that are placed below dependent on bootstrap variables
@import '../../../node_modules/bootstrap/scss/functions';
@import '../../../node_modules/bootstrap/scss/variables';
@import '../../../node_modules/bootstrap/scss/mixins';
@import '../../../node_modules/bootstrap/scss/maps';
@import '../../../node_modules/bootstrap/scss/utilities';
@import '../../../node_modules/bootstrap/scss/utilities/api';

// navbar
$navbar-toggler-font-size: 32px;
Expand Down Expand Up @@ -111,7 +115,16 @@ $alert-color-level: -12;
$alert-padding-y: 9px;
$alert-padding-x: 1rem;

@import '../../../node_modules/bootstrap/scss/bootstrap';
@import '../../../node_modules/bootstrap/scss/root';
@import '../../../node_modules/bootstrap/scss/reboot';
@import '../../../node_modules/bootstrap/scss/type';
@import '../../../node_modules/bootstrap/scss/containers';
@import '../../../node_modules/bootstrap/scss/grid';
@import '../../../node_modules/bootstrap/scss/buttons';
@import '../../../node_modules/bootstrap/scss/dropdown';
@import '../../../node_modules/bootstrap/scss/nav';
@import '../../../node_modules/bootstrap/scss/navbar';
@import '../../../node_modules/bootstrap/scss/carousel';

// progress
$bg-completed: $dark;
Expand Down Expand Up @@ -143,6 +156,14 @@ main {
flex: 1 1 0%;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.simple-page a {
text-decoration: underline;
}
Expand Down
8 changes: 4 additions & 4 deletions concordia/templates/account/account_deletion.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
{% extends "base.html" %}

{% load bootstrap4 %}
{% load django_bootstrap5 %}

{% block main_content %}
<div class="container">
<ul class="nav nav-tabs mb-4" id="nav-tab" role="tablist">
<li class="nav-item">
<a class="nav-link font-weight-bold" aria-selected="false" id="contributions-tab" type="button" role="tab" href="{% url 'user-profile' %}">My Contributions</a>
<a class="nav-link fw-bold" aria-selected="false" id="contributions-tab" type="button" role="tab" href="{% url 'user-profile' %}">My Contributions</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" aria-selected="false" id="recent-tab" type="button" role="tab" aria-controls="recent" href="{% url 'user-profile' %}#recent">Recent Pages Worked On</a>
<a class="nav-link fw-bold" aria-selected="false" id="recent-tab" type="button" role="tab" aria-controls="recent" href="{% url 'user-profile' %}#recent">Recent Pages Worked On</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold active" aria-selected="true" id="account-tab" type="button" role="tab" href="{% url 'user-profile' %}#account">Account Settings</a>
<a class="nav-link fw-bold active" aria-selected="true" id="account-tab" type="button" role="tab" href="{% url 'user-profile' %}#account">Account Settings</a>
</li>
</ul>
<div class="row">
Expand Down
6 changes: 3 additions & 3 deletions concordia/templates/account/email_reconfirmation_failed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
<div class="container">
<ul class="nav nav-tabs mb-4" id="nav-tab" role="tablist">
<li class="nav-item">
<a class="nav-link font-weight-bold" aria-selected="false" id="contributions-tab" type="button" role="tab" href="{% url 'user-profile' %}">My Contributions</a>
<a class="nav-link fw-bold" aria-selected="false" id="contributions-tab" type="button" role="tab" href="{% url 'user-profile' %}">My Contributions</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" aria-selected="false" id="recent-tab" type="button" role="tab" aria-controls="recent" href="{% url 'user-profile' %}#recent">Recent Pages Worked On</a>
<a class="nav-link fw-bold" aria-selected="false" id="recent-tab" type="button" role="tab" aria-controls="recent" href="{% url 'user-profile' %}#recent">Recent Pages Worked On</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold active" aria-selected="true" id="account-tab" type="button" role="tab" href="{% url 'user-profile' %}#account">Account Settings</a>
<a class="nav-link fw-bold active" aria-selected="true" id="account-tab" type="button" role="tab" href="{% url 'user-profile' %}#account">Account Settings</a>
</li>
</ul>
<div class="row">
Expand Down
24 changes: 12 additions & 12 deletions concordia/templates/account/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% load humanize %}
{% load staticfiles %}
{% load bootstrap4 %}
{% load django_bootstrap5 %}

{% block prefetch %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/themes/default.css" />
Expand All @@ -18,13 +18,13 @@
<div class="container bg-main profile-page">
<ul class="nav nav-tabs mb-4" id="nav-tab" role="tablist">
<li class="nav-item">
<a class="nav-link font-weight-bold{% if active_tab == 'contributions' %} active{% endif %}" aria-selected="{% if active_tab == 'contributions' %}true{% else %}false{% endif %}" id="contributions-tab" data-toggle="tab" data-target="#contributions" type="button" role="tab">My Contributions</a>
<a class="nav-link fw-bold{% if active_tab == 'contributions' %} active{% endif %}" aria-selected="{% if active_tab == 'contributions' %}true{% else %}false{% endif %}" id="contributions-tab" data-bs-toggle="tab" data-bs-target="#contributions" type="button" role="tab">My Contributions</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold{% if active_tab == 'recent' %} active" aria-selected="true"{% else %} aria-selected="false"{% endif %} id="recent-tab" data-toggle="tab" data-target="#recent" type="button" role="tab" aria-controls="recent" href="#recent">Recent Pages Worked On</a>
<a class="nav-link fw-bold{% if active_tab == 'recent' %} active" aria-selected="true"{% else %} aria-selected="false"{% endif %} id="recent-tab" data-bs-toggle="tab" data-bs-target="#recent" type="button" role="tab" aria-controls="recent" href="#recent">Recent Pages Worked On</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold{% if active_tab == 'account' %} active" aria-selected="true"{% else %} aria-selected="false"{% endif %} id="account-tab" data-toggle="tab" data-target="#account" type="button" role="tab" href="#account">Account Settings</a>
<a class="nav-link fw-bold{% if active_tab == 'account' %} active" aria-selected="true"{% else %} aria-selected="false"{% endif %} id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button" role="tab" href="#account">Account Settings</a>
</li>
</ul>
<div class="tab-content" id="nav-tabContent">
Expand All @@ -33,24 +33,24 @@
<div class="col-12 col-md-10">
<h2>Account Settings</h2>
<div class="mb-2">
<span class="font-weight-bold">Username</span>: {{ user.username }}
<span class="fw-bold">Username</span>: {{ user.username }}
</div>
</div>
<div class="col-12 col-md-10 py-3 change-options">
<div class="mt-1 mb-3">
<span class="font-weight-bold">Email address</span>: {{ user.email }}
<span class="fw-bold">Email address</span>: {{ user.email }}
</div>
{% if unconfirmed_email %}
<div class="mt-1 mb-3">
<span class="font-weight-bold">Unconfirmed email address</span>: {{ unconfirmed_email }}
<span class="fw-bold">Unconfirmed email address</span>: {{ unconfirmed_email }}
</div>
{% endif %}
<form class="form needs-validation" action="{% url 'user-profile' %}" method="POST" enctype="multipart/form-data" novalidate>
{% csrf_token %}

<div class="input-group mb-3 user-fields">
<label for="id_email"><span class="visually-hidden">Email</span></label>
<input type="email" name="email" placeholder="Change your email address" class="form-control font-italic" title="" required="" id="id_email" required>
<input type="email" name="email" placeholder="Change your email address" class="form-control fst-italic" title="" required="" id="id_email" required>
<div class="input-group-append">
{% bootstrap_button "Save Change" button_type="submit" button_class="btn btn-primary rounded-0" name="submit_email" %}
</div>
Expand All @@ -77,13 +77,13 @@ <h2>Account Settings</h2>
{% csrf_token %}
<div class="mb-3 user-fields">
<label class="d-flex mb-2">
<span class="font-weight-bold">First Name</span>: {{ user.first_name }}
<span class="fw-bold">First Name</span>: {{ user.first_name }}
</label>
<input name="first_name" placeholder="Enter your first name" class="form-control font-italic">
<input name="first_name" placeholder="Enter your first name" class="form-control fst-italic">
<label class="mt-2">
<span class="font-weight-bold">Last Name</span>: {{ user.last_name }}
<span class="fw-bold">Last Name</span>: {{ user.last_name }}
</label>
<input name="last_name" placeholder="Enter your last name" class="form-control font-italic">
<input name="last_name" placeholder="Enter your last name" class="form-control fst-italic">
</div>
<div class="input-group-append">
{% bootstrap_button "Save Changes" button_type="submit" button_class="btn btn-primary rounded-0" name="submit_name" %}
Expand Down
2 changes: 1 addition & 1 deletion concordia/templates/admin/concordia/project/item_import.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<p>Please fix the errors below:</p>
{% endif %}

<div class="form-row">
<div class="row">
<div class="fieldBox field-import_url">
<label for="{{ form.import_url.id_for_label }}">{{ form.import_url.label }}</label>
{{ form.import_url }}
Expand Down
32 changes: 16 additions & 16 deletions concordia/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,25 +65,25 @@
<h1 class="logo-by-the-people m-0 -d-flex -align-items-center">
<a class="d-flex" href="/" title="By the People">
<img class="img-fluid" src="{% static 'img/logo-by-the-people.svg' %}" width="260" height="27" alt="" aria-hidden="true">
<span class="sr-only">By The People</span>
<span class="visually-hidden">By The People</span>
</a>
</h1>
</div>
<button class="navbar-toggler navbar-light border-0 d-print-none"
type="button" data-toggle="collapse" data-target="#nav-menu" aria-controls="nav-menu"
type="button" data-bs-toggle="collapse" data-bs-target="#nav-menu" aria-controls="nav-menu"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
<span class="sr-only">Menu</span>
<span class="visually-hidden">Menu</span>
</button>
<div class="collapse navbar-collapse text-center d-print-none"
id="nav-menu">
<ul class="navbar-nav ml-auto d-print-none small">
<ul class="navbar-nav ms-auto d-print-none small">
<li class="nav-item">
<a class="nav-link {% if PATH_LEVEL_1 == 'about'%}active{% endif %}" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item dropdown nav-dropdown">
<a id="topnav-campaigns-dropdown-toggle" class="nav-link
{% if PATH_LEVEL_1 == 'campaigns' %}active{% endif %}" href="{% url 'campaign-topic-list' %}" data-toggle="dropdown" aria-haspopup="true"
{% if PATH_LEVEL_1 == 'campaigns' %}active{% endif %}" href="{% url 'campaign-topic-list' %}" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Campaigns <span class="fa fa-chevron-down text-primary"></span></a>
<div class="dropdown-menu" aria-labelledby="topnav-campaigns-dropdown-toggle">
<a class="dropdown-item" href="{% url 'campaign-topic-list' %}">All Campaigns</a>
Expand All @@ -94,7 +94,7 @@ <h1 class="logo-by-the-people m-0 -d-flex -align-items-center">
nav-dropdown">
<a id="topnav-help-dropdown-toggle" class="nav-link
{% if PATH_LEVEL_1 == 'help-center'%}active{% endif %}"
href="{% url 'help-center' %}" rel="nofollow" data-toggle="dropdown" aria-haspopup="true"
href="{% url 'help-center' %}" rel="nofollow" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">How-To <span class="fa fa-chevron-down text-primary"></span></a>
<div class="dropdown-menu"
aria-labelledby="topnav-help-dropdown-toggle">
Expand All @@ -117,7 +117,7 @@ <h1 class="logo-by-the-people m-0 -d-flex -align-items-center">
<li id="topnav-account-dropdown" class="nav-item dropdown
nav-dropdown authenticated-only" hidden>
<a id="topnav-account-dropdown-toggle" class="nav-link
{% if PATH_LEVEL_1 == 'account'%}active{% endif %}" href="{% url 'user-profile' %}" rel="nofollow" data-toggle="dropdown" aria-haspopup="true"
{% if PATH_LEVEL_1 == 'account'%}active{% endif %}" href="{% url 'user-profile' %}" rel="nofollow" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Account <span class="fa fa-chevron-down text-primary"></a>
<div class="dropdown-menu"
aria-labelledby="topnav-account-dropdown-toggle">
Expand Down Expand Up @@ -167,7 +167,7 @@ <h1 class="logo-by-the-people m-0 -d-flex -align-items-center">
{% comment %} This is a hidden <div> rather than <template>
because it's not worth dealing with IE11 compatibility {% endcomment %}
<div class="alert alert-dismissible mx-3 my-2" role="alert">
<button type="button" class="close" data-dismiss="alert"
<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close">
<!--span aria-hidden="true">&times;</span-->
<span aria-hidden="true" class="fas fa-times"></span>
Expand All @@ -191,10 +191,10 @@ <h2>Maintenance mode is active!</h2>
<div class="container">
<div class="row">
<div class="col-12 col-lg-auto">
<h2 class="h3 font-weight-normal text-center text-lg-left">Follow
<h2 class="h3 fw-normal text-center text-lg-start">Follow
Us</h2>
<ul class="list-unstyled list-inline mb-0 text-center
text-lg-left">
text-lg-start">
<li class="list-inline-item link-github">
<a href="https://github.com/LibraryOfCongress/concordia"
title="GitHub">
Expand All @@ -217,8 +217,8 @@ <h2 class="h3 font-weight-normal text-center text-lg-left">Follow
</ul>
</div>
<div class="footer-links col-12 col-lg">
<ul class="list-unstyled list-inline small font-weight-bold mb-0
text-center text-lg-left">
<ul class="list-unstyled list-inline small fw-bold mb-0
text-center text-lg-start">
<li class="list-inline-item mb-1"><a
href="/for-educators/">For Educators</a></li>
<li class="list-inline-item mb-1"><a
Expand All @@ -231,7 +231,7 @@ <h2 class="h3 font-weight-normal text-center text-lg-left">Follow
</div>
<div class="col-12 col-lg-auto align-self-center">
<ul class="list-unstyled list-inline small text-center
text-lg-left">
text-lg-start">
<li class="list-inline-item"><a
href="https://www.loc.gov/accessibility/">Accessibility</a></li>
<li class="list-inline-item"><a
Expand All @@ -244,11 +244,11 @@ <h2 class="h3 font-weight-normal text-center text-lg-left">Follow
Disclaimer</a></li>
</ul>
<ul class="list-unstyled list-inline mb-0 text-center
text-lg-left">
text-lg-start">
<li class="list-inline-item intersites-link-congress"><a
href="https://www.congress.gov/"><span class="sr-only">Congress.gov</span></a></li>
href="https://www.congress.gov/"><span class="visually-hidden">Congress.gov</span></a></li>
<li class="list-inline-item intersites-link-copyright"><a
href="https://copyright.gov"><span class="sr-only">Copyright.gov</span></a></li>
href="https://copyright.gov"><span class="visually-hidden">Copyright.gov</span></a></li>
</ul>
</div>
</div>
Expand Down
Loading

0 comments on commit a7bbfaa

Please sign in to comment.