From e1b3520d7432667d590854260927e6e584b84607 Mon Sep 17 00:00:00 2001 From: Rajit Sarkar Date: Tue, 27 Aug 2024 11:01:40 -0400 Subject: [PATCH 1/7] CONCD-924 Upgrade Bootstrap to version 5 (WiP) --- Pipfile | 2 +- Pipfile.lock | 2 +- concordia/settings_template.py | 2 +- concordia/static/js/src/base.js | 3 +- concordia/static/scss/_variables.scss | 4 +- concordia/static/scss/base.scss | 16 ++++---- .../templates/account/account_deletion.html | 2 +- concordia/templates/account/profile.html | 2 +- concordia/templates/contact.html | 6 +-- .../registration_form.html | 8 +--- concordia/templates/registration/login.html | 8 +--- .../registration/password_change_form.html | 8 +--- .../registration/password_reset_confirm.html | 8 +--- .../registration/password_reset_form.html | 8 +--- exporter/tabular_export/core.py | 2 +- package-lock.json | 37 ++++++++++++++----- package.json | 2 +- 17 files changed, 57 insertions(+), 63 deletions(-) diff --git a/Pipfile b/Pipfile index f4b8646a4..b4a3ecd8c 100644 --- a/Pipfile +++ b/Pipfile @@ -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" diff --git a/Pipfile.lock b/Pipfile.lock index d450144d8..7c8673ef0 100644 --- a/Pipfile.lock +++ b/Pipfile.lock @@ -606,7 +606,7 @@ "index": "pypi", "version": "==0.1.1" }, - "django-bootstrap4": { + "django-bootstrap5": { "hashes": [ "sha256:819bc0ba7b25fcdeb12eb04353962436dbe95b228ba4cf4b49f5d3fee53692e1", "sha256:b555d87740a571036f100ad6026b1f62aabcb913404fb7f08f521881019b14bc" diff --git a/concordia/settings_template.py b/concordia/settings_template.py index d5d452939..36e3cd166 100644 --- a/concordia/settings_template.py +++ b/concordia/settings_template.py @@ -109,7 +109,7 @@ "django.contrib.sites", # Replaces "django.contrib.staticfiles", "concordia.apps.ConcordiaStaticFilesConfig", - "bootstrap4", + "django_bootstrap5", "maintenance_mode", "concordia.apps.ConcordiaAppConfig", "exporter", diff --git a/concordia/static/js/src/base.js b/concordia/static/js/src/base.js index 66de83783..937ab2fde 100644 --- a/concordia/static/js/src/base.js +++ b/concordia/static/js/src/base.js @@ -48,7 +48,7 @@ function displayHtmlMessage(level, message, uniqueId) { /* Display a dismissable message at a level which will match one of the Bootstrap alert classes - (https://getbootstrap.com/docs/4.1/components/alerts/) + (https://getbootstrap.com/docs/5.3/components/alerts/) If provided, uniqueId will be used to remove any existing elements which have that ID, allowing old messages to be replaced automatically. @@ -298,6 +298,7 @@ $twitterShareButton.on('click', function () { return true; }); +// eslint-disable-next-line no-unused-vars function trackUIInteraction(element, category, action, label) { if ('loc_ux_tracking' in window) { let loc_ux_tracking = window['loc_ux_tracking']; diff --git a/concordia/static/scss/_variables.scss b/concordia/static/scss/_variables.scss index bf03bb1de..804ba7033 100644 --- a/concordia/static/scss/_variables.scss +++ b/concordia/static/scss/_variables.scss @@ -12,8 +12,8 @@ $theme-colors: ( 'primary': $primary, ); -$link-color: theme-color('primary'); -$link-hover-color: darken($link-color, 15%); +$link-color: map.get($theme-colors, 'primary'); +$link-hover-color: color.adjust($link-color, $lightness: 15%); $kbd-color: $gray-900; $kbd-bg: $gray-200; diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss index 66d6e5e7f..68eb771c7 100644 --- a/concordia/static/scss/base.scss +++ b/concordia/static/scss/base.scss @@ -256,11 +256,11 @@ hr { } .navbar-brand { - @include media-breakpoint-down(md) { + @include media-breakpoint-down(lg) { max-width: 350px; } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { max-width: 250px; } } @@ -313,7 +313,7 @@ ul.nav-secondary { .navbar-nav { margin-right: -0.5rem; - @include media-breakpoint-down(md) { + @include media-breakpoint-down(lg) { margin: 0; padding: 0.5rem 1rem; background-color: $light; @@ -325,7 +325,7 @@ ul.nav-secondary { padding-top: 5px; padding-bottom: 5px; - @include media-breakpoint-up(lg) { + @include media-breakpoint-up(md) { padding-top: 0; padding-bottom: 0; } @@ -443,7 +443,7 @@ $card-progress-height: 12px; .concordia-object-card-col { padding: 6px; - @include media-breakpoint-up(xl) { + @include media-breakpoint-up(lg) { flex: 0 0 25%; max-width: 25%; } @@ -643,7 +643,7 @@ $card-progress-height: 12px; .carousel-overlay { padding: 10px 3rem 1rem; - @include media-breakpoint-up(lg) { + @include media-breakpoint-up(md) { padding: 25px; background-color: white; position: absolute; @@ -662,14 +662,14 @@ $card-progress-height: 12px; } } -@include media-breakpoint-down(md) { +@include media-breakpoint-down(lg) { .carousel-control-next, .carousel-control-prev { margin-top: 40%; } } -@include media-breakpoint-up(lg) { +@include media-breakpoint-up(md) { .carousel-control-next-icon { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2255%22%20viewBox%3D%220%200%2033%2055%22%20width%3D%2233%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m1221.23218%20395.14282c0%20.428572-.21429.910716-.53571%201.232145l-24.96432%2024.964315c-.32143.321429-.80357.535715-1.23214.535715-.42858%200-.91072-.214286-1.23215-.535715l-2.67857-2.678574c-.32143-.321429-.53572-.750001-.53572-1.232145%200-.428572.21429-.910715.53572-1.232144l21.05359-21.053597-21.05359-21.053596c-.32143-.321429-.53572-.803573-.53572-1.232144%200-.428572.21429-.910716.53572-1.232145l2.67857-2.678574c.32143-.321429.80357-.535715%201.23215-.535715.42857%200%20.91071.214286%201.23214.535715l24.96432%2024.964315c.32142.321429.53571.803572.53571%201.232144z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23333%22%20stroke-width%3D%22.5%22%20transform%3D%22translate%28-1189%20-368%29%22/%3E%3C/svg%3E'); } diff --git a/concordia/templates/account/account_deletion.html b/concordia/templates/account/account_deletion.html index 7ee2bee4c..15d5f8500 100644 --- a/concordia/templates/account/account_deletion.html +++ b/concordia/templates/account/account_deletion.html @@ -1,6 +1,6 @@ {% extends "base.html" %} -{% load bootstrap4 %} +{% load django_bootstrap5 %} {% block main_content %}
diff --git a/concordia/templates/account/profile.html b/concordia/templates/account/profile.html index f7593915b..129128fad 100644 --- a/concordia/templates/account/profile.html +++ b/concordia/templates/account/profile.html @@ -2,7 +2,7 @@ {% load humanize %} {% load staticfiles %} -{% load bootstrap4 %} +{% load django_bootstrap5 %} {% block prefetch %} diff --git a/concordia/templates/contact.html b/concordia/templates/contact.html index 6360f43f5..81c39aaee 100644 --- a/concordia/templates/contact.html +++ b/concordia/templates/contact.html @@ -19,11 +19,7 @@

Contact Us

{% bootstrap_form form %} - {% buttons %} - - {% endbuttons %} + {% bootstrap_button "Send Message" button_type="submit" button_class="btn-primary" extra_classes="btn" %}
diff --git a/concordia/templates/django_registration/registration_form.html b/concordia/templates/django_registration/registration_form.html index 58dcdd4af..c2495e144 100644 --- a/concordia/templates/django_registration/registration_form.html +++ b/concordia/templates/django_registration/registration_form.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% load static %} -{% load bootstrap4 %} +{% load django_bootstrap5 %} {% block title %}Registration{% endblock title %} @@ -26,11 +26,7 @@

Registration

{% bootstrap_form form %} - {% buttons %} - - {% endbuttons %} + {% bootstrap_button "Register" button_type="submit" button_class="btn-primary" extra_classes="btn justify-content-center" %}
I already have an account
diff --git a/concordia/templates/registration/login.html b/concordia/templates/registration/login.html index 26af4419d..c07055127 100644 --- a/concordia/templates/registration/login.html +++ b/concordia/templates/registration/login.html @@ -1,6 +1,6 @@ {% extends "base.html" %} -{% load bootstrap4 %} +{% load django_bootstrap5 %} {% block head_content %} @@ -28,11 +28,7 @@

Welcome back!

the Library's security requirements

- {% buttons %} - - {% endbuttons %} + {% bootstrap_button "Login" button_type="submit" button_class="btn-primary" extra_classes="btn" id="login" %} diff --git a/concordia/templates/registration/password_change_form.html b/concordia/templates/registration/password_change_form.html index 3db97cb69..4d210eab1 100644 --- a/concordia/templates/registration/password_change_form.html +++ b/concordia/templates/registration/password_change_form.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% load i18n staticfiles %} -{% load bootstrap4 %} +{% load django_bootstrap5 %} {% block head_content %} @@ -16,11 +16,7 @@ {% bootstrap_form form %} - {% buttons %} - - {% endbuttons %} + {% bootstrap_button "Save" button_type="submit" button_class="btn-primary" extra_classes="btn" %} diff --git a/concordia/templates/registration/password_reset_confirm.html b/concordia/templates/registration/password_reset_confirm.html index 7c7e46c90..f6f730e55 100644 --- a/concordia/templates/registration/password_reset_confirm.html +++ b/concordia/templates/registration/password_reset_confirm.html @@ -1,6 +1,6 @@ {% extends "base.html" %} {% load i18n staticfiles %} -{% load bootstrap4 %} +{% load django_bootstrap5 %} {% block title %}{{ title }}{% endblock %} {% block content_title %}

{{ title }}

{% endblock %} @@ -15,11 +15,7 @@ {% bootstrap_form form %} - {% buttons %} - - {% endbuttons %} + {% bootstrap_button "Change my password" button_type="submit" button_class="btn-primary" extra_classes="btn" %} {% else %}

diff --git a/concordia/templates/registration/password_reset_form.html b/concordia/templates/registration/password_reset_form.html index bdc852062..548e6a6ac 100644 --- a/concordia/templates/registration/password_reset_form.html +++ b/concordia/templates/registration/password_reset_form.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% load i18n staticfiles %} -{% load bootstrap4 %} +{% load django_bootstrap5 %} {% block title %}{{ title }}{% endblock %} @@ -25,11 +25,7 @@ {% bootstrap_form form %} - {% buttons %} - - {% endbuttons %} + {% bootstrap_button "Reset my password" button_type="submit" button_class="btn-primary" extra_classes="btn"%} diff --git a/exporter/tabular_export/core.py b/exporter/tabular_export/core.py index 9d5944fa5..284e344c0 100644 --- a/exporter/tabular_export/core.py +++ b/exporter/tabular_export/core.py @@ -147,7 +147,7 @@ def output_generator(): # Note the use of bytestrings to avoid unnecessary Unicode-bytes cycles: yield b"" yield b'TABULAR DEBUG' - yield b'' # noqa + yield b'' # noqa yield b"" yield b'

' # noqa yield b" diff --git a/concordia/templates/fragments/sharing-button-group.html b/concordia/templates/fragments/sharing-button-group.html index fae7c7d50..72a2814fb 100644 --- a/concordia/templates/fragments/sharing-button-group.html +++ b/concordia/templates/fragments/sharing-button-group.html @@ -1,5 +1,5 @@ diff --git a/concordia/templates/home.html b/concordia/templates/home.html index 15ba6d073..c5602719c 100644 --- a/concordia/templates/home.html +++ b/concordia/templates/home.html @@ -65,7 +65,7 @@

Review

" diff --git a/package-lock.json b/package-lock.json index 2052c1a1d..8a1be3f27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@duetds/date-picker": "^1.4.0", "@fortawesome/fontawesome-free": "^5.15.1", - "bootstrap": "^4.5.3", + "bootstrap": "^5.3.3", "codemirror": "^5.58.2", "gulp": "^5.0.0", "gulp-rename": "^2.0.0", @@ -473,6 +473,17 @@ "node": "^12.13.0 || ^14.15.0 || >=16.0.0" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@puppeteer/browsers": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.0.1.tgz", @@ -1029,16 +1040,22 @@ } }, "node_modules/bootstrap": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz", - "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - }, + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", "peerDependencies": { - "jquery": "1.9.1 - 3", - "popper.js": "^1.16.1" + "@popperjs/core": "^2.11.8" } }, "node_modules/brace-expansion": { diff --git a/package.json b/package.json index 0f9465725..37317ae4f 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "dependencies": { "@duetds/date-picker": "^1.4.0", "@fortawesome/fontawesome-free": "^5.15.1", - "bootstrap": "^4.5.3", + "bootstrap": "^5.3.3", "codemirror": "^5.58.2", "gulp": "^5.0.0", "gulp-rename": "^2.0.0", From 1133cb20ad2889f19036bcd5d124ef2cfde53daf Mon Sep 17 00:00:00 2001 From: Rajit Sarkar Date: Wed, 28 Aug 2024 10:52:05 -0400 Subject: [PATCH 2/7] CONCD-924 Color system --- concordia/static/scss/base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss index 68eb771c7..2a7c0072c 100644 --- a/concordia/static/scss/base.scss +++ b/concordia/static/scss/base.scss @@ -117,7 +117,7 @@ $alert-padding-x: 1rem; $bg-completed: $dark; $bg-submitted: $primary; /* stylelint-disable-next-line scss/no-global-function-names */ -$bg-in-progress: lighten($primary, 30%); +$bg-in-progress: tint-color($primary, 30%); $bg-not-started: #fff; // shadow From c3e62e00ef5515837f2c9a6e54cc73d3d89068f8 Mon Sep 17 00:00:00 2001 From: Rajit Sarkar Date: Wed, 28 Aug 2024 13:48:41 -0400 Subject: [PATCH 3/7] CONCD-924 Links are underlined by default --- concordia/static/scss/base.scss | 8 -------- concordia/templates/static-page.html | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss index 2a7c0072c..f588f88e4 100644 --- a/concordia/static/scss/base.scss +++ b/concordia/static/scss/base.scss @@ -143,14 +143,6 @@ main { flex: 1 1 0%; } -.simple-page a { - text-decoration: underline; -} - -.simple-page a:hover { - text-decoration: none; -} - .close { opacity: 1; } diff --git a/concordia/templates/static-page.html b/concordia/templates/static-page.html index 298de1004..e5b03b625 100644 --- a/concordia/templates/static-page.html +++ b/concordia/templates/static-page.html @@ -18,7 +18,7 @@

{{ title }}

-
+
{% if add_navigation %}
From cff8151f0c48e0a4cf8fee3089c621add498bb90 Mon Sep 17 00:00:00 2001 From: Rajit Sarkar Date: Thu, 29 Aug 2024 13:57:57 -0400 Subject: [PATCH 4/7] CONCD-924 Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality e.g. data-bs-toggle instead of data-toggle. --- concordia/static/js/src/guide.js | 26 ++++++++++--------- concordia/static/scss/base.scss | 26 +++++++++++++++++-- .../templates/account/account_deletion.html | 6 ++--- .../account/email_reconfirmation_failed.html | 6 ++--- concordia/templates/account/profile.html | 16 ++++++------ concordia/templates/base.html | 16 +++++++----- .../templates/fragments/recent-pages.html | 22 ++++++++-------- .../fragments/sharing-button-group.html | 2 +- concordia/templates/home.html | 16 ++++++------ concordia/templates/static-page.html | 2 +- .../transcriptions/asset_detail.html | 6 ++--- .../transcriptions/asset_detail/editor.html | 4 +-- .../transcriptions/asset_detail/guide.html | 12 ++++----- .../language_selection_modal.html | 2 +- .../asset_detail/navigation.html | 4 +-- .../asset_detail/ocr_transcription_modal.html | 2 +- .../asset_detail/quick_tips_modal.html | 4 +-- .../transcriptions/asset_detail/tags.html | 2 +- .../transcriptions/asset_detail/viewer.html | 6 ++--- .../asset_detail/viewer_filters.html | 10 +++---- .../transcriptions/campaign_small_block.html | 2 +- 21 files changed, 109 insertions(+), 83 deletions(-) diff --git a/concordia/static/js/src/guide.js b/concordia/static/js/src/guide.js index 09f772af6..423369bff 100644 --- a/concordia/static/js/src/guide.js +++ b/concordia/static/js/src/guide.js @@ -30,18 +30,20 @@ $('#open-guide').on('click', openOffcanvas); $('#close-guide').on('click', closeOffcanvas); -$('#guide-carousel') - .carousel({ - interval: false, - wrap: false, - }) - .on('slide.bs.carousel', function (event) { - if (event.to == 0) { - $('#guide-bars').addClass('d-none'); - } else { - $('#guide-bars').removeClass('d-none'); - } - }); +$(function () { + $('#guide-carousel') + .carousel({ + interval: false, + wrap: false, + }) + .on('slide.bs.carousel', function (event) { + if (event.to == 0) { + $('#guide-bars').addClass('d-none'); + } else { + $('#guide-bars').removeClass('d-none'); + } + }); +}); $('#previous-card').hide(); diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss index f588f88e4..96a94e8b4 100644 --- a/concordia/static/scss/base.scss +++ b/concordia/static/scss/base.scss @@ -174,14 +174,36 @@ h1, font-weight: bold; } -p a { +li a { + text-decoration: none; +} + +li a:hover { + text-decoration: underline; +} + +.text-dark { + color: $gray-800 !important; +} + +p a, +.simple-page a { text-decoration: underline; } -p a:hover { +p a:hover, +.simple-page a:hover { text-decoration: none; } +.input-group-prepend { + margin-right: -1px; +} + +.input-group-append { + margin-left: -1px; +} + a .campaign-title:hover, .hero-text a:hover { color: $dark; diff --git a/concordia/templates/account/account_deletion.html b/concordia/templates/account/account_deletion.html index 15d5f8500..21bbcfcdb 100644 --- a/concordia/templates/account/account_deletion.html +++ b/concordia/templates/account/account_deletion.html @@ -6,13 +6,13 @@
diff --git a/concordia/templates/account/email_reconfirmation_failed.html b/concordia/templates/account/email_reconfirmation_failed.html index 9554140e6..6ba7f48d4 100644 --- a/concordia/templates/account/email_reconfirmation_failed.html +++ b/concordia/templates/account/email_reconfirmation_failed.html @@ -4,13 +4,13 @@
diff --git a/concordia/templates/account/profile.html b/concordia/templates/account/profile.html index 129128fad..4137d2fd9 100644 --- a/concordia/templates/account/profile.html +++ b/concordia/templates/account/profile.html @@ -18,13 +18,13 @@
@@ -33,16 +33,16 @@

Account Settings

- Username: {{ user.username }} + Username: {{ user.username }}
- Email address: {{ user.email }} + Email address: {{ user.email }}
{% if unconfirmed_email %}
- Unconfirmed email address: {{ unconfirmed_email }} + Unconfirmed email address: {{ unconfirmed_email }}
{% endif %}
@@ -77,11 +77,11 @@

Account Settings

{% csrf_token %}
diff --git a/concordia/templates/base.html b/concordia/templates/base.html index b201e8364..2a8afeb17 100644 --- a/concordia/templates/base.html +++ b/concordia/templates/base.html @@ -70,7 +70,7 @@

Date Page - +
{% if campaign %} Show All {% endif %} {% for recent_campaign in recent_campaigns %} - + {{ recent_campaign.title }} {% endfor %}
- +
{% if activity %} Show All {% endif %} - Reviewed - Transcribed + Reviewed + Transcribed
- +
- In Progress - Needs Review - Completed + In Progress + Needs Review + Completed