Add bootstrap5 support + drop IE support

Signed-off-by: Andrew-Chen-Wang <acwangpython@gmail.com>

{{cookiecutter.project_slug}}/config/settings/base.py

@@ -71,6 +71,7 @@ DJANGO_APPS = [
 ]
 THIRD_PARTY_APPS = [
     "crispy_forms",
+    "crispy_bootstrap5",
     "allauth",
     "allauth.account",
     "allauth.socialaccount",
@@ -208,7 +209,8 @@ TEMPLATES = [
 FORM_RENDERER = "django.forms.renderers.TemplatesSetting"
 
 # http://django-crispy-forms.readthedocs.io/en/latest/install.html#template-packs
-CRISPY_TEMPLATE_PACK = "bootstrap4"
+CRISPY_TEMPLATE_PACK = "bootstrap5"
+CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
 
 # FIXTURES
 # ------------------------------------------------------------------------------

{{cookiecutter.project_slug}}/requirements/base.txt

@@ -34,6 +34,7 @@ django-environ==0.4.5  # https://github.com/joke2k/django-environ
 django-model-utils==4.1.1  # https://github.com/jazzband/django-model-utils
 django-allauth==0.44.0  # https://github.com/pennersr/django-allauth
 django-crispy-forms==1.11.2  # https://github.com/django-crispy-forms/django-crispy-forms
+crispy-bootstrap5==0.4  # https://github.com/django-crispy-forms/crispy-bootstrap5
 {%- if cookiecutter.use_compressor == "y" %}
 django-compressor==2.4.1  # https://github.com/django-compressor/django-compressor
 {%- endif %}

{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/account/email.html

@@ -66,15 +66,14 @@ window.addEventListener('DOMContentLoaded',function() {
   const message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
   const actions = document.getElementsByName('action_remove');
   if (actions.length) {
-    actions[0].addEventListener("click", function(e) {
+    actions[0].addEventListener("click",function(e) {
       if (!confirm(message)) {
         e.preventDefault();
       }
     });
   }
+  Array.from(document.getElementsByClassName('form-group')).forEach(x => x.classList.remove('row'));
 });
-
-$('.form-group').removeClass('row');
 </script>
 {% endblock %}
 {%- endraw %}

{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html

@@ -8,17 +8,12 @@
     <meta name="description" content="{% endraw %}{{ cookiecutter.description }}{% raw %}">
     <meta name="author" content="{% endraw %}{{ cookiecutter.author_name }}{% raw %}">
 
-    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
-    <![endif]-->
-
     <link rel="icon" href="{% static 'images/favicons/favicon.ico' %}">
 
     {% block css %}
     {%- endraw %}{% if cookiecutter.custom_bootstrap_compilation == "n" %}{% raw %}
     <!-- Latest compiled and minified Bootstrap CSS -->
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" integrity="sha512-usVBAd66/NpVNfBge19gws2j6JZinnca12rAe2l+d+QkLU9fiG02O1X8Q6hepIpr/EYKZvKx/I9WsnujJuOmBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     {%- endraw %}{% endif %}{% raw %}
 
     <!-- Your stuff: Third-party CSS libraries go here -->
@@ -41,11 +36,8 @@
       <script defer src="{% static 'js/vendors.js' %}"></script>
       {%- endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
       {%- endraw %}{% else %}{% raw %}
-      <!-- Bootstrap JS and its dependencies-->
-      <script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-      <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-      <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-
+      <!-- Bootstrap JS -->
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX3mjitSecKnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
       <!-- Your stuff: Third-party javascript libraries go here -->
       {%- endraw %}{% endif %}{% raw %}
 
@@ -117,7 +109,13 @@
     {% block modal %}{% endblock modal %}
 
     {% block inline_javascript %}
-    {# Script tags with only code, no src (defer by default) #}
+    {% comment %}
+    Script tags with only code, no src (defer by default). To run
+    with a "defer" so that you run run inline code:
+    <script>
+      window.addEventListener('DOMContentLoaded', () => {/* Run whatever you want */});
+    </script>
+    {% endcomment %}
     {% endblock inline_javascript %}
   </body>
 </html>