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/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/_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..3e0035077 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 @@ -136,6 +136,7 @@ body { border-top: 4px solid $accent; display: flex; flex-direction: column; + font-family: 'Open Sans', arial, helvetica, sans-serif !important; min-height: 100vh; } @@ -143,12 +144,15 @@ main { flex: 1 1 0%; } -.simple-page a { - text-decoration: underline; +.container, +.col-md-2 { + padding-left: 15px !important; + padding-right: 15px !important; } -.simple-page a:hover { - text-decoration: none; +.row { + margin-left: -15px !important; + margin-right: -15px !important; } .close { @@ -179,17 +183,109 @@ main { h1, .h1 { font-family: $font-family-serif; - font-weight: bold; + font-weight: bold !important; +} + +body h2 { + font-size: $h2-font-size; + font-weight: $headings-font-weight !important; +} + +h3 { + font-size: $h3-font-size !important; + font-weight: $headings-font-weight !important; +} + +body h4 { + font-size: $h4-font-size; + font-weight: $headings-font-weight; +} + +body h5 { + font-size: $h5-font-size; + font-weight: $headings-font-weight; +} + +body a { + color: $blue; +} + +li a { + text-decoration: none; +} + +li a:hover { + text-decoration: underline; +} + +.text-dark { + color: $gray-800 !important; } -p a { +p a, +.simple-page a { text-decoration: underline; } -p a:hover { +p a:hover, +.simple-page a:hover { text-decoration: none; } +.row > * { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.input-group-prepend { + margin-right: -1px; +} + +.input-group-append { + margin-left: -1px; +} + +.btn { + font-weight: $btn-font-weight !important; +} + +button.btn-close-blue { + background: transparent + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230076ad'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") + center/1em auto no-repeat; + opacity: 1; +} + +.btn-primary { + background-color: $blue !important; + border-color: $blue !important; + color: #fff !important; +} + +.btn-primary:hover { + background-color: #005c87; +} + +a.btn-dark { + color: #fff !important; +} + +a.btn-outline-dark { + color: $gray-800 !important; +} + +a.btn-outline-dark.active { + color: #fff !important; +} + +a.btn-outline-dark:hover { + color: #fff !important; +} + +.btn-light { + color: $gray-800 !important; +} + a .campaign-title:hover, .hero-text a:hover { color: $dark; @@ -208,21 +304,25 @@ p.hero-secondary.offwhite-text { color: #fff; } -.bg-completed { +span.text-primary { + color: $blue !important; +} + +.row .bg-completed { background-color: $bg-completed; } -.bg-submitted { +.row .bg-submitted { background-color: $bg-submitted; } /* stylelint-disable-next-line selector-class-pattern */ -.bg-in_progress { +.row .bg-in_progress { background-color: $bg-in-progress; } /* stylelint-disable-next-line selector-class-pattern */ -.bg-not_started { +.row .bg-not_started { background-color: $bg-not-started; border: 1px solid $primary; } @@ -256,11 +356,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; } } @@ -310,10 +410,14 @@ ul.nav-secondary { border-left: solid 0.0675rem $gray-100; } +.navbar-light .navbar-nav .nav-link { + color: $gray-800 !important; +} + .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 +429,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; } @@ -408,6 +512,11 @@ $card-progress-height: 12px; font-size: 13px; } +.breadcrumb { + margin-bottom: 0 !important; + padding: 7px 0 !important; +} + .breadcrumb-item { max-width: 20em; white-space: nowrap; @@ -415,6 +524,14 @@ $card-progress-height: 12px; overflow: hidden; } +.breadcrumb-item + .breadcrumb-item { + padding-left: 0.25rem !important; +} + +.breadcrumb-item + .breadcrumb-item::before { + padding-right: 0.25rem !important; +} + .section-link { text-decoration: underline; padding-top: 1em; @@ -443,7 +560,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%; } @@ -543,7 +660,7 @@ $card-progress-height: 12px; } .campaign-page-progress { - height: 2.5rem; + height: 2.5rem !important; } .campaign-progress { @@ -551,6 +668,14 @@ $card-progress-height: 12px; margin-top: 20px; } +.page-link:hover { + text-decoration: none; +} + +a.page-link { + color: $blue; +} + .page-item.disabled .page-link { color: black; } @@ -643,7 +768,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 +787,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'); } @@ -687,7 +812,7 @@ $card-progress-height: 12px; } } -.carousel-indicators { +.carousel .carousel-indicators { > li { border-radius: 50%; border: 1px solid $dark; @@ -698,6 +823,18 @@ $card-progress-height: 12px; border-color: $white; } } + + left: 50%; + width: 60%; + margin-left: -30%; + text-align: center; +} + +.carousel .carousel-indicators > button { + border: 1px solid $gray-800; + border-radius: 100%; + height: 14px; + width: 14px; } .aspect-ratio-box { @@ -850,6 +987,15 @@ $card-progress-height: 12px; resize: none; } +a.btn-outline-primary { + border-color: $blue; + color: $blue; +} + +a.btn-outline-primary:hover { + background-color: $blue; +} + .btn-outline-primary.disabled, .btn-outline-primary:disabled { opacity: 0.2; @@ -1110,14 +1256,7 @@ $card-progress-height: 12px; padding-left: 1.5rem; } -#card-carousel .carousel-indicators { - left: 50%; - width: 60%; - margin-left: -30%; - text-align: center; -} - -#card-carousel .carousel-indicators > li.active { +#card-carousel .carousel-indicators .active { background-color: #007bff; border-color: #007bff; } @@ -1138,6 +1277,7 @@ $card-progress-height: 12px; #open-guide { border-radius: 0; margin: -14px 5px 0 9px; + width: 100px; white-space: nowrap; } diff --git a/concordia/templates/account/account_deletion.html b/concordia/templates/account/account_deletion.html index 7ee2bee4c..21bbcfcdb 100644 --- a/concordia/templates/account/account_deletion.html +++ b/concordia/templates/account/account_deletion.html @@ -1,18 +1,18 @@ {% extends "base.html" %} -{% load bootstrap4 %} +{% load django_bootstrap5 %} {% block main_content %}
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 f7593915b..4137d2fd9 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 %} @@ -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..b5acf5b3f 100644 --- a/concordia/templates/base.html +++ b/concordia/templates/base.html @@ -32,6 +32,7 @@ dns-prefetch" crossorigin> {% endblock prefetch %} + {% block head_content %}{% endblock head_content %} {% comment %} Adobe's tag manager requires this script to be placed at the top even though it's bad @@ -55,7 +56,7 @@ {% block site-header %}