Bootstrap 5 studies (#1104)

* Update django bootstrap to v5 * Update load bootstrap tag * Moves static HTML to web template directory * Fix sonarcloud issues * Changes to the login page to support BS5 * Add bootstrap icons package * Add title to login view * Move footer to its own file * Clean up navigation bar html * HTML update to home view * Updates to FAQ accordion * Updates to the studies list page
lookit · Feb 16, 2023 · 57f19c1 · 57f19c1
1 parent 6c699ca
commit 57f19c1
Show file tree

Hide file tree

Showing 60 changed files with 1,149 additions and 1,144 deletions.
diff --git a/Makefile b/Makefile
@@ -46,5 +46,8 @@ local-certs:
 	mkcert -install
 	cd certs && mkcert local_lookit.mit.edu
 
+media:
+	gsutil -m cp -r "gs://lookit-staging/media" ./project
+
 test:
 	docker compose run --rm -e ENVIRONMENT= web poetry run ./manage.py test --failfast 
diff --git a/accounts/forms.py b/accounts/forms.py
@@ -478,7 +478,7 @@ class StudyLocation(FormChoiceEnum):
     study_list_tabs = forms.ChoiceField(
         choices=Tabs.choices(),
         initial=0,
-        widget=forms.RadioSelect(attrs={"class": "hidden"}),
+        widget=forms.RadioSelect(attrs={"class": "d-none"}),
         required=False,
     )
     study_location = forms.ChoiceField(choices=StudyLocation.choices(), required=False)

diff --git a/accounts/templates/accounts/2fa-setup.html b/accounts/templates/accounts/2fa-setup.html
@@ -1,5 +1,5 @@
 {% extends "web/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% block title %}
     Set up Two Factor Authentication
 {% endblock title %}

diff --git a/accounts/templates/accounts/account-update.html b/accounts/templates/accounts/account-update.html
@@ -1,5 +1,5 @@
 {% extends "web/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% block title %}
     Update account information
 {% endblock title %}

diff --git a/accounts/templates/accounts/participant_detail.html b/accounts/templates/accounts/participant_detail.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load exp_extras %}
 {% load i18n %}
 {% block title %}

diff --git a/accounts/templates/accounts/participant_list.html b/accounts/templates/accounts/participant_list.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load exp_extras %}
 {% load i18n %}
 {% block title %}

diff --git a/accounts/templates/accounts/researcher-registration.html b/accounts/templates/accounts/researcher-registration.html
@@ -1,5 +1,5 @@
 {% extends "web/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% block title %}
     Researcher Registration
 {% endblock title %}

diff --git a/exp/templates/exp/base.html b/exp/templates/exp/base.html
@@ -1,4 +1,4 @@
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load static %}
 {% load guardian_tags %}
 {% load web_extras %}
@@ -47,6 +47,7 @@
                 {% endblock header %}
             </header>
             <section id="flash-messages">
+                {% bootstrap_messages %}
                 {% block flash %}
                 {% endblock flash %}
             </section>

diff --git a/exp/templates/exp/support.html b/exp/templates/exp/support.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load i18n %}
 {% block title %}
     Support Lookit

diff --git a/poetry.lock b/poetry.lock
diff --git a/project/settings.py b/project/settings.py
@@ -62,7 +62,8 @@
     "guardian",
     "localflavor",
     "rest_framework",
-    "bootstrap3",
+    "django_bootstrap5",
+    "django_bootstrap_icons",
     "ace_overlay",
     "corsheaders",
     "rest_framework.authtoken",

diff --git a/pyproject.toml b/pyproject.toml
@@ -13,7 +13,7 @@ Django = "3.2.11"
 django-ace-overlay = { git = "https://github.com/lookit/django-ace-overlay.git", branch = "master" }
 django-allauth = "0.42.0"
 django-bitfield = "2.1.0"
-django-bootstrap3 = "^21.1"
+django-bootstrap5 = "22.2"
 django-celery-beat = "2.0.0"
 django-cors-headers = "3.13.0"
 django-countries = "7.2.1"
@@ -51,6 +51,7 @@ sentry-sdk = "1.3.0"
 transitions = "0.8.1"
 uWSGI = "2.0.19.1"
 pillow = "9.4.0"
+django-bootstrap-icons = "0.8.2"
 
 [tool.poetry.dev-dependencies]
 coverage = "^5.5"

diff --git a/studies/templates/studies/_all_json_and_csv_data.html b/studies/templates/studies/_all_json_and_csv_data.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load exp_extras %}
 {% block title %}
     All Responses | {{ study.name }}

diff --git a/studies/templates/studies/_study_fields.html b/studies/templates/studies/_study_fields.html
@@ -1,4 +1,4 @@
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 <script>
 
     // Show the generator function field only if use_generator is checked.

diff --git a/studies/templates/studies/lab_create.html b/studies/templates/studies/lab_create.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% block title %}
     Create lab
 {% endblock title %}

diff --git a/studies/templates/studies/lab_detail.html b/studies/templates/studies/lab_detail.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% block title %}
     {{ lab.name }}
 {% endblock title %}

diff --git a/studies/templates/studies/lab_list.html b/studies/templates/studies/lab_list.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load exp_extras %}
 {% block title %}
     Labs

diff --git a/studies/templates/studies/lab_member_list.html b/studies/templates/studies/lab_member_list.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load exp_extras %}
 {% block title %}
     Lab members

diff --git a/studies/templates/studies/lab_update.html b/studies/templates/studies/lab_update.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% block title %}
     Update lab
 {% endblock title %}

diff --git a/studies/templates/studies/study_attachments.html b/studies/templates/studies/study_attachments.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load exp_extras %}
 {% load tz %}
 {% block title %}

diff --git a/studies/templates/studies/study_detail.html b/studies/templates/studies/study_detail.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load guardian_tags %}
 {% load static %}
 {% load tz %}

diff --git a/studies/templates/studies/study_edit.html b/studies/templates/studies/study_edit.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load guardian_tags %}
 {% load exp_extras %}
 {% block head %}

diff --git a/studies/templates/studies/study_form.html b/studies/templates/studies/study_form.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% block title %}
     Create Study
 {% endblock title %}

diff --git a/studies/templates/studies/study_list.html b/studies/templates/studies/study_list.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load exp_extras %}
 {% block title %}
     Studies

diff --git a/studies/templates/studies/study_participant_analytics.html b/studies/templates/studies/study_participant_analytics.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load static %}
 {% load guardian_tags %}
 {% block head %}

diff --git a/studies/templates/studies/study_participant_contact.html b/studies/templates/studies/study_participant_contact.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load guardian_tags %}
 {% load exp_extras %}
 {% load static %}

diff --git a/studies/templates/studies/study_responses.html b/studies/templates/studies/study_responses.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load exp_extras %}
 {% load static %}
 {% block title %}

diff --git a/studies/templates/studies/study_responses_consent_ruling.html b/studies/templates/studies/study_responses_consent_ruling.html
@@ -1,5 +1,5 @@
 {% extends "exp/base.html" %}
-{% load bootstrap3 %}
+{% load django_bootstrap5 %}
 {% load exp_extras %}
 {% load static %}
 {% block title %}

diff --git a/web/static/js/studies-list.js b/web/static/js/studies-list.js
@@ -0,0 +1,44 @@
+const $form = $('form');
+const $hideStudiesCheckbox = $form.find('input:checkbox[name=hide_studies_we_have_done]')
+const $checkboxes = $form.find('input:checkbox')
+const $dropdownSelected = $form.find('select option:selected')
+
+if ($dropdownSelected.val() === '') {
+    $hideStudiesCheckbox.attr('disabled', true);
+}
+
+$form.on('reset', function (event) {
+    resetForm(submitForm);
+})
+
+function resetForm(callbackFn) {
+    $form.find('input:text').attr('value', '')
+    $checkboxes.attr('checked', true);
+    $hideStudiesCheckbox.attr('checked', false)
+    $dropdownSelected.removeAttr('selected');
+    callbackFn()
+}
+
+function submitForm() {
+    $checkboxes.attr('disabled', false);
+    $form.submit()
+}
+
+$('select, input:checkbox').on('change', submitForm)
+
+// Set active tab based on which "tabs" radio button is checked.
+const checked_radio = document.querySelector('input[name=study_list_tabs]:checked')
+const active_tab = document.querySelector(`[data-value="${checked_radio.value}"] a`)
+active_tab.classList.add('active')
+
+// On click, update radio group 
+document.querySelectorAll('[role=study_list_tabs]').forEach(function (tab) {
+    tab.addEventListener('click', function (event) {
+        event.preventDefault()
+        const radio = document.querySelector(`[name="study_list_tabs"][value="${tab.dataset.value}"]`)
+        if (!radio.hasAttribute('checked')) {
+            radio.checked = true
+            submitForm()
+        }
+    })
+})
diff --git a/web/templates/frontpages/default.html b/web/templates/frontpages/default.html